Solved

How to Reduce Image Size in Categories Section for Mobile View?

Esra47
Excursionist
51 0 6

Hi everyone,

I'm having an issue with the mobile view on my homepage in the categories section. The images are way too large and not user-friendly. How can I reduce their size specifically for the mobile version?

Thanks in advance!

 

Here the link https://tekaifaswg23rye9-71988969740.shopifypreview.com 

 

Bildschirmfoto 2024-05-21 um 13.54.09.pngBildschirmfoto 2024-05-21 um 13.54.23.png

Accepted Solution (1)
BSSCommerce-HDL
Shopify Expert
713 234 246

This is an accepted solution.

Hi @Esra47

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

@media (max-width: 749px) {
    .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        width: calc(52% - var(--grid-mobile-horizontal-spacing) - 3rem) !important;
    }
}

 

 Here is result: 

BSSTechVenture_0-1716295108041.png

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSSCommerce-HDL
Shopify Expert
713 234 246

Hi @Esra47

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

@media (max-width: 768px) {
   .collection .card__inner.gradient.ratio {
    --ratio-percent: 100% !important;
   }
}

Here is result: 

BSSTechVenture_0-1716293213762.png

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Esra47
Excursionist
51 0 6

I apologize if I’m being a bit demanding, but I want it look like this :

 

https://samarabags.com/  ( You can see on the mobile version the pictures are more smaller here )

BSSCommerce-HDL
Shopify Expert
713 234 246

This is an accepted solution.

Hi @Esra47

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

@media (max-width: 749px) {
    .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        width: calc(52% - var(--grid-mobile-horizontal-spacing) - 3rem) !important;
    }
}

 

 Here is result: 

BSSTechVenture_0-1716295108041.png

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Esra47
Excursionist
51 0 6

Thank you! It worked!