footer widgets not floating nicely

Why do the very bottom, orange footer widgets not float nicely when resized?  I have the width set to 25%.  The  first one with the address is the stinker.

Beta site
http://298.6e8.myftpupload.com/

screen shot
http://screencast.com/t/UZdBbHkbZ
nsitedesignsAsked:
Who is Participating?
 
Terry WoodsIT GuruCommented:
When I add CSS as follows the footer, it stops it wrapping the widgets into a new row:

.footer-widgets-2, .footer-widgets-1, .footer-widgets-3, .footer-widgets-4 {
    width: 25%;
    margin: 0;
 }

Open in new window


You'll need to replace the manually specified px widths that are already there.

At that point, you can add padding as necessary (rather than margin) to get the spacing you need.

Does that make sense?
0
 
Terry WoodsIT GuruCommented:
The style.css has a media query:
@media only screen and (max-width: 1023px)
where class footer-widgets-1 has width:100%;

Try removing class footer-widgets-1 from that, and...

The other footer widgets have classes footer-widgets-2, footer-widgets-3, and footer-widgets-4 and have a media query setting the width to 23%. If that setting included footer-widgets-1 then the footer display ok until it breaks again below width 768px where another media query changes the width to 48% but again misses setting it for .footer-widgets-1

Does that help?
0
 
nsitedesignsAuthor Commented:
Hmmm, I made the updates but I don't see any change.  I cleared cache and tried using a private browser.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
nsitedesignsAuthor Commented:
Client now only wants 3 items in footer.  I am going to change setting to 33%
0
 
nsitedesignsAuthor Commented:
Actually, they now want to add social media so we are back to 4 widgets in footer.
0
 
Terry WoodsIT GuruCommented:
What appears to be line 2256 of your style document needs to be removed:

@media only screen and (max-width: 1023px) {

	.education-pro-landing .site-inner,
	.site-inner,
	.wrap {
		max-width: 740px;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.content-sidebar-sidebar .content,
	.content,
	.footer-widgets-1,    ******** THIS LINE **********
	.home-bottom .enews p + form,
	.home-bottom .enews p,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content,
	.sidebar-primary,
	.sidebar-secondary,
	.sidebar-sidebar-content .content-sidebar-wrap,
	.sidebar-sidebar-content .content,
	.site-header .widget-area {
		width: 100%;
	}

Open in new window

0
 
nsitedesignsAuthor Commented:
I removed that line.  Cleared cache. Checked in private browser.  No difference.
http://screencast.com/t/w2vE3xUz
0
 
Terry WoodsIT GuruCommented:
Is this still a problem for you? Which browser are you using? If you have Chrome or Firefox, I could help you use the developer tools to "Inspect" the footer widget element and see if the footer-widgets-1 class is still active, and if so where the style is coming from.
0
 
nsitedesignsAuthor Commented:
yes, still a problem. I am using Firefox on a mac.  Below is the code.  Hoping this helps.

Footer 1
footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 {
    float: left;
}
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
    margin-right: 40px;
}

Open in new window


Footer 2
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 {
    float: left;
}
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
    margin-right: 40px;
}
.footer-widgets-2, .footer-widgets-3, .footer-widgets-4, .footer-widgets-5 {
    width: 170px;
}

Open in new window


Footer 3
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 {
    float: left;
}
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
    margin-right: 40px;
}
.footer-widgets-2, .footer-widgets-3, .footer-widgets-4, .footer-widgets-5 {
    width: 170px;
}

Open in new window

0
 
nsitedesignsAuthor Commented:
I am confused. Do I totally take out all the individual footer css codes above and put in YOUR code?
0
 
Terry WoodsIT GuruCommented:
Yes, give that a try. As you always should, keep a copy of what you have first in case you want to go back to it.
0
 
nsitedesignsAuthor Commented:
sorry for delay.  I was out sick and this got pushed behind.  Thanks for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.