Solved

Sick of fighting with footer widgets

Posted on 2016-10-13
5
80 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
[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
  • 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

Industry Leaders: 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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
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…

726 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