Collection List Grid boxes/overly around my image is too wide on mobile view (desktop is fine)

Solved
Emurph35
Excursionist
36 0 13

Hello

The box/overlay around the images (which are square) are too wide, which make it look like a rectangle so there is too much space to the right of the image.  Can someone please help me to get rid of this extra width to the box.  Also how do I make the text underneath smaller and centred.  Image below: 

 

06AA160D-E756-480E-B50B-F1074171D510.jpeg

 

Thank you

0 Likes
JHKCreate
Shopify Partner
2565 433 626

Hi @Emurph35 

Can you share your store's URL so we can provide a solution for that?

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
- Learn more about us: jhkcreate.com

0 Likes
Emurph35
Excursionist
36 0 13

Hello

Here you go https://now-lashes.myshopify.com  The password is Thoffo 

Thank you! 

0 Likes
JHKCreate
Shopify Partner
2565 433 626

This is an accepted solution.

In your custom.css file, find this piece of code:

@media only screen and (max-width: 749px)
{
div#shopify-section-1604326070508e25be .collection-grid-item__overlay {
    height: 100px;
}
}


And replace it with the following:

@media only screen and (max-width: 749px)
{
div#shopify-section-1604326070508e25be .collection-grid-item__overlay {
    height: 130px;
}
}

That should do it! Let us know

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
- Learn more about us: jhkcreate.com

0 Likes
Emurph35
Excursionist
36 0 13

Thank you so much for that, It worked perfectly.  

However I also have the same problem on the page after you click shop now. What code would

I change for that? 

09C3245E-73D7-42DF-9E32-C75636124CD0.png

 

Thanks for you help

 

0 Likes