Big Cartel - Luna 2x2 Product Home Page

Question

I was trying to make my home page have a 2x2 grid of images. There was a thread with a similar question already. The answer was to include this code:

#home_page .canvas {
max-width: 590px;
}

I did this and it kicks my footer over to the left. I went into the CSS and tried under every footer mention I could find to include text-align: center; code although to no avail. I also tried playing with the 590px, but it moves the images over and no longer centers them.

Any help is appreciated.

Here is a link to my page: http://johnathonpowers.bigcartel.com/

Answer 1

Please remove the

float:left;

property from the

#site_footer footer {

}

CSS class and it should all work fine for you.

In essence, you #site_footer footer class should look like this:

#site_footer footer {
    width: 100%;
    min-width: 900px;
    clear: both;
    margin: 0 auto;
    padding-bottom: 0px;
    text-align: center;
}

You #site_footer footer class currently looks like this:

#site_footer footer {
    width: 100%;
    min-width: 900px;
    clear: both;
    float: left;
    margin: 65px auto 0px;
    padding-bottom: 10px;
    text-align: center;
}

What can be the reason to have both width and min-width properties (that too with wide differences in values). Keep one width property value (either width or min-width). Similarly, why float after clear? Understand that clear is used to remove any previous floats. If you want to continue floating, there's no reason to write clear: both

Hope this helps!!

EDIT: Please see the screenshots below!!!!

#site_footer footer

#site_footer footer 2

If you remove the float:left, your footer div will be centered. In case you can't do it, you can overwrite the float:left property in your CSS file as such:

#site_footer footer {
float:none !important;
}