Change the position homepage widgets

• 

  estudiomatccorp · Member · Jan 12, 2017 at 4:40 pm

  • Copy link
  • Add topic to favorites

  Good morning
  I wanted to place the widge 3 of the main page, under the widgets 1 and 2 (images) and the widge 3 (text) wanna this centered between these two.

  Image image
  —– 1 —— —- 2 —–
  ——-3——
  text

  How could I do it with css?
  Thank you.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 12, 2017 at 9:50 pm

  • Copy link

  Hi there, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. I’ve set this to only affect the layout on screens/windows 768px and wider since below that the widgets go to a column layout and would get too narrow to be easily read if we kept the 2 over 1 arrangement.

  @media screen and )min-width: 768px) {
    #widget-area-2, #widget-area-3 {
    width: 47%;
  }
    #widget-area-3 {
     margin-right: 0;
    }
    #widget-area-4 {
     width: 100%;
     text-align: center
    }
  }

• 

  estudiomatccorp · Member · Jan 13, 2017 at 9:59 am

  • Copy link

  good morning
  It does not help me, the widges 3 still going out on the right
  this shoul be under.

  thanks

• 

  estudiomatccorp · Member · Jan 13, 2017 at 10:15 am

  • Copy link

  The widges that I want to change are those of the main page, where the slideshow and the text
  I wanna to put the text under

• 

  thesacredpath · Member · Jan 16, 2017 at 9:07 pm

  • Copy link

  Ah, thanks for the clarification. I was working on the footer widget area. Add this to your custom CSS for the widget area right underneath the header area.

  @media screen and (min-width: 768px) {
    .home #secondary #widget-area-5, #secondary #widget-area-6 {
      width: 47% !important;
    }
    #secondary #widget-area-6 {
      margin-right: 0;
      float: right;
    }
    #secondary #widget-area-5 {
      margin-right: 0;
      float: left;
    }
    #secondary #widget-area-7 {
      width: 100%;
    }
  }