Resize Image in Image with Text - Center & Remove Padding.

[Danceddiction]

I am trying to resize an image in Dawn theme for Image with Text Section.

I can resize it just fine, but then it pulls it off center and creates a huge padding between the image and the text section. See below.

I’m resizing the image the following way in base.css and doing it only for mobile screens

#shopify-section-template--18442698719487__image_with_text_nQxqbR img {
    width: 300px;
    height: auto;
  }

How can I keep the image centered and remove the padding below it?

website: www.danceddiction.com/pages/about-us
password: testword

[namphan]

Hi @Danceddiction ,

Please change code:

#shopify-section-template--18442698719487__image_with_text_nQxqbR img {
    width: 300px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
}

[Dan-From-Ryviu]

Please update your code to this

#shopify-section-template--18442698719487__image_with_text_nQxqbR img {
    width: 300px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
}
#shopify-section-template--18442698719487__image_with_text_nQxqbR .image-with-text__media { 
    padding-bottom: 69% !important; 
}

[BSSCommerce-B2B]

Hi @Danceddiction ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media (max-width: 748px) {
    #shopify-section-template--18442698719487__image_with_text_nQxqbR img {
        width: 300px;
        height: auto;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
   .image-with-text__text.rte.body {
         margin-top: -40px !important;
    }
}

Step 3: Save and reload home page.

=>> The result:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[Tech_Coding]

Hello @Danceddiction

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 screen and (max-width: 767px) { #shopify-section-template--18442698719487__image_with_text_nQxqbR img { width: 303px; height: auto; left: 50% !important; transform: translateX(-50%) !important; } #shopify-section-template--18442698719487__image_with_text_nQxqbR .image-with-text__media { padding-bottom: 69% !important; } }

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

[Danceddiction]

This worked perfectly thank you!