Hello all!
I designed a header variant that has three visible elements:
- Background image with a slide black tint, that has a max-width which matches the width of the site’s wrapper
- The page name, which is overlaid onto the background image
- 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!
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:
- Enable X-ray mode in Canvas settings (click the gear icon)
- Hover over elements on the right side of your page
- Look for elements with widths extending beyond the viewport
- Check for absolute positioning or fixed widths that might cause the overflow
- 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.