Responsive question

How do I set the top hero section of this site so that the overlay is inset at the bottom (as it is now) on desktop width, but for mobile, the text box is in a separate section just below the image?

Thanks!


Here is my site Read-Only: LINK

Hello @robtour,

Im not sure what you are asking, but I think what you want to accomplish is to get the same effect you have on your home hero as you scroll down in desktop in mobile, right? What is happening is that in mobile your “Banner Home Fourth” section background image is not set to fixed.
34%20PM
Change it from not fixed to fixed and you will have the same effect as you do in desktop. Im sorry if this is not what you are asking but I hope this helps.

Ah, thanks… what I’d actually like is to have the background image with the overlay box on desktop, and then on mobile, have the background image and the overlay box appear as distinct sections, like this:

I’m just not sure how to set it so that I have the current overlay on desktop, and two separate sections on mobile. Thanks!

Hello @robtour, I see what you are saying now. So to achieve that, you have to create a section underneath your hero on desktop.
45%20AM
Then you add all the info that you want from your hero info block. Then you set the display for that new section to none on desktop. then on mobile you give that section display flex or any other display you want and style it how you want. That way that layout is only visible on mobile. I hope this helps.

1 Like

This is very helpful–sorry, I thought no one had responded. I appreciate it. Thanks so much!

1 Like