Reducing product image size for few pages not all

Site URL: https://www.frillup.ch/shop

I want to reduce the size of product photos for mobile for several pages. I tried using this code but it won't work. I do not understand why.

The page i'd like to reduce size are:

https://www.frillup.ch/shop

https://www.frillup.ch/pure-pashmina

https://www.frillup.ch/pashmina-with-silk

https://www.frillup.ch/pashmina-with-bamboo

https://www.frillup.ch/yakwool-with-bamboo

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-id, #collection-id , #collection-id  
.sqs-block-image {
  width: 70%;
  margin: 0 auto;
}
}
/* Insert Code for Mobile Above This Line */
}

Hi. You want to reduce image size or change to 2 items/row on mobile?

1 hour ago, tuanphan said:

Hi. You want to reduce image size or change to 2 items/row on mobile?

I want to have two items/ row on mobile and tab

On 4/29/2021 at 8:46 PM, Aashini said:

I want to have two items/ row on mobile and tab

Add to Design > Custom CSS

/* Product 2 columns mobile */
@media screen and (max-width:767px) {
	.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

Also, the site has some small problems. Do you want to fix these?

Site URL – https://www.frillup.ch/

1. (Mobile-Footer) Language overlap search.

2. (Mobile-Footer) Reduce space between Shop – Privacy Policy

3. (Tablet-Footer) Change search icon to white color?

4. (Tablet-Our Story) Increase text wdith?

5. (Mobile-Shop) Change to 2 items/row?

6. (Mobile-Products) Add breadcrumb on top of product?

7. (Mobile-Products) The arrows are small. Want to increase size or add darker background?

8. (Mobile-Products) Change related products to 2 items/row?

On 4/30/2021 at 5:32 PM, tuanphan said:

Also, the site has some small problems. Do you want to fix these?

Site URL – https://www.frillup.ch/

1. (Mobile-Footer) Language overlap search.

2. (Mobile-Footer) Reduce space between Shop – Privacy Policy

3. (Tablet-Footer) Change search icon to white color?

4. (Tablet-Our Story) Increase text wdith?

5. (Mobile-Shop) Change to 2 items/row?

6. (Mobile-Products) Add breadcrumb on top of product?

7. (Mobile-Products) The arrows are small. Want to increase size or add darker background?

8. (Mobile-Products) Change related products to 2 items/row?

• First of all thank you for spotting these errors. And secondly, I would very much want to change it.
• The code for 2 products in a row worked. I have created several pages using tag filters so that visitors can visit these pages instead of going through all the products. This code for 2 products in a row didn't apply in these pages. Or,

• Is there any way that I can create a filter/sort option in the shop to filter the products according to their types (tags) or price ? I have attached example of Amazon. I don't like the way shop page looks both on mobile or desktop version 
• 

On 5/2/2021 at 5:06 PM, Aashini said:

• First of all thank you for spotting these errors. And secondly, I would very much want to change it.
• The code for 2 products in a row worked. I have created several pages using tag filters so that visitors can visit these pages instead of going through all the products. This code for 2 products in a row didn't apply in these pages. Or,

• Is there any way that I can create a filter/sort option in the shop to filter the products according to their types (tags) or price ? I have attached example of Amazon. I don't like the way shop page looks both on mobile or desktop version
•  

Can you share link to page where the code didn't work?

To create more filter, you can consider Filter Plugin.

On 5/4/2021 at 12:59 AM, tuanphan said:

Can you share link to page where the code didn't work?

To create more filter, you can consider Filter Plugin.

These are the 4 pages where link doesn't work

https://www.frillup.ch/pure-pashmina

https://www.frillup.ch/pashmina-with-silk

https://www.frillup.ch/pashmina-with-bamboo

https://www.frillup.ch/yakwool-with-bamboo