Image with text too big on mobile

Store Design
, , ,
1

Hi, I would like to make this product image half the size and make the text beneath it follow on mobile. Any idea how I do that? https://www.spermidin.dk/

2

Hi @DaCharmander

You can acive this by adding this CSS code:
You just need to follow these steps:

  1. Go to the Online Store
  2. Edit Code
  3. Find theme.css / base.css

And past that CSS Code:

@media(max-width:766px){
    .image-with-text .image-with-text__media-item .image-with-text__media {
        padding: 0 !important;
        width: 100%;
        height: 350px;
    }
    
    .image-with-text .image-with-text__media-item .image-with-text__media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: unset !important;
    }
}

The result will be :

Mehran_Ali_0-1732709870375.png
Mehran_Ali_0-1732709870375.png590×788 88.9 KB

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going

3

Hello @DaCharmander

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media (max-width: 768px) { #shopify-section-template--23498371498248__image_with_text_gyc8WX img[src*="Pills_Bottle_Mockup_beige"] { transform: scale(1) !important; } }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.