Home Forums Art WordPress Theme Questions re. mobile layout

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #22939
    ellent
    Participant
    Purchased
    Supported

    Hi there,

    Was hoping you can help me with the following. My site: https://www.gunforhire.agency/

    1. Really happy with the homepage on desktop, but it doesn’t work (3rd party slider) on mobile. Is it possible to set a different homepage for mobile than for desktop? Or any other thoughts on how I can work around this?

    2. Is it possible to adjust the layout of the pages just for mobile and leave them as they are on desktop? For example, this page: https://www.gunforhire.agency/sergio-herman-x-jfk-magazine/.  I’d like to set the accompanying text on top of the page on mobile, but leave it fixed right of the image on desktop.

    3.The header on mobile. I’d like it to stick on the top of the page, but I don’t want it to be transparent. I’d like the background of the header bar to remain white so when you scroll down the images, the logo doesn’t appear transparent over the images. Is this possible?

    Many thanks for thinking along!

    Ellen

    #22940
    SeaTheme
    Keymaster
    Purchased

    Hi,

    1.
    It is not possible to show a different homepage for mobile than for desktop by theme. It may be possible by other solutions like a 3rd plugin.

    There are options for the Group: Hide for mobile and Hide for desktop. You could put the slider module into a Group, activate “Hide for mobile”.

    2. It is possible by custom CSS(“Appearance > Customize: Additional CSS”), like:

    @media(max-width:767px){
     .page-id-480 .bm-row,
     .page-id-481 .bm-row,
     .page-id-482 .bm-row { display: flex; flex-direction: column; }
      #right-fixed { order: -1; margin-top: 100px; }
    }

    The CSS will let the Text on the top of the page. You should add more page id. I think there are many pages for this layout, are they? I don’t know what are pages with this fixed-right-text. The 480 is the page ID of sergio-herman-x-jfk-magazine. The 481 and 482 are for showing how to add the page ID.
    How to find page id: https://doc.seatheme.net/wordpress-faqs/custom/how-to-find-wordpress-post-page-id/

    3. Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

    @media(max-width:767px){
     .non_bg_header #header  { background-color: #fff!important; }
    }

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #23031
    ellent
    Participant
    Purchased
    Supported

    Thank you so much for your help! So close to having the site ready 🙂

    I’m now working with groups and the ‘hide on desktop/mobile’ function to make sure the layout works on both desktop and mobile. However, for some reason the text block (in a group) is causing a surplus of space at the top of the page on mobile layout. I’m finetuning this page, and once I have it sorted I plan to copy that layout to all other pages: https://www.gunforhire.agency/replay-casio/

    Could you please have a look at this page on mobile and advise me on how to place the image grid immediately under the top text (name photographer) ?

    Once again, many thanks 🙂

    #23034
    SeaTheme
    Keymaster
    Purchased

    Hi, welcome!

    Please check the right-fixed Group, the Height is 100% now, please reduce it.

    Regards!

    #23035
    ellent
    Participant
    Purchased
    Supported

    Yay! That works perfect. Thanks!

    #23050
    ellent
    Participant
    Purchased
    Supported

    Hello, me again… hoping you can help with another couple of questions.

    I’ve added a couple of hyperlinks in the text block on this page: https://www.gunforhire.agency/replay-casio/ but none of them appear to be ‘clickable’ on desktop (there are hyperlinks underneath the little arrows). It does work on mobile, only an issue on desktop and I don’t understand why… do you have any idea?

    Also, the site now looks good on my mobile (iPhone) however, on my friends Samsung mobile the site appears with a dark backrground even though he hasn’t set his phone on ‘dark mode’. Do you know why this is happening?

    Thank you again for your help 🙂

    Cheers,
    Ellen

    #23053
    SeaTheme
    Keymaster
    Purchased

    Hi,

    The header bar is covered on the text, so it can not be clicked.
    Please add the custom CSS to fix it:

    @media (min-width: 768px) {
    .header-main {
        height: 0;
    }
    .navi-hide .navi-trigger-out { 
        margin-top: 200px;
    }
    .navi-logo { 
        margin-top: 180px;
     }
    }

    I tested your website on an Android phone, the background is not dark, it is white, the same as the iPhone. Is there a special option set on your friend’s Samsung phone? Please prove it by visiting https://www.google.com/ to check what’s the BG color on Google.
    If the Google is white, please send me the phone model and system model (preferably with a screenshot of the problem page)

    Regards

    #23055
    ellent
    Participant
    Purchased
    Supported

    Thank you! That piece of CSS coding solved the hyperlink issue and my friend checked again… his phone setting actually was set on ‘dark / night mode’ so that is solved as well 🙂

    Cheers,
    Ellen

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!