Inner page logo/header problem on mobile devices

  • I had a similar problem as this about a year ago when I first made this site, and now the client wants a redesign as far as color scheme. I’ve gotten the header and logo to behave on computer browsers for both the front and inner pages, and was able to get the front page logo looking good on the phone using the CSS you gave me last year, but for the inner pages the header is extremely small and the logo covers the page title. There’s no option to adjust Mobile Content Settings in the Inner Page Hero like there is for the Front Page so I’m at a loss.

    Here are two screen captures, one of the way the site looks on the computer (good) and the way it looks on the phone. Your help would be greatly appreciated, I don’t know what else to try at this point.

    https://tejadadesign.com/images/computer.png

    https://tejadadesign.com/images/phone.png

    • This topic was modified 5 years, 9 months ago by DebT.
    • This topic was modified 5 years, 9 months ago by DebT.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,

    Please, use this extra CSS code in Customizer -> General Settings -> Additional CSS :

    @media screen and (max-width: 468px){
   .mesmerize-inner-page .inner-header-description{
       padding-top:20% !important;
       padding-bottom:20% !important;
   }
}

    You can adjust the values of the padding according to your needs.

    Please, let me know if it worked for you, @debbiet

    Thread Starter DebT

    (@debbiet)

    Yes thank you so much! I ended up with 0% padding on the bottom and that moved the page title down enough to clear the logo. Can you tell me why the hero image is so small? Is there a way I can fix that too?

    https://tejadadesign.com/images/imageSmall.jpg

    Thread Starter DebT

    (@debbiet)

    Another question: it seems when the site’s pages load in a desktop browser, the header content is compressed and I have to either refresh the pages or adjust the browser window size and then everything goes where it belongs. Do you know why it’s doing that? I’m attaching another screen capture of how it looks when it loads, and then after refreshing. My content spacing for the front page is 10% and 10% because if I go any higher the header gets too big and takes up half the page.

    https://tejadadesign.com/images/refresh.jpg

    • This reply was modified 5 years, 9 months ago by DebT.
    Thread Starter DebT

    (@debbiet)

    Update: I mostly got things fixed, so you can ignore the last two messages. But now the hero image on the inner pages on phones shows much more of the image than the home page and inner pages on the website. Can I fix that with CSS so they are more consistent? The website shows the bottom of the sun being cut off, which is what they want. On the phone, the inner pages show the entire intact sun.

    https://tejadadesign.com/images/headerImages.jpg

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Inner page logo/header problem on mobile devices’ is closed to new replies.