Spacing widgets on home page
URL to the page in question:
http://client.dev.recipesocial.net/
-
Hi Bill,
The theme is starting to get there, just a quick question. What’s the best way to position the widgets on the home page? Other than move them up or down in the widget area on the back end. Ideally i’d like to be able to space them apart so that they look much neater.
Do I need to add a piece of CSS in the custom area on the theme options section?
Thanks,
Christian.
Hello Christian,
Excellent question. The home page sections are really built with one widget per section in mind. If you need to have more, give this a try:
- Go to your theme options page and choose the Advanced tab.
- Scroll down to the Custom CSS box and add this:
.section-wrap .widget:nth-child(2n) {
margin-left: 30px;
margin-right: 30px;
}
.section-wrap .widget:nth-child(4n) {
clear: both;
margin-left: 0;
}
- Update your settings.
See if that will work for you,
Bill
Hi Bill,
Thanks for the code, much appreciated.
It has indeed worked for the ‘social’ section on the site and now the three social widgets look much neater.
However, I’ve moved the TripAdvisor widget to the ‘contact’ section at the bottom of the home page, but i have the same issue with spacing, can anything be done to smarten the spacing up here too?
Thanks,
Christian
The spacing is based on the number of widgets. The contact widget is the first one even though it is full width.
You might have better luck moving the Trip Advisor and Newsletter widgets to the eighth section and just not adding a home block image to it. That way the widget areas are next to each other. It’s just a thought.
Okay.
I’m not sure I follow you. I only can see seven sections, not eight.
Am I missing something?
Thanks,
Christian.
Sorry…thought there were ten. Looking at it, I don’t see anything too off there spacing wise. Could you be specific about what you’d like to change. I’ve attached a screenshot of what I see.
No probs. I thought i might have been missing something!
Since adding the 1px black outline, they don’t look so odd. But it would be good to balance them and have a widget space in the middle. I just tried to use a blank text widget but it not works, it just kick the TripAdvisor widget around onto the next line.
Is there a way to balance them?
Thanks,
Christian.
We could right align the last widget. It’s still going to look a bit odd since there is empty space on the right hand side of the widget. It won’t fully line up. Here’s what it’ll look like:
#seven .widget:last-of-type {
float: right;
}
#seven .widget:nth-child(2n) {
margin-left: 0;
}
Sorry…this page just wasn’t made for smaller widgets.
I’ve swapped them around and taken out the blank text widget.
They look loads better, thanks again 🙂
- The topic ‘Spacing widgets on home page’ is closed to new replies.