How can I reduce the distance between text and images on my webpage?

Store Design
, ,
1

Hello,

I am trying to find a way to restrict how much distance there is between the text and an image. Currently, my page looks like this:

jimlahren_0-1668551159701.png
jimlahren_0-1668551159701.png3570×1628 221 KB

I think the text is too far from the images, and it gets even farther apart when you increase the size of the window.

Here is the link to the page: https://www.tinahealthcare.com/pages/how-tina-helps-with-an-easier-way

Is this a setting done in the theme, or would this be a custom code addition?

2

Hi @jimlahren ,

Go to Assets > theme.css and paste this at the bottom of the file:

@media only screen and (min-width: 1025px) and (max-width: 1400px) {
  #shopify-section-template--16626108924135__27d90c29-933f-479c-86a1-ceeb83448440 .caption-content,
#shopify-section-template--16626108924135__92306fc3-a5f6-4495-aca2-7131797dcaa2 .caption-content {
      margin-left: 5% !important;
}
}
@media only screen and (min-width: 1401px) {
  #shopify-section-template--16626108924135__27d90c29-933f-479c-86a1-ceeb83448440 .caption-content,
#shopify-section-template--16626108924135__92306fc3-a5f6-4495-aca2-7131797dcaa2 .caption-content {
     margin-left: 25% !important;
  }
}

it will show like this:

Screenshot.png
Screenshot.png1870×563 68.1 KB

3

Hi @jimlahren

You can find these classes in the style.css file and edit the width of that class as you like. The initial default of the theme is set to 40%.

view (36).png
view (36).png1286×611 78.4 KB

I hope that this is useful to you. Please let me know if you need any further help.

4

Hi @jimlahren ,

This is PageFly - Free Landing Page Builder.

You can add this code at the very bottom of your CSS file

.caption.text-align-left.align-middle {

display: flex;

justify-content: space-around;

}

Hope this can help you solve the issue.

Best regards,

PageFly

5

Didn’t work in the crave theme.