pushing page content down on product pages

Shopify Partner
29 0 3

I am customizing the Brooklyn theme. I have added a background color to the nav menu and it looks fine on all pages except the product pages, where it is overlapping the images. I tried adding padding-top: 30px inline to the product.liquid, and it looked fine on the large screen, however in the mobile view it is still an issue.

I am assuming there is a better way to solve this... Can anyone advise me the best way to push the page content down on the product pages in all screen sizes? 

http://justb-2.myshopify.com/products/clarisse-2725

Thanks for any help!

0 Likes
Shopify Staff
Shopify Staff
370 0 29

Hello Julia, Ben here - your Shopify Guru! 

 Put this somewhere on your product.liquid:

<style>
  .main-content { padding-top: 120px!Important; }
</style>

That will pad all of the product content including the image. Should be just right for mobile as well. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

2 Likes
Highlighted
Shopify Partner
29 0 3

Wow. You are awesome, thank you! Worked great.

0 Likes
New Member
5 0 0

Hi Benjamin,

 

I have related issue in my store, am using Venture theme, When i open in mobile view menu's and background content are overlapping. 

 

Please find the attached screenshots.

 

82f752a2-e2ff-4002-8497-53de6f7ae38a (1).jpgIMG_3149.jpegIMG_3150.jpeg

0 Likes