Back to the top
Ticket #10085 in : Resolved

mobile menu covers graphic

  • Paul Pereira

    I’m using the bite theme and using page-builder. While in large screen mode and using a a solid menu, the first section stars below where the menu ends. But when it uses the mobile version the section start at the top of the viewing are same as the menu and therefore the menu cuts off the top of the graphics. How can I make it so that the graphic is not cut off when viewing with a mobile device?

    thank you.

    Posted 2 months ago
  • user-1260 Laur Ghe Staff

    Hi Paul,

    Thank you for the patience.

    On my end, the header looks ok on mobile. See this screenshot. In the case I am missing something, please elaborate more, send a screenshot, etc.

    Have a great day!

    Posted 2 months ago
  • Paul Pereira

    Hi Laur,  The header in both our cases has the top portion cut off (notice the text).  I’ve attached a desktop view:

     

    Attachments
    Posted 1 month ago
  • user-1260 Laur Ghe Staff

    Hi Paul,

    Thank you for the feedback.

    Well, you cannot have the same screen on a 16:9 ratio (desktop) and on a 4:3 (usually mobiles) screens.  The script takes the width of the screen and reduces the height of the image accordingly. You should avoid using texts on background images. Also, check the background image options (responsive, cover, etc) located below the field you added the image. Maybe one of them will suit you better.

    Thanks for understanding.

    Posted 1 month ago
  • Paul Pereira

    Hi Laur,

    Thank you for you patience.

    I do understand about the different aspect ratios and automatic cropping and using text too close to the edge.  I try explaining it to my client over and over again.

    In this case this is not it.  There is no cropping with this photo, the width is 100% and the height is not cropped at all.  The photo is actually starting under the menu (such as when the menu is set to semi transparent.  It only happens when the “mobile” menu is used.

    I’m including a screen shot on the same screen as before 16:9, but using the mobile menu, you can see that only the top is cropped.  It’s as if the top of the photo is layered under the menu.  Notice that the black word NOPAL is cut off.  Of course the effect is more pronounced in mobile portrait mode.  Sadly my client is unable/unwilling? to provide more responsive friendly photos.

    Attachments
    Posted 1 month ago
  • user-1260 Laur Ghe Staff

    Hi Paul,

    I am sorry for keeping you waiting for so long.

    You can go to WP Admin > Appearance > Theme options > CSS and use this CSS to adjust the top margin for the header image on small devices:

    @media screen and (max-width: 1024px) { 
    .wpb-linked-image .wpb-image-inner img {
          margin-top: 70px;
    }
    }

    I hope that helps!

    Posted 1 month ago
  • Paul Pereira

    Just a follow up.  This resolved the problem except for a grey gap that showed up, I changed the magin-top to 50px and it seems just right now.  Thank you.

    Posted 4 weeks ago
  • user-1260 Laur Ghe Staff

    Hi Paul,

    Thank you for the feedback.

    I am glad to hear that. 🙂

    Success with your project!

    Posted 4 weeks ago