Solved

footer widgets not floating nicely

Posted on 2016-08-12
12
54 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
  • 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
 

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Read about why website design really matters in today's demanding market.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

895 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now