[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 99
  • Last Modified:

Sick of fighting with footer widgets

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
nsitedesigns
Asked:
nsitedesigns
  • 2
  • 2
3 Solutions
 
Paul MacDonaldDirector, Information SystemsCommented:
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
 
nsitedesignsAuthor Commented:
Now it forms one column instead of four.  I still wanted to have 4 columns.

http://screencast.com/t/0OLcEkfMA
0
 
David KellyWeb developerCommented:
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
 
Paul MacDonaldDirector, Information SystemsCommented:
"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
 
nsitedesignsAuthor Commented:
Thanks All
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now