Essential Grid Border Radius

[guybower1]

Hi

I have been trying to add a border radius to an Essential Grid and failing. I have looked at various threads and thought I had input the correct code, but am getting nowhere.

The code I am using is the following:-

#esg-grid-42-2 .mainul li.eg-hayes-wrapper .esg-entry-media-wrapper { border-radius: 15px; }

The grid ID is 42 and the skin is Hayes, thus hayes as the wrapper

Just so you know, what I am trying to achieve is to have just the outer 4 corners of the grid display a border radius, not each image. This code effects each image instead

Is there something I am doing wrong here, as this was copied directly from another thread on the same subject?

URL and login to follow

Regards

[thai]

Hi There,

Please update your custom CSS to this:

div#esg-grid-42-2 .esg-overflowtrick {border-radius: 15px;}

[guybower1]

Hi Thai

Thanks so much for your reply.

Yes, that is absolutely perfect. I had tried so many different things. I had even put the whole thing inside a div and tried to style that.

How does one successfully find exactly which text to target? I can see .esg-overflowtrick there and had tried pretty much everything above that line, all of which appeared to be the code to use. I tried .esg-container-fullscreen-forcer, .esg-grid, .esg-layout-even and .esg-container. I even tried .eg-essential-preview-wrapper.

Just two quick questions on it, if I may. The first one is, why did it need to have div in front of it when the grid shortcode is not wrapped in a div?

Last one is just what I asked above • how does one successfully target which level of code to target; does that just come from experience, or is it trial and error? I ask as I literally spent some 3 or 4 hours on this and had tried pretty much every line of code I could find; obviously except the one you supplied.

I read some of the W3 stuff, but that really did not help a great deal.

Thanks so much for helping, though

[rad]

Hi there,

You will have to click and start with the inner elements and going up per parent element. Then the element that covers all items is your target (since your objective is not per item/image but as a whole). Hence, it depends on your objective and there is no specific procedure for getting selectors but trial and error. And sometimes, you will need a combination of CSS to achieve it, like clipping (overflow:hidden) and luckily that esg-overflow trick has it already, which is why it works.

What do you mean by div? If you’re referring the one in your screenshot then it’s a wrapper. It’s to contain to prevent overflowing and to make its inner elements respond to it, like a grouping.

And it’s both, experience and trial and error. It’s not just the target element that you have to worry, but other existing CSS that will make your CSS non-functional so you have to find another way or target to achieve the same thing, or simply override that existing CSS.

Thanks!

[guybower1]

hi Rad

Thanks so much for your reply.

Yes, I know what you mean. I wasn’t being lazy on this one. I had honestly tried numerous elements to try and achieve the result, but to no avail.

As you say, it will require perhaps some more experience as well as trial and error. Perhaps I just experiment and see what results come. That way I can see exactly which elements control which

Thanks again

cheers

[christian]

You’re welcome.