Essential Grid Extension CSS for circle grid

[ancorakim]

Hello, I’m trying to create an Essential Grid that displays skins as circles, not squares. I found some custom css on the themepunch website for this, but it is not working for me (grid displays as squares still, not circles): https://www.themepunch.com/faq/create-circled-grid-items/

This is what I need it to look like:

Thanks for the help!

[Prasant]

Hello @ancorakim,

Thanks for asking.

If following Themepunch documentation didn’t resulted in a desired output, have you tried clearing browser and server cache? I suggest you to clear cache and try loading website again. In case you still face issues can you please share website URL for us to take a closer look?

Thanks.

[ancorakim]

I tried clearing my browser history/cache and reloading, but it didn’t work. Here is a link to the site page with the grid: http://gosignet.saucebuild.com/

[christian]

Try adding this code in Appearance > Theme Options > CSS

.esg-entry-media-wrapper {
	border-radius: 100em;
}

Hope that helps.

[ancorakim]

Thank you, that did work as far as changing the overall shape fo the background image. However, when I mouse over the circles, the magenta hover color is still a square shape. Is there a way to make that a circle as well?

Thanks

[Joao]

Hi There,

Please update the code provided by Christian to :

.eg-company-stores-microsites-container, .esg-entry-media-wrapper {
	border-radius: 100em;
}

Hope it helps!

[ancorakim]

That did work but I have used other essential grids on this site and all of them have been effected (they are circles and not squares). Is there a way to only have that one grid item skin be affected? Here is another page with a separate grid on it for an example of what it is doing:
http://gosignet.saucebuild.com/the-mark/

[paul.r]

Hi,

You can add a unique id to your grid.

Then change your css code to this.

#my-grid .eg-company-stores-microsites-container, .esg-entry-media-wrapper {
	border-radius: 100em;
}

Hope that helps.

[ancorakim]

Unfortunately it is not working. I gave the home grid a CSS ID and applied it to the code in the editor, but it is still showing up on the other pages/grids. Here is a screenshot of the css I added if that helps:

[Joao]

Hi There,

You also need to add #home-grid after the , on the firdt line of each CSS command

So you would change :

#home-grid .eg-company-stores-microsites-container, .esg-entry-media-wrapper {
	border-radius: 100em;
}

to

#home-grid .eg-company-stores-microsites-container,#home-grid .esg-entry-media-wrapper {
	border-radius: 100em;
}

Another alternative, would be to add the CSS lines to the specific page Cornerstone> CSS section instead of Theme Options.

Hope it helps

[ancorakim]

That fixed it! Thank you guys for all your help.

[rad]

You’re most welcome!