Change home page Collections block numbers and image size (Desktop - Mobile)

Store Design
1

Hi,

On my Home Page I wish to show 6 different collections on one single line, with smaller images.
My images are 128 px per collection image, so they are not suitable for large sizes.

I think I have figured out the first part, by editing this part of the code in section-collection-list.css:

@media screen and (min-width: 750px) {
  .collection-list__item a:hover {
    box-shadow: none;
  }

  .collection-list.grid--3-col-tablet .grid__item {
    max-width: 15.66%;
  }

  .collection-list--4-items .grid__item,
  .collection-list--7-items .grid__item:nth-child(n + 4),
  .collection-list--10-items .grid__item:nth-child(n + 7) {
    width: 15.66%;
  }
}

Setting the width to 16.6% or less gave me 6 collection blocks on one line.

Note that this is just a brute way of making it work - please suggest better coding options for me!

However, the problem is when you go from full screen desktop to a smaller window, or when you use a mobile phone/tablet.

Then the collection blocks will just resize to giant images with blurry 128px images.

How can i make it so that the blocks stay just as small on desktop as on phone?

I.e. not adaptive to the window size.

Thank you!

Example:

Desktop (perfect):

Skjermbilde 2022-03-05 kl. 00.06.32.png
Skjermbilde 2022-03-05 kl. 00.06.32.png997×323 15.1 KB

Mobile (not good):

Skjermbilde 2022-03-05 kl. 00.07.14.png
Skjermbilde 2022-03-05 kl. 00.07.14.png793×567 15.3 KB

2

Hi @Birkolini ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Hi,

My URL is https://www.pets-bestie.com/

No active password.

Thank you very much!

4

Hi @Birkolini ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
@media (max-width: 989px) {
    .section-template--14547787874441__1646431489faeac23a-padding .slider__slide {
        width: 25% !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
5

Thank you @AvadaCommerce

That was such a quick and helpful solution.

It seems that what you suggested worked perfectly.