Solved

Sick of fighting with footer widgets

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

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

808 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