Homepage rows/columns

[Kelley Galownia]

Hi Bill,

Thanks for the help on the last couple of questions I had a few days ago. Your suggestions helped out great!

I’m now trying to figure out if it’s possible to get the rows/columns on the homepage to be consistent dimensions. When I make the browser narrower/wider, it repositions the text widgets in the columns making them not align. Any thoughts on how to fix this?

Thanks again!
Kelley

[Bill Robbins]

Hi Kelley,

Great question. That is the correct behavior for the text widgets on the home page. As the screen size shrinks the space for each widget also gets smaller. If we kept them three across, they would be very difficult to read especially by the time we reached a smartphone sized layout. I would strongly recommend keeping that as is.

If you really feel you still need to change that, you’ll have to turn off the javascript that aligns the home page widgets. It’s in the custom-js.php file in this spot:

	// Masonry for Home page widgets
		var $container = jQuery('#home-widgets');
			$container.imagesLoaded(function(){
			$container.masonry({
				itemSelector	: '.widget',
				gutterWidth		: 30,
				columnWidth		: '.sizing'
			});
		});

You can then set a width for #home-widgets .widget with CSS. You’ll also need to add in margins since the javascript aligns them there.

Take care,
Bill

[Kelley Galownia]

Okay, so there’s no coding that makes the second row of text widgets begin at the same level? The text boxes don’t necessarily have to have the same dimensions — I’m just trying to make the text boxes on the bottom row align.

[Bill Robbins]

You can set a height for the widgets via CSS. The javascript on the bottom is set to keep large vertical gaps from forming between the widgets; kind of like Pinterest. If you set a height for the widgets that’s slightly taller than the content it will force the widgets to remain uniform height wise even if they have different amounts of content. It’s the content being slightly different that causes them to not line up in perfect rows.

[Kelley Galownia]

That’s great! Is there a simple way to set the height for the widgets?

[Bill Robbins]

Here is some CSS you can use to set a height. You’ll need to adjust the value there so that it’s just lightly larger than what you need:

#home-widgets .widget { min-height: 300px; }

Take care,
Bill

[Author]

Posts