Hi all,

 

I've been tearing my hair out trying to fix this seemingly basic CSS issue. The footer area of my clients Wordpress website here: http://hrbims.com/ is not behaving as I would like it to. I am using a child theme with the twentythirteen theme as the parent.

Basically there is 3 widgets in the footer which I want to be full-width, however whenever I increase the widget width using the following CSS the widgets stack vertically instead of staying horizontal:

 

.sidebar .site-footer .widget {
     width: 275px; //anything 250px or above causes the stacking
}
 

The widget area container is 900px and there is no padding around the widgets so there should be plenty of space for the widgets to be full-width.

The really weird thing is when I use the CSS from above in the Chrome Inpsector tool the stacking doesnt occur, it only happens when I actually add the code to the stylesheet and upload it.

 

Would REALLY appreciate your help on this one guys!!

 

 

cheers,

 

Andy

Edited November 25, 201312 yr by AndyDesigns

An unknown element may render as display: inline; by default. I think that's the issue here, because you're nested quite far down, using different tags, it's getting confused as to which display model it should be using.

 

It could also be that an ID (which has more weight than a class) is overriding something.

 

Try adding display: block; to .sidebar .site-footer .widget {}.

Also, using absolute positioning probably won't do you any favors here. You can align these elements naturally. I would consider re-writing this bit to avoid confusion, there's a lot of classes being used.

 

http://jsfiddle.net/J7UQ2/

 

http://jsfiddle.net/J7UQ2/embedded/result/

Also, using absolute positioning probably won't do you any favors here. You can align these elements naturally. I would consider re-writing this bit to avoid confusion, there's a lot of classes being used.

 

http://jsfiddle.net/J7UQ2/

 

http://jsfiddle.net/J7UQ2/embedded/result/

 

Thankyou for all your help Jack, i'm beginning to regret using this theme as a starting point now, because as you say it has alot of confusing classes in the footer.

I've tried adding the following code that you suggested below but i'm still having problems:

 

footer aside  {
    margin-right: 0;
    padding-right: 0;
    padding-left:0;
    color: #3f3f3f;
    display: inline-block;
    width: 275px !important;
}
 

 

The absolute positioning is an inline-style which seems to be generated by the widget so not sure how I can remove that. Any further advice much appreciated.

Edited November 25, 201312 yr by AndyDesigns

The last bit of code in your functions js are causing it to display vertical if you comment that out and then change the max width to 900px on .sidebar .sitefooter .widget-area{} see where that gets you

 

this is what wants commenting out

 

/**
	 * Arranges footer widgets vertically.
	 */
	/*if ( $.isFunction( $.fn.masonry ) ) {
		var columnWidth = body.is( '.sidebar' ) ? 228 : 245;

		$( '#secondary .widget-area' ).masonry( {
			itemSelector: '.widget',
			columnWidth: columnWidth,
			gutterWidth: 20,
			isRTL: body.is( '.rtl' )
		} );
	}*/

I may have miss-read what you wanted if you want them stacked full width do as above but also remove float from .site-footer .widget {} then either remove

 

footer aside  {
    margin-right: 0;
    padding-right: 0;
    padding-left:0;
    color: #3f3f3f;
    display: inline-block;
    width: 275px !important;
}

and change .sidebar .site-footer .widget {} to 900px or change the above width to 900px

 

hth I wasn't sure if you wanted them side by side or stacked

Thankyou so much!!! You were right with your first reply, the js was the culprit. I dont understand when I first activated the twentythirteen theme the footer was behaving as I wanted but since using my child-theme then the problems started. If possible I would like to connect the top and bottom borders of the headings to each other to make one long double-border.

Will have a play with the CSS.

 

Once again, thankyou so much!!!

Edited November 25, 201312 yr by AndyDesigns

Managed to get what i wanted, thanks again!.