Remove padding around text block of Image with Text section - Refresh Theme

Store Design
,
1

Hello Shopify Community,

I am creating the about me page for my website using the image-with-text section - see image attached / below:

About me
About me1328×568 72.1 KB

I would like to remove the padding-top from the image and the text block. Any ideas on CSS code to add in custom CSS editor?

I added the below code which stops the image from resizing which is great but the text is now not in line with the image and on a mobile screen, there is a big space between the image and the text.

@media (max-width: 768px) {
.image-with-text__media–small {
height: fit-content;
}
img {
overflow: visible;
height: fit-content;
padding-top: 0;
width: 100%;
position: relative;
}
}
@media (min-width: 768px) {
img {
overflow: visible;
height: inherit;
padding-top: 5px;
width: 100%;
position: relative;
}
}

Thanks for your help.

2

Hello @motolanix1 ,

I hope you are doing well!

Can you please share the store URL so that I can check it and provide you the CSS which will fix the gap?

3

Hi there and good day.

Please see link to URL (“ About – Little Miss Beads “)

The padding between image and text on a mobile view is fine as I have sorted that.

Where I need help is to:

  1. Remove any passing on top of the text “Hello and Welcome to…” in the text block of the image-with-text section

  2. Reduce the padding / spacing in the middle, in between the image and the text blow

4

Try this:

@media (min-width:750px){
  .image-with-text__content {
      padding: 0 2rem 2rem;
  }
}

.image-with-text__media img{
    padding-top: 0 !important; /* try without !important first */
    width: 100%;
    height: auto;
}

Screenshot 2025-09-23 at 1.48.43 AM
Screenshot 2025-09-23 at 1.48.43 AM1458×636 163 KB

5

Please copy and paste the below code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css

Alternatively, if the code didn’t work, copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

@media screen and (min-width: 750px) {

div#ImageWithText–template–26417336811865__image_with_text_dgCJHw {

padding-top: 0 !important;

}

.section-template–26417336811865__main-padding {
padding-top: 25px;
padding-bottom: 0px !important;
}

}

This will change only for Desktop

image
image1902×656 179 KB

6

Hi @motolanix1

Try this clean CSS:

/* Remove extra padding from image-with-text section */
.section-image-with-text {
  padding-top: 0 !important;
}

/* Align image and text block nicely */
.image-with-text__content,
.image-with-text__media {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .image-with-text {
    padding-top: 0 !important;
  }
  .image-with-text__content,
  .image-with-text__media {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}
7

Thanks for your help on this. This code worked.

8

Thanks for your help on this.

9

Thanks for your help regarding this issue.

10

Hi @motolanix1

Thank you for getting back to me. I’m happy to hear that it worked for you. Should you need any further help, please don’t hesitate to reach out. If you found the post helpful, kindly consider giving it a like.

11

Hi Devcoders, I have another issue. Can you help please? See details on my below post: