How can I make my homepage block image responsive on mobile?

Store Design
1

Hello !

On my homepage, i have an horizontal block image (collection). And i want it to be responsive on mobile. What CSS do i need please ?

Click here if you want to check my Website.

Look the image below :

Mobile
Mobile460×825 246 KB

PC
PC1416×286 348 KB

2

hello @Re4lityShaper

please Go to Online Store->Theme->Edit code then go to assets/style.css ->paste below code at the bottom of the file.

@media screen and (max-width: 768px) {
   #shopify-section-16307715021e5bf89e .flex .flex__item  .link-block-no-shadow{
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 122px;
    padding: 0 !important;
    }
 }
2 Likes
3

Thanks you a lot for the quick answear @Kinjaldavra ! I accepted the solution but i still wonder if there a possibility to make it more visible (readable) on mobile ?

4

It looks better but there is a padding under the block now (too much white space), how can i reduce it ?