Solved

footer widgets not floating nicely

Posted on 2016-08-12
12
49 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
Comment Utility
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
Comment Utility
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
Comment Utility
Client now only wants 3 items in footer.  I am going to change setting to 33%
0
 

Author Comment

by:nsitedesigns
Comment Utility
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
Comment Utility
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
Comment Utility
I removed that line.  Cleared cache. Checked in private browser.  No difference.
http://screencast.com/t/w2vE3xUz
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 35

Expert Comment

by:Terry Woods
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
sorry for delay.  I was out sick and this got pushed behind.  Thanks for your help!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

763 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

9 Experts available now in Live!

Get 1:1 Help Now