Center Classic EA Product grid?

Support
#1

Hi!
I added several product grids to the lower part of front page of: https://designedbydean.com/
How can I center these elements? I tried:

.eacs-product-carousel {
margin: 0 auto !important;
}

putting this css in the styles field:
margin-left:auto; margin-right:auto;

text-align:center;

I centered the section, row and colum but none of these worked.

Could you help me find the correct CSS?

#2

Hello Ariell,

Thanks for writing in!

Actually, the element is centered already.

The problem is that the product column width is only 30.6667 which will not give you 100% width. I would recommend that you add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.eacs-product-grid.eacs-col-3 ul.products > li {
    width: 33.3333%;
}

By the way, EA Product Carousel is a 3rd party extension. This issue might be a bug thus the creators of the plugin needs to know about this.

Regards.

#3

That worked however it only worked for that first section of products and it doesn´t go into single column for mobile anymore.

#4

Hi Ariell,

For those 4 columns, the CSS code would be

.eacs-product-grid.eacs-col-4 ul.products > li {
	    width: 25%;
}

Regretfully we can not provide further support for that 3rd party extension. Please contact the extension author for further queries.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.