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
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 
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 )
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
Thank you! It worked!
