Spacing widgets on home page

Support Area Forums Moonrise Spacing widgets on home page

Viewing 9 posts - 1 through 9 (of 9 total)
URL to the page in question: http://client.dev.recipesocial.net/
  • Author
    Posts
  • #28085
    RecipeSocial
    Participant

    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.

    #28120
    Bill Robbins
    Moderator

    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:

    1. Go to your theme options page and choose the Advanced tab.
    2. 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;
      }
      
    3. Update your settings.

    See if that will work for you,
    Bill

    #28138
    RecipeSocial
    Participant

    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

    #28152
    Bill Robbins
    Moderator

    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.

    #28185
    RecipeSocial
    Participant

    Okay.

    I’m not sure I follow you. I only can see seven sections, not eight.

    Am I missing something?

    Thanks,
    Christian.

    #28190
    Bill Robbins
    Moderator

    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.

    #28194
    RecipeSocial
    Participant

    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.

    #28195
    Bill Robbins
    Moderator

    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.

    #28199
    RecipeSocial
    Participant

    I’ve swapped them around and taken out the blank text widget.

    They look loads better, thanks again 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Spacing widgets on home page’ is closed to new replies.