Solved

Sick of fighting with footer widgets

Posted on 2016-10-13
5
60 Views
Last Modified: 2016-10-14
That's it.  I give up!  I have been struggling  for hours trying to get the dang orange footer widgets to display properly.  

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

site from vendor
http://my.studiopress.com/themes/education/#demo-full

Below are my problems:

1.  Social media is listed lower than other widgets.  Would like it at same height as the 3 widgets to the left.
2.  When you resize site for phones, widgets 1, 2 and 3 have an extremely narrow width.  They are supposed to be situated on top of one another but widget 2 and 3 are next to each other
3.  Would like text left justified but it isn't "taking" my css

/*........  FOOTER .......... */
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
 width: 25%;
 padding: 1%;
  text-justify:left;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
 float: left;
}

.footer-widgets-4 {
 float: right;
}

@media only screen and (max-width: 1024px){
.home-bottom .widget {
float: none;0;
width: 100%;
}
}
 

Open in new window

0
Comment
Question by:nsitedesigns
  • 2
  • 2
5 Comments
 
LVL 34

Assisted Solution

by:Paul MacDonald
Paul MacDonald earned 250 total points
ID: 41842703
Try modifying your CSS so that when you're in full screen you get this...

.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 {
    width: 22%;
    padding: 1%;
    text-justify: left;
}

...and when you're in phone mode you get this...
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 {
    width: 100%;
    text-justify: left;
}

That should at least get you in the ballpark.
0
 

Author Comment

by:nsitedesigns
ID: 41842723
Now it forms one column instead of four.  I still wanted to have 4 columns.

http://screencast.com/t/0OLcEkfMA
0
 
LVL 1

Assisted Solution

by:David Kelly
David Kelly earned 250 total points
ID: 41842839
I believe paulmacd meant for the 100% to ONLY apply when on a phone/mobile device.

Also, I'm pretty sure you want to use text-align: left, not justify. "text-justify" does nothing by itself, it only works when used in conjunction with "text-align: justify".

http://www.w3schools.com/cssref/css3_pr_text-justify.asp

I opened your site, took the 100% width off, and everything looked fine. 4 columns, and the social stuff is in line with all the other content, I don't think I'm seeing what you are.
0
 
LVL 34

Accepted Solution

by:
Paul MacDonald earned 250 total points
ID: 41843586
"I believe paulmacd meant for the 100% to ONLY apply when on a phone/mobile device. "
Yep.   You'll need a media query to change the width of that element depending on the size of the screen it's being viewed on.  Sorry if I didn't make that clear.
0
 

Author Closing Comment

by:nsitedesigns
ID: 41844338
Thanks All
0

Featured Post

DevOps Toolchain Recommendations

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Reinstall Putty Windows 7 5 45
Gulp not seeing Changes 4 36
Show banners that are blocked by Ad Muncher 10 46
bootstrap footer centering and columns alignement 3 16
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
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.
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 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…

914 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

16 Experts available now in Live!

Get 1:1 Help Now