Solved

footer widgets not floating nicely

Posted on 2016-08-12
12
60 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

705 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