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

[Esra47]

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 

[BSSCommerce-HDL]

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: 

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 😍

[Esra47]

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 · 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: 

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 😍

[Esra47]

Thank you! It worked!