[Resolved] Image Border on All Pics – Need To Remove From Map

[Mary Pearson]

I’ve added CSS to put a border around all images on my website. Unfortunately it is also putting borders across my map. How do I leave the borders for the whole site but not the map on the home page?

Thank you.

[Leo]

Hi there,

Have you figured this out?

I don’t see a border on the home page map:
https://www.screencast.com/t/oK8ekxljd

[Mary Pearson]

No, I haven’t. It is all the boxes on the map. When I remove the CSS for image borders, the boxes on the map (and map marker) disappear.

I just noticed that there are borders also on the arrows of my slider. Perhaps my CSS for image borders needs to be more specific.

[Leo]

What if you give the images a special class and just target your CSS to that specific class?
https://www.w3schools.com/html/html_classes.asp

[Mary Pearson]

Thank you Leo. I created a class of

.borders {
border: 5px solid #273d6e !important;
box-shadow: border-box; }

On the page I put

<h2 style="text-align: center;">MAPLE GROVE SYRUP</h2>
<span class="borders"><img class="alignleft size-full wp-image-104" src="my-site/wp-content/uploads/2019/11/family-2.jpg" alt="" width="546" height="417" /></span><strong>Hosts:</strong> 

but it doesn’t work. It puts the border in front of “Hosts”.

How do I do this correctly please.

[Leo]

Try adding your class in the img tag along with alignleft size-full wp-image-104.

Or you can use Gutenberg image block and add it as a custom class in the sidebar options.

I would also recommend going through a free class like this:
https://www.codecademy.com/catalog/language/html-css

[Mary Pearson]

Perfect! Many thanks Leo!!!

[Leo]

No problem 🙂

[Author]

Posts