I made my header transparent, but now the product images on the product page are too close/in the transparent header for mobile view.
I tried to use this code to make the image have a top margin, but the CSS class that the product image had was the same one that the image slideshow has on my homepage.
@media screen and (max-width:800px){
.media-wrapper{
margin-top:45px;
}
}
The store link is https://testingstore3-levo-plant.myshopify.com/?_ab=0&_fd=0&_sc=1&key=13c8aa585847df77bbf8517f3d71a7c245b017a18d6c369b0d6bb789ce521e23
If you’re in a css.liquid file you can use liquid to check the template name and make that conditional:
{% if template.name == 'product' %}
@media screen and (max-width:800px){
.media-wrapper{
margin-top:45px;
}
}
{% endif %}
This way it only applies on the product page.
@Ninthony I implemented this code and it didn’t change anything, the slideshow image doesn’t have the margin now but the product image on the product page also doesn’t have the margin.
Hm, I was pretty sure you had access to that through css.liquid files, but I have had trouble before for sure. Try doing it in style tags right after the opening body tag in theme.liquid in your layouts folder:
{% if template.name == 'product' %}
{% endif %}
Don’t include the body tag I provided here, I was just showing you where to place it. This should fix it.
@Ninthony It worked thanks so much!
