One widget area for footer instead of 3? [wordpress]

0
votes

I have a WooCommerce shop setup with the theme Retailer. The theme is currently setup to have 3 footer widget placeholders by using grids to allow 3 widgets to be placed. What I essentially want is to be just one widget with 1 grid that takes the width of the whole page/main container.

I have tried this and had success:

Footer Widget CSS

.container_12 .grid_4 { //Expands widget to width of container
    width: 100%;
}

However when I did this, my shop sidebar menu to the left disappears. When I remove that CSS, footer goes back to the way is now and sidebar appears.

Refer to this page to see what I mean: http://museiam.ca/product-category/men/

Currently I took out the CSS code for the widget which is why the shop menu is displaying. But notice how the footer menu is messed up. Essentially, I want it to be centered all in one line in the center like so:

http://tinypic.com/r/jrv9mq/8

Here is the CSS for the grid that hold the sidebar:

Shop Sidebar CSS

.container_12 .pull_9 {
left: -820px !important;
}

Any input is greatly appreciated. Thank you.

1
csswordpressmenugridfooter

1 Answers

1
votes

Adding these 3 lines of CSS inside your stylesheet will fix everything and make the footer content appear centered in the middle without affecting the sidebar:

.gbtr_dark_footer_wrapper .container_12 .grid_3 {
     width: 100%;
}

What the above code does is that it specifically targets the .grid_3 inside the footer and increases its width from 220px to 100% thus centering the contents of the footer.

Here's a visual of how it looks after adding the above code:

enter image description here