Help with Media Query display

Highlighted
New Member
4 0 0

Hey, 

On my product page I am trying to get my thumbnail images to display:

$Medium - Up: in a vertical line to the left of the main image.

$Small: underneath the main image in 2 rows of 2 images. 

 

But I can't get the $Small Media query to work, I thought maybe it's because the thumbnail images are too wide so even when told to display inline they appear one under the other....

Here is the current CSS

#thn {

position: absolute;
left: 0px;
}
#thumbnails {

display: block;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
@media only screen and (max-width: 749px) {
#thumbnails {
display:inline;
width:calc(50% - 20px);
}
#thn {
position:relative;
}
}

 

And here is a link to the product page 

https://kipperandchalk.com/products/grey-linen-trousers

 

I'd really appreciate some advice. 

Many thanks

 

Imogen 

(And if anyone knows how to center my Small screen so everything stops trying to jump off the page to the right I would also love to know that too.)

0 Likes

Hello 

 

Please use below css

 

@media only screen and (max-width: 425px)
grey-linen-trousers:2119
#thumbnails { display: inline-block; width: calc(50% - 20px);}]
 
linen_pant.jpg
 
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: pallavi@oscprofessionals.com
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
4 0 0
Thanks so much.
0 Likes