Need to reduce spacing and padding between images added to collection pages

Highlighted
Tourist
9 0 5

I added Images onto my collection pages with links.  When I view it thru my mobile, there is a lot of spacing between the images.

 

How do i reduce padding and spacing in between these images ?

 

The site is :

https://www.playtimetoys.com/collections/squishmallows-16-inch

 

Its the oval shaped menu tabs above products.

 

Thank you

0 Likes
Highlighted
Trailblazer
133 29 42

@G-Toys Go to your theme.scss file and add the following code at the end of it.

 

@media screen and (max-width: 425px) {
  .template-collection {
    .grid-link__image--product {
      height: auto !important;
    }
  }
}

 

- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
0 Likes
Highlighted
Tourist
9 0 5
Unfortunately that didn’t do anything. Any other suggestions? Seems like
the padding or spacing between the images is too much. Need to reduce it to
0.
0 Likes
Highlighted
Trailblazer
133 29 42

@G-Toys I see it is working, could you please try it on a private window or clear your cache. Or you meant something else?

Screen Shot 2020-11-10 at 3.55.44 AM.png

- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
0 Likes
Highlighted
Tourist
9 0 5
I reloaded my page and it is still the same.

The RED oval tabs that have the sizes of the product (24 inch, 20 inch, etc)

Has a huge gap between each row. Plus it looks like it’s squishing the tabs
so they are narrow.
0 Likes