Why is my product photo being cut off by the header bar?

Store Design
1

Hello, I use debut theme- On my product page, the top of my product photo is cut off by the header as well as the production title https://eceauxdrinks.com/collections/eceaux/products/tranquilite

How can I solve this?

2

Hello @Annabee

Go to your theme.css file and add the following code at the end:

@media only screen and (min-width: 750px)
{
.main-content {
    padding-top: 175px!important;
}
}

Let me know if that works!

3

@Annabee

Please add the following code at the bottom of your assets/theme.css file.

#shopify-section-product-template{margin-top: 7em;}

Hope this works.
Thanks!

4

Dear @Annabee

Hope this will help you

  • From your Shopify admin, go to Online Store > themes.

  • Locate your current theme and then click Actions > Edit code.

  • After that in the Assets folder, click to open your theme.scss.liquid file.

  • Go to the very bottom of this file and paste the following code:

/* Start */
.template-product .page-container.drawer-page-content {padding-top: 150px !important;}
/* End*/
  • Save and check your theme by refreshing it.
5

got a friendly canadian developer to sort that out for me :slightly_smiling_face:

6

Hi there! I know this is an old thread - however I am having the same issue with my website right now as the original poster. I tried this method, however I am unable to locate the theme.scss.liquid file under assets - I have even tried searching for it. Any chance you know another file name that it might be under or if this has changed since your original response in 2021? Thank you!