How can I reduce image text padding on both desktop and mobile?

[irtazaghouri]

Hi, I’d like to reduce the amount of padding in my image with text for both desktop and mobile. Here’s some screen shots to refer too

Store: https://innovativedecorators.myshopify.com/products/test-product

[ThePrimeWeb]

Hey @irtazaghouri ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

[Made4uo-Ribe]

Hi @irtazaghouri

check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.image-with-text__media.image-with-text__media--adapt {
    padding-bottom: 0px !important;   
}

.image-with-text__media-item.grid__item {
    align-self: center;
}

And save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Anshul_arora]

Hello @irtazaghouri ,

I understand you are looking to remove unnecessary space between image and ‘Maximize your living…’ text.

You can fix this issue by using the below mentioned CSS code.

Add the code at the bottom of the theme.liquid file before tag and save.

Output -:

I hope the code helps you.

Please share if you have any queries.

Thank you.

[irtazaghouri]

Thank you @ThePrimeWeb , It worked well, one more issue now I’m facing is space below each image with text section. Screenshot below:

Also tell me how i can add borders to each section, So i can separate each section.

[ThePrimeWeb]

Hey @irtazaghouri ,

Leave the previous code as it is and add on this as well.

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

[irtazaghouri]

@ThePrimeWeb It worked. Thank you for your help

Could you please tell me one more thing, how can i add border around image with text section like the image below:

[ThePrimeWeb]

Hey @irtazaghouri ,

Follow the same instructions above and add on this code as well.

[irtazaghouri]

@ThePrimeWeb Thank you so much for your help; it made a big difference!