Solved

Sick of fighting with footer widgets

Posted on 2016-10-13
5
49 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 33

Assisted Solution

by:paulmacd
paulmacd 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 33

Accepted Solution

by:
paulmacd 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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
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 add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…

758 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

17 Experts available now in Live!

Get 1:1 Help Now