need image styling help

Hey @todindiana,
Replace the figure tag styling with the below CSS code at line no. 1 of the “style.css” file (Path: wp-content/themes/responsive/core/css/style.min.css).

figure{
margin: 1em 0;
display: flex;
flex-direction: column;
}

This should solve the issue.

My CSS was slightly more complex, but it does center the text. Good luck

figure {
display: inline-block;
margin: 15px; /* adjust as needed */
}
figure img {
vertical-align: top;

}
figcaption {
text-align: center;
color: black;
font-style: italic;
text-align: center;
display: block;
vertical align: left;
}

@johannsf @prabhatrai Thank you both for responding.

I’ve spent several hours experimenting with these solutions. I’ve made progress but there are still some problem areas.

There is a new public page (I don’t know how to edit the original post’s link) where you can see the best results that I have come up with.

The final hurdle is the placement of the caption – it butts up against the bottom of the border, and the text below doesn’t flow around to the right of the image.

I’ve added the css by accessing my Dashboard, selecting Appearance > Customize > Additional CSS. This is what’s in that text area:

figcaption {
  text-align: left;
  color: #910000;
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
  display: block;
  vertical-align: left; 
}
figure {
    display: inline-block;
    margin: 2px; /* adjust as needed */
}
figure img {
    vertical-align: top;
	  align-content: left;
 
}

Also, I add the following inline when I’m composing my post in an iOS app called iAwriter, which adds the border around the image. I can’t add that code to the theme as it will add borders around all images, which is undesirable.

<figure>
<img src="tahoe.jpeg" alt="Lake Tahoe"  img style: width="200px" class: align="left" style="margin: -.5em .5em -0.5em; padding: .5em .5em .5em .5em; border: solid #910000;" />
<figcaption>Lake Tahoe</figcaption>
</figure>

Thank you.

Tod

PS: How do I add an image to a post in this forum?

Tod

Hi Tod
It’s looking good! You can add a little space below by changing the padding like this:

element.style {
margin: -.5em .5em -0.5em;
padding: .5em .5em 1em .5em;
border: solid #910000;

To save a picture, visit this site and follow the instructions.
https://snipboard.io

@johannsf Thanks for checking and for your quick answer.

I have one question: I just added it to the custom css in customize but it didn’t alter anything. Where should I add this? The border code is inline in the text editor:

<figure>
<img src="tahoe.jpeg" alt="Lake Tahoe"  img style: width="200px" class: align="left" style="margin: -.5em .5em -0.5em; padding: .5em .5em .5em .5em; border: solid #910000;" />
<figcaption>Lake Tahoe</figcaption>
</figure>

When I edit it to look like this, I get a display of code instead of the image:

<figure>
<img src="tahoe.jpeg" alt="Lake Tahoe" style: width="200px" class: align="left" element.style="margin: -.5em .5em -0.5em; padding: .5em .5em .5em .5em; border: solid #910000;" />
<figcaption>Lake Tahoe</figcaption>
</figure>

?????♂??????♂?

PS: Are you in The City or Suomi?

Change the margin in that same block: style=”margin: -.5em .5em -0.5em;— Lose the -0.

The second block of code has some extra words – img and element

I’m in San Francisco.

I feel like a dunce. That was staring me right in the face all the time. Somehow that minus sign crept in, and, of course, that third variable refers to the bottom of the image (T R B L, or “trouble” are the four variables).

I do thank you for being patient. I’ve learned a bunch tonight.

===
I asked because SF could refer to The City (I’m originally from Palo Alto), or Finland (Suomi-Finland, or SF).

Stay safe and healthy, my friend.

oh-oh. Now text doesn’t flow around the image. I’ve tried various tweaks but nothing seems to help. Even cleared the cache several times. Here is latest link.

Tod

Hey @todindiana,
If you want the caption to get closer to the image then replace the margins applied on the image with the below code:
margin: -.5em .5em 0em -.1em;

@prabhatrai Thanks for writing. The problem is not the margin but that the text doesn’t flow around the right side of the image. I have gone into the classic visual editor, selected the image, and clicked the icon that shows the image to the left with text on the right. Here is the code copied from the text editor:

<figure><img class="alignleft" style="margin: -.5em .5em .5em -.1em; padding: .5em .5em .5em .5em; border: solid #910000;" src="https://scruffydog.org/wp-content/uploads/2020/11/beer.jpeg" alt="Beer Sign" width="200px" />
<figcaption>Beer Sign</figcaption>
</figure>

You can see that the first statement is “alignleft”. That is supposed to force text into the empty space on the right of the image.

Everything else works great: border, colors, caption placement, etc. There’s something that I’m not seeing.

Thanks for any advice!

Tod

@todindiana,
In your case, <figure> tag is the parent tag of <img /> as well as the <figcaption> tags.
Now, if the width of the parent tag is not enough, then the bottom data will not flow on the right side.
Hence, add width: 100%; to <figure> tag styling, and this should solve the issue.

• This reply was modified 4 years ago by Prabhat.