?
Solved

footer widgets not floating nicely

Posted on 2016-08-12
12
Medium Priority
?
63 Views
Last Modified: 2016-09-21
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
0
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41754332
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
 

Author Comment

by:nsitedesigns
ID: 41754376
Hmmm, I made the updates but I don't see any change.  I cleared cache and tried using a private browser.
0
 

Author Comment

by:nsitedesigns
ID: 41754381
Client now only wants 3 items in footer.  I am going to change setting to 33%
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 

Author Comment

by:nsitedesigns
ID: 41754389
Actually, they now want to add social media so we are back to 4 widgets in footer.
0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41754417
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
 

Author Comment

by:nsitedesigns
ID: 41756936
I removed that line.  Cleared cache. Checked in private browser.  No difference.
http://screencast.com/t/w2vE3xUz
0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41775908
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
 

Author Comment

by:nsitedesigns
ID: 41779967
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
 
LVL 35

Accepted Solution

by:
Terry Woods earned 2000 total points
ID: 41780827
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
 

Author Comment

by:nsitedesigns
ID: 41786888
I am confused. Do I totally take out all the individual footer css codes above and put in YOUR code?
0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41787116
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
 

Author Closing Comment

by:nsitedesigns
ID: 41809335
sorry for delay.  I was out sick and this got pushed behind.  Thanks for your help!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question