Centering website content just isnt working?

Question

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/

Usually this is done by `display: block; margin: auto;` - but the whole `div` is already centred on your site. See at the top where it's 5 wide. If you centre the outside `div`, it doesn't mean every row inside it independently centres. — OJFord, Apr 03 '14 at 17:20
Also, from a UX standpoint, and purely in my opinion: it looks better right now than if anything was centred. — OJFord, Apr 03 '14 at 17:21
Do not use tinyURL's or link redirection services. Please simply post the actual clickable URL or don't. — Sparky, Apr 03 '14 at 17:37

score 0 · Answer 1 · answered Apr 03 '14 at 17:17

0

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.stack.imgur.com/jSrWD.png

answered Apr 03 '14 at 17:17

iBrazilian2

2,204
6
23
45

Hi @iBrazilian2 unfortunately whilst this center's everything (which is perfect) it drops each product onto a new line, instead of keeping the row formatting at present? – Matthew Solomon Apr 03 '14 at 19:38
So overall, all you want to do is center the all the first

iBrazilian2

Apr 03 '14 at 23:32

Exactly :) if it's any help i made a mock up of what the page look im trying to achieve is :) http://i.imgur.com/DyUMQzB.jpg – Matthew Solomon Apr 04 '14 at 13:19

Hi @iBrazilian2 did my screenshot help at all – Matthew Solomon Apr 07 '14 at 16:56

I forgot to check stackoverflow, my apologies. The only way that I could do it was by editing each box with the one that you wanted to be centered with specific width and padding, this is not a very awesome way of doing things but if you don't plan on changing it very often it will work just fine. http://i.imgur.com/eVPSdVB.png look at the html with the style, that is what i added to the ul and li, you'd have to add the same thing to the boxes where you'd want to be centered as well. – iBrazilian2 Apr 08 '14 at 03:16

score 0 · Answer 2 · answered Apr 03 '14 at 17:33

0

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
}

answered Apr 03 '14 at 17:33

James

4,540
1
18
34

hello, thank you for trying to help answer this :) i added the above css to my site, but it didnt have much luck. i then removed the fload line, still no luck – Matthew Solomon Apr 03 '14 at 19:40
@MatthewSolomon can you check that these styles are not overridden by other styles in you css – James Apr 04 '14 at 08:57
i just tried this again applying !important; to each line, and removing the float this is the outcome: http://i.imgur.com/ErD9idc.jpg - if it's any help i made a mock up of what the page look im trying to achieve is :) http://i.imgur.com/DyUMQzB.jpg – Matthew Solomon Apr 04 '14 at 13:18
The first image shows when you remove float. Then when u apply display:inline-block to the same element, the products will be shown 4 in a row. Can you try one more time. Copy my code and add it to the bottom of your style sheet, doesn't have to add important. Also change the `float` to `none`. Please let me know if it works. – James Apr 04 '14 at 14:36
Hello @james okay, so i copied the code as is, and then adjusted float to none. This resulted in the products being single file and not centered? :X sorry! does that make any sense at all ? :) – Matthew Solomon Apr 05 '14 at 18:58

Centering website content just isnt working?

2 Answers2