No announcement yet.

Widget areas not stacking properly

  • Filter
  • Time
  • Show
Clear All
new posts

  • Widget areas not stacking properly

    On my localhost I've set up a widgetized home page using two methods, and I get the same undesirable results using both methods. In Extender I used EZ Home 1-2 layout. When that didn't work I created my own widgetized home page template with the same configuration. 1 widget in the first row, 2 in the second row. I am having a problem with the row that has 2 widgets in it.

    When I test the page for responsive sizes the second row works great, until I get to phone size. At about 500px screen size I want one widget area to drop beneath the other. Instead they both just scrunch up against one another. On a phone there are two small widgets side by side, each about 100 px wide.

    I included a screen shot at 308 pixels.

    How do I get them to stack on top of one another?
    this image is at 308 px wide
    Last edited by markhem; 03-11-2017, 06:44 PM.

  • #2
    I´m sorry to say we can´t troubleshoot from a photo - the problem is most likely CSS and we´d have to have a URL / a site to look at and inspect the code to find out what´s missing or interfering. Also you didn´t mention the childtheme you use...

    In this demo of the Freshly skin, you see a 1 - 2 - 2 layout in use, this is how the widget areas would behave by default.
    Last edited by SiGa; 03-11-2017, 06:58 PM.


    • #3
      Thanks SiGa

      I am using Cafe Pro, however I've had this problem with numerous themes. I only experience this problem when I use the ez home layouts, or when I create a widgetized template.

      Yes, its not a very helpful image. Just trying to show that at 308 px the widgets don't stack on top of one another like they do in the skin you shared. I used the column classes, "one-half first"," and "one-half".


      • #4
        I do understand the problem, though I don't see a chance to find out why just from the pic. Any chance to demonstrate the problem online?


        • #5
          I have been experimenting with the ez home 1-3-1 structure to see if this is theme related. I've tried the Sample Theme, Cafe Pro, Metro Pro, Outreach Pro, Agent Focues Pro, Beautuful Pro.

          No matter which theme I use when I size down to 360 pixels the row with 3 widget areas in it just squishes the widgets up against one another. They don't drop beneath and stack. So I have 3 columns that are 120 px each.

          I tried adding some classes to the style sheet, whcih Eric described in a video. I put them at the bottom on the column classes area.

          .first, .ez-only {
          margin-left: 0;
          clear: both;

          .ez-only {
          width: 100%;
          float: left;

          This didn't work so I pulled them out of the style sheet.

          I suspect I could do a work around by putting shortcodes into divs and styling them. But, I was thinking the ez-home layouts would stack them.


          • #6
            Yes, it normally would. Without additional CSS. Genesis would already come with those classes, unless a childtheme overwrites them.

            But all I can do is to repeat what I already said above. You can try to contact support staff via ticket, maybe they can guess what's wrong...


            • #7
              Thank you SiGa. I'll do that because I really would like to use the ez-home layouts.