Centering A Grid And Block On Page

Developers Frontend
1

I am trying to center a grid with 5 blocks, I have tried many different css, but I cannot figure it out.

I have used a User-defined CSS-class for the 16 width grid "shop-category-main-content-grid"

.shop-category-main-content-grid .span3{padding:10px; text-align:center;}
.span16 .shop-category-main-content-grid {margin:0 auto;}
I have tried many different ways, but I cannot center on page.

center-grid1.jpg

center-grid2.jpg

2

I am trying to center a grid with 5 blocks, I have tried many different css, but I cannot figure it out.

I have used a User-defined CSS-class for the 16 width grid "shop-category-main-content-grid"

.shop-category-main-content-grid .span3{padding:10px; text-align:center;}
.span16 .shop-category-main-content-grid {margin:0 auto;}
I have tried many different ways, but I cannot center on page.

Hi

your problem is that you a retrying to center all of them together. You have 16 columns and 5 grids. You can not divide it even.

So I would go with percentage width for each grid . For example each grid should have around 20% width, but take in consideration any margin. That's for Desktop. Then you need for tablet and phone different percentages.

So build grids with size 3 and then add this

.shop-category-main-content-grid .row-fluid .span3 {
    margin-left: 0 !important;
    width: 20%;
}

It will get the full width of the 16 grid without any space between. Go as you wish from there.

Fotis

3

Hi

your problem is that you a retrying to center all of them together. You have 16 columns and 5 grids. You can not divide it even.

So I would go with percentage width for each grid . For example each grid should have around 20% width, but take in consideration any margin. That's for Desktop. Then you need for tablet and phone different percentages.

So build grids with size 3 and then add this

.shop-category-main-content-grid .row-fluid .span3 {
    margin-left: 0 !important;
    width: 20%;
}

It will get the full width of the 16 grid without any space between. Go as you wish from there.

Fotis

Thank you! That solution worked out perfect.

4

Just in case someone needs this, for responsive I just added this:

@media (max-width: 767px){.shop-category-main-content-grid .row-fluid .span3{width:auto;padding-left:20px;padding-right:20px; text-align:center;}}
5

Just in case someone needs this, for responsive I just added this:

@media (max-width: 767px){.shop-category-main-content-grid .row-fluid .span3{width:auto;padding-left:20px;padding-right:20px; text-align:center;}}

Thank you for the feedback

Fotis