[Support request] Prevent dotted underline links on images…

[David]

Hi all,

Here is a snippet of css form my child style.css

How can I prevent this dotted line from showing up below linked images? I would prefer there be no indication it’s clickable (other than the standard mouse hover which changes the cursor)

Thanks for any help. 🙂

/*
Dotted Underline Links Custom Class
*/
.entry-content a, .entry-content a:visited, .entry-content a:active {
text-decoration: none;
color: #0099ff;
border-bottom: 1px dotted;
}
.entry-content a:hover {
text-decoration: none;
color: #474747;
border-bottom: 1px dotted;
}

[Tom]

You can give the link surrounding an image a class like this: no-link-border

<a href="#" class="no-link-border"><img src="..." /></a>

Then you can add this CSS:

.entry-content a.no-link-border {
    border: 0;
}

[David]

Hey tom,

is there anyway to do it for all images without a class considering I’d never want it to occur?

I only ask because some images are from amazon.

[Tom]

Unfortunately you can’t target an element depending on what’s inside of it (without javascript).

For links to Amazon, you could try this:

.entry-content a[href*="amazon.com"] {

}

[David]

Ahh I see. I’ll give that a shot.

Would you by chance have any idea why Gutenberg would show an image centered in the editor but still align left when published?

I did some searching and all I could find was that it was a known issue that has since been resolved – or that it was a conflict with theme (which I find hard to believe)?

Just figured I’d see if you’ve heard/ran across that before.

Thanks Tom!

[David]

Just an update to my first question and my followup question:

The problem is the Gutenberg image block. For both the underline issue and the non-centering issue. If I create a custom editor block and add the HTML for the image from Amazon, I can then center it and when previewed it shows centered without the line beneath it.

Weird. I have no idea why it occurs with the image block but that was the problem for anyone else that may experience it in future.

Thanks again Tom. 🙂

[Tom]

No problem! Thanks for letting us know 🙂

[David]

Hi again Tom,

Since updating Gutenberg and GP, I still have this problem.

Interestingly enough, if I align-left in the image block it shows left when I preview. If I align-center and preview it still shows to the left. But if I align-right and preview, it is to the right! It’s only the center that won’t change when previewed or published.

Do you have other insight as to why this is occuring? I’d much rather use the image block then the classic block… so much more convenient.

[Tom]

Can you write out some step by step instructions so I can try to reproduce the issue?

Let me know 🙂

[David]

Hi Tom,

I just add a new image block, add the image, center it (which shows centered in gutenberg editor) and then preview (or publish) and it still shows aligned to the left…

**NOTE: I added a link to the original post so you could see an image that shows to the left but when you view the source it shows “aligncenter is-resized”.

[David]

Hi there,

Elementor is adding this CSS which is stripping out the left / right margins used to center the block:

.elementor .elementor-widget:not(.elementor-widget-text-editor) figure {
    margin: 0;
}

I would raise this with Elementor as to why they are doing it this way. In the meantime you can get all !important and add this CSS:

.wp-block-image .aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
}

[David]

Oh my gosh! David, thank you! I have been dealing with this for weeks, pulling my hair out and relying on the classic editor block just to center my images.

I really, really appreciate you helping me get to the bottom of this! That CSS worked great!

I will be emailing Elementor customer support to bring this to their attention right now.

Thank you again!

David

[David]

You’re welcome. Glad we could be of help.

[Author]

Posts