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 · Accepted solution]

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; 
}

[Danceddiction]

This worked perfectly thank you!

[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 </body> on theme.liquid
<style>
@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;
    }
}
</style>

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