Samantha Samantha - 1 month ago 10
CSS Question

Wordpress (Genesis) Widget Columns Not Showing Correctly

I am working on this site: http://www.livingthelighterlife.com/

If you scroll to the bottom where the footer is, you will see two widgets: "Thanks so much for stopping by" and "Featured Posts & Recipes" - the latter is shown in black to show it's size. You'll notice the widget in that section is a columned featured image widget. I have it set to "one fourth" and yet the last picture is dropping down to the next line instead of being in the fourth column. No clue why this is happening and I've tried everything I can think of to fix it. Not sure what coding to provide, but here's a start:



/*
Site Footer
---------------------------------------------------------------------------------------------------- */

.footer-widgets-1 h3.widgettitle:before, .footer-widgets-1 h3.widgettitle:after,
.footer-widgets-2 h3.widgettitle:before, .footer-widgets-2 h3.widgettitle:after,
.footer-widgets-3 h3.widgettitle:before, .footer-widgets-3 h3.widgettitle:after {
background-color: #dadada;
}

.footer-widgets-3 h3.widgettitle {
margin-top: 0px;
}

.footer-widgets-3 section#text-6 h3.widgettitle {
margin-top: 40px;
}

/* Main Footer Structure
--------------------------------------------- */

.footer-widgets {
width: 1040px;
margin: 14px auto;
padding: 0px;
color: #5b5b5b;
text-align: center;
}

.footer-widgets-1 {
width: 400px;
}

.footer-widgets-2 {
width: 640px;
}

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

.footer-widgets-1 {
padding-left: 0px;
padding-right: 15px;
}

.footer-widgets-2 {
padding: 0px;
background-color: #000000;
}

.footer-widgets-2 .five-sixths,
.footer-widgets-2 .four-sixths,
.footer-widgets-2 .one-fourth,
.footer-widgets-2 .one-half,
.footer-widgets-2 .one-sixth,
.footer-widgets-2 .one-third,
.footer-widgets-2 .three-fourths,
.footer-widgets-2 .three-sixths,
.footer-widgets-2 .two-fourths,
.footer-widgets-2 .two-sixths,
.footer-widgets-2 .two-thirds {
float: left;
margin-left: 2%;
}

.footer-widgets-2 .one-half,
.footer-widgets-2 .three-sixths,
.footer-widgets-2 .two-fourths {
width: 49%;
}

/* Main Footer Formatting
--------------------------------------------- */

.footer-widgets-1 h3.widgettitle, .footer-widgets-2 h3.widgettitle {
margin-top: 0px;
margin-bottom: 27px;
}

<div class="footer-widgets" id="genesis-footer-widgets"><h2 class="genesis-sidebar-title screen-reader-text">Footer</h2><div class="wrap"><div class="footer-widgets-1 widget-area"><section id="text-17" class="widget widget_text"><div class="widget-wrap"><h3 class="widgettitle widget-title">Thanks So Much for Stopping By!</h3>
<div class="textwidget"><img src="http://www.livingthelighterlife.com/wp-content/uploads/2016/10/me.png" style="float: left;">

<font size="2px"><b>Hi, I'm Samantha!</b> Music and food lover, wine<br>and whiskey drinker, animal-rights activist, and contemporary solo-vocalist. I spent many, <i>many</i> years struggling with weight loss because I believed I had to be perfect to lose weight and live a healthy lifestyle. That couldn't be any further from the truth! Join me as I cook yummy dishes, share healthy meal plans, create new workout routines, and live my own version of a healthy lifestyle ... most of the time! <a href="/about" class="bio-read-more">READ MORE »</a></font></div>
</div></section>
</div><div class="footer-widgets-2 widget-area"><section id="featured-post-17" class="widget featured-content featuredpost"><div class="widget-wrap"><h3 class="widgettitle widget-title">Featured Posts &#038; Recipes</h3>
<article class="simple-grid one-fourth odd first post-59 post type-post status-publish format-standard has-post-thumbnail category-recipes tag-cheese tag-eggs tag-flour tag-sesame-seeds entry"><a href="http://www.livingthelighterlife.com/sesame-pogaca-bread-with-brown-shell-eggs/" title="Sesame Pogaca Bread with Brown-Shell Eggs" class="alignnone"><img width="150" height="150" src="http://i1.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/eggs.jpg?resize=150%2C150" class="entry-image attachment-post" alt="" itemprop="image" srcset="http://i1.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/eggs.jpg?resize=150%2C150 150w, http://i1.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/eggs.jpg?resize=450%2C450 450w, http://i1.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/eggs.jpg?zoom=2&amp;resize=150%2C150 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></article><article class="simple-grid one-fourth post-64 post type-post status-publish format-standard has-post-thumbnail category-uncategorized tag-watermelon entry"><a href="http://www.livingthelighterlife.com/red-juicy-summer-watermelon-slices/" title="Red Juicy Summer Watermelon Slices" class="alignnone"><img width="150" height="150" src="http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/watermelon.jpg?resize=150%2C150" class="entry-image attachment-post" alt="" itemprop="image" srcset="http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/watermelon.jpg?resize=150%2C150 150w, http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/watermelon.jpg?resize=450%2C450 450w, http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/watermelon.jpg?zoom=2&amp;resize=150%2C150 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></article><article class="simple-grid one-fourth odd post-46 post type-post status-publish format-standard has-post-thumbnail category-recipes tag-granola tag-milk tag-nectarines entry"><a href="http://www.livingthelighterlife.com/hot-granola-cereal-with-nectarine-segments/" title="Hot Granola Cereal with Nectarine Segments" class="alignnone"><img width="150" height="150" src="http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/nectarines.jpg?resize=150%2C150" class="entry-image attachment-post" alt="" itemprop="image" srcset="http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/nectarines.jpg?resize=150%2C150 150w, http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/nectarines.jpg?resize=450%2C450 450w, http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/nectarines.jpg?zoom=2&amp;resize=150%2C150 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></article><article class="simple-grid one-fourth post-42 post type-post status-publish format-standard has-post-thumbnail category-recipes tag-flour entry"><a href="http://www.livingthelighterlife.com/whole-wheat-speckled-marble-bread/" title="Whole Wheat Speckled Marble Bread" class="alignnone"><img width="150" height="150" src="http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/bread-1.jpg?resize=150%2C150" class="entry-image attachment-post" alt="" itemprop="image" srcset="http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/bread-1.jpg?resize=150%2C150 150w, http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/bread-1.jpg?resize=450%2C450 450w, http://i2.wp.com/www.livingthelighterlife.com/wp-content/uploads/2016/09/bread-1.jpg?zoom=2&amp;resize=150%2C150 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></article></div></section>
</div></div></div>




Answer

change your css to:

.footer-widgets-2 .five-sixths, .footer-widgets-2 .four-sixths, .footer-widgets-2 .one-fourth, .footer-widgets-2 .one-half, .footer-widgets-2 .one-sixth, .footer-widgets-2 .one-third, .footer-widgets-2 .three-fourths, .footer-widgets-2 .three-sixths, .footer-widgets-2 .two-fourths, .footer-widgets-2 .two-sixths, .footer-widgets-2 .two-thirds { float: left; margin-left: 1.5%; }

The current margin is set to margin-left: 2%; but need to be changed to margin-left: 1.5%;

Comments