CODEWITHSUNDEEP
cssalignmentcenteringcenter-align
Matthew Solomon
Matthew Solomon

Reputation: 111

Centering website content just isnt working?

i'm trying to center all of the products on this wordpress page so that everything is aligned centrally, i tried wrapping it all in a div with the following CSS but what this did was wrap the contents to the middle but the products are still left aligned to that.

#big-center {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: block-axis;
-moz-box-orient: block-axis;
box-orient: block-axis;

-webkit-box-align: center;
-moz-box-align: center;
box-align: center;

-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}

I wonder if anyone has any advise or if there is something i'm missing to do this?

here is a link to the page: http://www.stickems.co.uk/shop-screen-cleaners/

Upvotes: -2

Views: 94

Answers (2)

James
James

Reputation: 4590

Try if these style changes help you.

.woocommerce ul.products li.product{
  float:left; //Remove this
  display:inline-block; //Add this
  margin-right:3.3%; // changed from 3.8 to 3.3
}

.woocommerce ul.products{
  text-align:center; //add this
}

Upvotes: 0

iBrazilian2
iBrazilian2

Reputation: 2293

It's a bit difficult to understand what you really mean, but I took a crack at it; without being too clear because I think it looked just fine the way it was but here is what made it align to the center. Although It's not perfect coding but it will help you.

Go to line 1427 and change the current one with the following in your css; wp-content/themes/stickems/style.css?ver=1.0

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-bottom: 25px;
    margin-left: 38%;
    margin-right: 50%;
    width: 22.125%;
}

As I said, it will do the trick if this is what you mean but it's not perfect coding. From your question this is what I understood that you wanted; https://i.sstatic.net/jSrWD.png

Upvotes: 0

Related Questions