jk00723

@tuanphan THANK YOU THANK YOU!!! That worked!! You're amazing 🙂

Sorry @tuanphan, I'm stuck. I've tried the steps that you suggested and used your exact code with the > added, but I still can't get it to work. I've placed the original code back in (without the >) just so that the image looks ok on mobile for the time being (even though the products section is still stacked above the footer). Any other edits you can suggest?

Hi @tuanphan ... thank you for the reply! I pasted your code directly into the Goodies page header, but unfortunately, I can't seem to get it to work. For now, I've put the original code back in so that the header image is sized correctly. Are there any additional edits you can suggest so that the footer does not move up the page and appear behind my other sections? Thanks!

Definitely moving in the right direction! My first goal was to have the background image in the header fit properly on mobile, which this CSS accomplishes. Do you know how I could modify it so that the rest of the page works properly?

Thanks, @creedon! Here is the link to the page in question: www.vicesandgoodies.com/goodies (it's setup properly in desktop view, but on mobile, the footer is moved up and stacked beneath the store/product section. Any tips are appreciated! *By the way, subject matter on the website is for 21+ 🙂

Hi @tuanphan... I have the exact same question as AndrewTFS. I've used the following code on my store page and it works perfectly... the background image at the top is sized exactly as needed on mobile. However, the footer and any other section section then seems to be moved up and is jumbled in with the store/products section. I used the same code on other pages and am not having this problem, so I believe it may be an issue related to the store function. Any advice on how to fix? I can send my website url if needed. Thank you!! Code used: <style> @media screen and (max-width:767px) { #page section:first-child { height: 30vh !important; min-height: unset !important; } } </style>