Lists crashing into right-aligned images

[tatami]

I'm wondering if anyone could help me out with a small css issue I am having. I am finding that if I have an unordered list to the left of an image that's aligned right, then when the web page is at certain widths the text flows right up to the edge of the image. I'd really like there to be a small margin. Any advice and suggestions would be much appreciated.

https://www.aenigma-images.com/2018/12/for-deletion/

[Victor Font]

Add a class to the ul element and then add margin to the class.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[tatami]

Thank you for your advice, Victor. Unfortunately, I’m struggling a bit to put it into practice. Here’s what I’ve done.

I use a plugin called Add Custom CSS to keep my modifications safely away from the original style sheet. Into Add Custom CSS I’ve inserted and saved the following code:

ul.imageright {
margin-right: 20px;
}

Then, on the edit page I’ve tried two things (FYI I’m using WordPress 5).

First, using the visual editor, I’ve added to the Additional CSS Class the code:

<ul class="imageright">

Second, using the code editor, I’ve begun the ul block with the code <ul class="imageright”> so the code for the block now reads:

<!-- wp:list {"className":"imageright"} -->
<ul class="imageright">

[tatami]

Unfortunately my reply seems to be invisible but the forum software won't let me repost it. I will try again after this.

[tatami]

Victor, your advice is much appreciated. However, as a relative novice, I’m struggling to put it into practice. Here’s what I’ve done.

I use a plugin called Add Custom CSS to keep my modifications safely away from the original style sheet. Into Add Custom CSS I’ve inserted and saved the following code:

ul.imageright {
margin-right: 20px;
}

Then, on the edit page I’ve tried two things (FYI I’m using WordPress 5).

First, using the visual editor, I’ve added to the Additional CSS Class the code:

<ul class="imageright">

Second, using the code editor, I’ve begun the ul block with the code <ul class="imageright”> so the code for the block now reads:

<!-- wp:list {"className":"imageright"} -->
<ul class="imageright">

The following year, Gene Tierney is nominated for an Oscar for her performance in Leave Her to Heaven (1945).

In spite of this, her Hollywood career is dogged by poor reviews, with critics seemingly resentful of her privileged background and striking looks – as if those advantages preclude or negate talent, determination and persistence.

Suffice it to say that her performance in Leave Her to Heaven will lead Martin Scorsese to observe that, “Gene Tierney is one of the most underrated actresses of the Golden Era.”

<!-- /wp:list —>

None of the above is having any effect.

Can you tell me what I’m doing wrong? Also, because the website is responsive, sometimes a ul block will find itself opposite an image (eg on a computer screen) and sometimes it won’t (eg on an iPad). Will the new class adapt accordingly?

[Victor Font]

I don't see the class in your code.

It's not possible to say what you're doing wrong from just looking at the front end.

The new class will only adapt to the CSS you place in it.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[tatami]

Disappointed to hear that my code is unclassy!

Having done some googling, I thought that the class would be established by this:

ul.imageright {
margin-right: 20px;
}

Clearly not. I think I need some instruction. Can you point me to a resource that would enable me to set things up as I want?

I really appreciate the time you're taking out to help me hear. Thank you.

[Victor Font]

Like I said, I can't help you further. The class may be in your style sheet but it's not in the ul element in your HTML. You're doing something wrong in the editor. I can only see the result on the front end. I can't help help with what you may be doing in the admin area.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[tatami]

Okay, well thank you again, Victor, for taking time out to help me.

[Author]

Posts