Image Outline is Full Width

Support
#1

I have some custom CSS that I am using to give my images an outline.

/* Creates a special class for image outlines */
.custom-image-outline {
border: 1px solid #dddddd;
border-radius: 5px;
}

They look great normally. But when those images are linked, the border goes full width and spans the entire column, instead of just surrounding the image.

Any idea what’s wrong?

See examples here: http://nimb.ws/Pucs3L

See live page here: https://elementpaints.com/submit-review/

#2

Have you tried adding width: 250px;

You can change the 250px - this will define each block to have the same size

#3

I can’t define a width because that outline CSS is used on many different images with different widths.

Why does it change when a link is added? Shouldn’t it be the same?

#4

Not sure but I tried this and it seems to do the job

As far as I can see is you adding the border to the images…best to do the columns

.cs-ta-right {
text-align: right !important;
border: 1px solid grey;
padding: 20px !important;
}

#5

Sorry I’m not sure what you’re saying about the columns.

Changing cornerstone classes like you have suggested will have consequences for other areas of the site so it’s not the perfect solution.

Thanks for your help, but I might wait to hear what the official support team have to say about this one.

#6

Hi there,

The difference is because of the way the HTML code is layed out in those 2 cases.

First case without link: Wrapper DIV tag > Image

Second Case with link: Wrapper DIV tag > Anchor Tag > Image

To have it work on all cases you need to change the CSS code of yours to:

.custom-image-outline:not(.x-img-link),
.custom-image-outline.x-img-link img {
	border:  1px solid #dddddd;
	border-radius:  5px;
}

.cs-ta-right .custom-image-outline img {
	margin:  0;
	float: right;
}

.cs-ta-left .custom-image-outline img {
	margin:  0;
	float: left;
}

You can add the code to X > Launch > Options > CSS.

Hope it helps.