Adding padding to blog posts without editing the shopify theme

Store Design
1

Hi everyone!

I’m currently trying to test a newer blog layout for our website, but I’m running into a few issues. I wanted to have a simple layout where the text could be placed to the left or right of an image. The code snippet I’m using for that is:

The problem I’m running into is that the image and the text have no padding in between them, as you can see here:

Screenshot 2022-06-15 132111.png
Screenshot 2022-06-15 132111.png169×363 53.2 KB

I have tried using padding-right and padding-left. While it does solve the issue when running the code elsewhere, it will not put the padding in place when I put the code back into Shopify’s blog html editor.

I do not have permission to edit our web site’s theme and I do not want to go into the code to have it edited as it was custom built for our site. Is there any other way that I can get padding between the text and the images via the html text editor for the blogs?

2

You want to have responsive images for mobile and should be able to embed CSS in your HTML to accomplish this with something like:


![Image Description|267x472](upload://olW7O45CrzOmowJQ0aOtanGNk4P.jpeg)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget lorem turpis. Donec ornare dolor ante, vel fringilla metus facilisis eu. Nullam vel finibus urna, ac convallis turpis. Integer laoreet dui ac sem fringilla suscipit. Phasellus eget diam elit. Maecenas in consectetur sem. Duis quis lacus rutrum, tincidunt metus sit amet, porttitor odio. Nunc et dictum diam. Aliquam maximus nunc a purus tempor vehicula. Quisque vulputate quam in massa finibus, eget tempus est sodales. In vitae fringilla ipsum, et tincidunt nulla. Suspendisse justo sapien, dignissim ac cursus at, ultricies nec tortor. In tincidunt lectus id porta semper.


#container .img-responsive {
  width: 100%;
  height: auto;
}
@media (min-width: 600px)
{
  #container .img-responsive {
    width: 250px;
    height: auto;
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
  }
}

CODE PEN:
https://codepen.io/p1commerce/pen/yLvwLva