widget hight and layout

[Mark Bickel]

Questions on widget size, position:

1) Is there a way to get multiple widget boxes to all be the same height? I have 2 text boxes on my site below (weekly meeting, recent teaching) that I would like to be the same height (I tried the min. height and height settings in the widget options, but they don’t seem to effect anything)

2) Is there a way to force widgets to layout the way you want … here is what I would prefer on my site – put ‘upcoming events’ on the top far right where search is now, then put the blog posts under ‘weekly meetings’ and ‘recent teaching’ – but when I do that the top of the blog post aligns with the bottom of upcoming events, leaving a huge gap between boxes.

3) soon I want to start using your podcasting, is the widget for that a fixed height? if so, how high is it (it would replace my ‘recent teachings’ and so I would want to set ‘weekly meetings’ to match it)

My website is: http://crossroads.dreamhosters.com/

Thanks,

Mark

[Bill Robbins]

Mark,

Thank you for your business first of all. Let me see if I can answer your questions:

Widget Height
You can set a height for those specific widgets if you’d like to. Here’s how:

1. Go to the theme options page and select the styling tab.
2. At the top of the page, select “yes” to include custom styling. Scroll down to the bottom until you see a box labeled “Custom CSS.” Paste this into that box:

   
   #text-4,
   #text-6 {
   	min-height: 238px;
   }
   

3. Save your changes.

Basically we’re telling the browsers that these specific text widgets must be at least 238px high. You can also use height: 238px; if you'd like the height to not ever be greater than that. I found the #text-4 and #text-6 by browsing through your source code. If you need to change this in the future you can. Just right click on your page and select "view source." Look through the code until you find the content you're looking for. In this case the first widget starts off like this:

<div id="text-4"

That's where we got the #text-4. The id becomes a # in our styling.

Widget Layout

The theme uses a script called Masonry to try and fit together elements of different sizes into an arrangement that doesn't leave gaps. That said, there are only so many ways you can fit a group of blocks together when they are of unique and variable sizes.

You could set a specific height for all of the widgets, but that wouldn't leave as much space for items such as the coming events that are taller.

One option would be to make the home posts the same width as the other widgets. That would allow them to stack with a uniform width (like Pinterest does). To do that, add this to your "Custom CSS" box:

.widget.home-posts {
	width: 270px;
}

---

I hope that helps out. If you have any questions, let me know.

Believe it or not, my journey to being a WordPress developer really began with me serving as a pastor of a twenty somethings community at the church I used to work at. The first website I ever set up was for that community. Little did I know where it would go.

Have a great weekend,
Bill

[Author]

Posts