How to carefully position widgets on the home page

Support Area Forums Forward How to carefully position widgets on the home page

Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question: http://
  • Author
    Posts
  • #31701

    How can I direct in which column the widgets are placed? I’m not able to place facebook under the middle column or the mailchimp widget. I know how to change the order of the widget, but not to place them exactly on the page. If I want to add an attention widget, is this also possible to do it for 1 column and not over the whole length of the home page?

    #31708
    Bill Robbins
    Moderator

    Generally speaking the column is determined by the order. The theme uses a script to arrange the widgets so there aren’t large gaps (it’s similar to the one used by Pinterest). Because of that, if some of the content is taller or wider than others, it’ll move the widgets around to keep out empty space.

    Where they end up is determined by the size of the widgets. If they are all roughly the same size, then they’ll end up in the order that they’re set in the widget admin. It looks like some of your widgets are quite a bit taller than others. I would try to even that out. That will help positioning of the widgets and readability too.


    Here’s how to make the attention widget take up one column only:

    1. Go to the Appearance section in your WordPress dashboard and click on Customize.
    2. Look down for the advanced section and click on it. Then choose Custom CSS.
    3. In the box there, add this:
      
      @media only screen and (min-width: 768px) {
      
      	#home-widgets .widget.attention-block {
      		display: block;
      	}
      	
      	#home-widgets .attention-block h3.widget-title {
      		margin-bottom: 20px;
      		display: block;
      		width: 100%;
      		text-align: center;
      	}
      	
      	#home-widgets .attention-block .attention-button {
      		display: block;
      		width: 100%;
      		text-align: center;
      	}
      
      }
      
      
      @media only screen and (min-width: 768px) and (max-width: 1023px) {
      	
      	#home-widgets  .widget.attention-block {
      		width: 330px;
      	}
      	
      }
      
      @media only screen and (min-width: 1024px) and (max-width: 1180px) {
      	
      	#home-widgets  .widget.attention-block {
      		width: 280px;
      	}
      
      }
      
      @media only screen and (min-width: 1181px) {
      
      	#home-widgets  .widget.attention-block {
      		width: 340px;
      	}
      
      }
      
    4. Save your changes.
Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘How to carefully position widgets on the home page’ is closed to new replies.