What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Product image stuck at top of page, won't get below header (broadcast theme)

Solved

Product image stuck at top of page, won't get below header (broadcast theme)

TimTakeTwo
Excursionist
28 0 6

Hello,


My website is https://taketwojewelry.com/

 

for some reason product image at product pages is all the way at the top instead of below header. This is happening on both desktop and mobile.

 

TimTakeTwo_0-1704325606313.png

TimTakeTwo_1-1704325627449.png


Can someone please assist?

Thank you in advance.

Accepted Solution (1)
Abdosamer
Shopify Partner
943 172 198

This is an accepted solution.

@TimTakeTwo , Add the following code :

.product__images--mobile-thumbs .product__slides {
    margin-top: 7rem !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

View solution in original post

Replies 7 (7)

Abdosamer
Shopify Partner
943 172 198

Hi @TimTakeTwo , go to theme.css and add the following code :

 @media (max-width:749px){

.product__images--mobile-thumbs .product__slides {
   
    margin-top: 5rem !important;
}

}

Result:

Abdosamer_0-1704326751375.png

 


 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
TimTakeTwo
Excursionist
28 0 6

hello,

 

any solution for desktop?

 

TimTakeTwo_0-1704327127881.png

 

Abdosamer
Shopify Partner
943 172 198

This is an accepted solution.

@TimTakeTwo , Add the following code :

.product__images--mobile-thumbs .product__slides {
    margin-top: 7rem !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
TimTakeTwo
Excursionist
28 0 6

Thank you!!!!!!!!!!!!!!!

TimTakeTwo
Excursionist
28 0 6

Hello, sorry this seems to work and help make the desktop picture go down but seems to make the mobile picture go down even more compared to 5rem which was perfect. Could you please help?

Abdosamer
Shopify Partner
943 172 198

@TimTakeTwo , change this code :

.product__images--mobile-thumbs .product__slides {
    margin-top: 7rem !important;
}

to this :

@media (min-width:990px){
  .product__images--mobile-thumbs .product__slides {
    margin-top: 7rem !important;
}


}

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
TimTakeTwo
Excursionist
28 0 6

Thank you so much!