Vertical order unexpectedly messed up on Mobile

Design help General
1

Hello all!

I designed a header variant that has three visible elements:

  1. Background image with a slide black tint, that has a max-width which matches the width of the site’s wrapper
  2. The page name, which is overlaid onto the background image
  3. A label, set in smaller font, that is above the page name but that is still overlaid onto the background image

For some reason, the page name refuses to be constrained atop the background image any longer (it used to work). In addition to this, it looks like my image width isn’t reducing for mobile. It’s rendering accurately, but when I mouseover in designer mode, I can see that image crop is hanging off the viewport.

Read only link to page in question is here.

Any tips appreciated!

2

Hi there!

For the background image width issue on mobile, here’s how to ensure proper scaling:

  • Set the background image container width to 100%
  • Use ‘cover’ for the background-size property
  • Add ‘max-width: 100%’ to prevent overflow
  • Consider adding ‘overflow-x: hidden’ to the body element if needed

Regarding the page name positioning and extra whitespace, you can troubleshoot this by:

  1. Enable X-ray mode in Canvas settings (click the gear icon)
  2. Hover over elements on the right side of your page
  3. Look for elements with widths extending beyond the viewport
  4. Check for absolute positioning or fixed widths that might cause the overflow
  5. Adjust any elements with excessive margins or padding

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

On mobile version, set the header background image positioning to absolute - this will return your heading to the correct position. Having said that, you are likely to experience other layout issues here due to the fact that there are a lot of positioning and size elements set which are not really required, over-complicating what should be a simple layout. Perhaps check out some of the tutorials on Webflow’s YouTube channel to help get you started. Hope this helps. :slightly_smiling_face:

4

Thank you for the assist, Craig!