Remove extra space around widgets

• 

  doncojones · Member · Feb 1, 2017 at 10:57 am

  • Copy link
  • Add topic to favorites

  Hi,

  When viewing our site (riggedgame.blog / Cerauno theme) on a tablet, I’ve noticed that there is a lot of extra space around the widgets (scrolling lower down the page). Is there any way to remove / clean up this extra space? This occurs with mobile theme enabled and disabled.

  Any help would be greatly appreciated!

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

• 

  doncojones · Member · Feb 1, 2017 at 11:03 am

  • Copy link

  Please note this only occurs on tablet / ipad browsers (Safari / Chrome).

• 

  staff-loquaciousloon · Staff · Feb 1, 2017 at 5:33 pm

  • Copy link

  Hi there!

  The spacing is caused by the different heights of the widgets – the tallest one in the row sets the height of that row.

  My advice, for smaller screens, would be to add a bit of CSS that will put the two sidebars side by side (each in a single column) instead of stacking them on top of one another.

  This should accomplish that:

  @media screen and (max-width: 750px) {
  
      .sidebar-left,
      .sidebar-right {
          width: 50%;
          clear: none;
      }
      .sidebar-left .widget, .sidebar-right .widget {
          width: 96%;
      }
  }

  On some screen sizes – where you have one sidebar in the footer in multiple columns, while the other stays to the side – you’ll notice the spacing still. I’m afraid the only way around that would be to make the widgets fill the width of the screen, which would have it’s own problems.

  Or, I suppose you could keep them the same width, and just center them:

  @media screen and (max-width: 1100px) {
      .sidebar-right .widget {
          margin: 0 auto;
          float: none;
       } 
  }

  Give that a try and let me know what you think :)

• 

  captdeu · Member · Feb 1, 2017 at 10:08 pm

  • Copy link

  Thanks for your help, I’ll give it a try.

  Cheers

• 

  captdeu · Member · Feb 2, 2017 at 10:47 am

  • Copy link

  Hi,

  Unfortunately the space around the widgets persists.

• 

  staff-loquaciousloon · Staff · Feb 2, 2017 at 2:08 pm

  • Copy link

  Interesting – it looks like there’s another style in the theme that was overriding that second bit of CSS I shared. Odd that it didn’t cause a problem yesterday.

  At any rate, here’s the full CSS, with a small modification:

  /* Re-align sidebars on mobile */
  @media screen and (max-width: 750px) {
  
      .sidebar-left,
      .sidebar-right {
          width: 50%;
          clear: none;
      }
      .sidebar-left .widget, .sidebar-right .widget {
          width: 96%;
      }
  }
  
  /* Single column when just the right sidebar is in the footer */
  @media screen and (max-width: 1100px) {
      .sidebar-right .widget,
      .sidebar-right .widget:nth-of-type(3n) {
          margin: 0 auto;
          float: none;
       } 
  }

• 

  captdeu · Member · Feb 7, 2017 at 6:47 pm

  • Copy link

  Hi Chad1008,

  Applying the last CSS you sent: the widgets form one long column in the middle and leave a lot of extra space on the sides.

  Regards

• 

  staff-loquaciousloon · Staff · Feb 7, 2017 at 9:13 pm

  • Copy link

  Correct.

  On certain screen sizes (starting at 1100px) one sidebar moves into your footer, and the other stays on the right. Then at 750px and lower, both sidebars move to the bottom.

  Between 750 and 1000px wide, when there is only one sidebar, I wrote the CSS to center the widgets.

  The alternatives would be:
  – To leave them as the are by default (with the spacing you initially mentioned not liking
  – Align them to one side – leaving the empty space all on the left or all on the right
  – Widen the widgets (potentially decreasing their readability and giving them a very “flat” look