Widget separation

[ArcaneE]

Hi,

My site is http://www.peinturefusion.com

I would like to have my widget separated not evenly at the bottom. More like this:
widget 1 - Nothing but takes 3/5 of the page
Widget 2 - 1/5 (menu)
Widget 3 - 1/5 (general info - text widget)

Essentially, I want it to look like this:

Thank you!

Nathalie

[john]

Hey,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[ArcaneE]

Hello,

Of course! My site is http://www.peinturefusion.com.

I would also like to know how to simplify the footer widget menu by removing the box and the shadow. Essentially, I would like my footer to look like this:

Thank you!

Nathalie

[friech]

Hi Nathalie,

There is a syntax error on the last block of your custom CSS.

.x-colophon.bottom {
  background-color: #000000;
  footer.x-colophon.top .widget ul li a {
    color: #fff !important;
    box-shadow: none;
    border: 0;
}

Please update that to this:

/*bottom footer*/
footer.x-colophon.bottom {
  background-color: #000000;
}

/*footer widget areas*/
footer.x-colophon.top .widget ul li a,
footer.x-colophon.top .widget ul,
footer.x-colophon.top .widget ol {
	color: white;
	background-color: transparent !important;
	box-shadow: none;
	text-shadow: none;
	border-width: 0;
	padding-bottom: 5px;
	padding-top: 5px;
}

That will simplify your footer widget areas.

To resize the footer columns, please add this in your custom CSS.

/*resize the footer columns*/
@media (min-width: 768px) {
	footer.x-colophon.top .x-column.x-1-3:first-child {
		width: 56%;
	}
	footer.x-colophon.top .x-column.x-1-3:nth-child(2n),
	footer.x-colophon.top .x-column.x-1-3:last-child {
		 width: 18%;
	}
}

Hope it helps,
Cheers!