Adjusting widget area size

• 

  nbuchan · Member · Oct 6, 2015 at 11:36 am

  • Copy link
  • Add topic to favorites

  Hi. I am using the goran theme currently. The front page widget area, is made up of 3 widget areas covering the page. Is it possible to use CSS to have a single text widget that covers the whole page width?

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

• 

  ehtis · Staff · Oct 6, 2015 at 2:15 pm

  • Copy link

  Hi there,

  We can try that, and yes it’s certainly possible via CSS. Here’s an example code, it will stretch the search widget that you currently have to almost entire page width:

  .footer-widget .widget_search {
  	width: 960px;
  	margin-top: 90px;
  }

  If you can add a text widget, preferably at the bottom of the first widget area, we’ll try adjusting its width as well.

• 

  nbuchan · Member · Oct 6, 2015 at 4:54 pm

  • Copy link

  Thanks!

  That’s great, worked perfectly.

  How would I do the same thing with the front page widget?

• 

  ehtis · Staff · Oct 6, 2015 at 7:03 pm

  • Copy link

  OK, I thought you were referring to the footer area widgets on the front page! My bad.

  Here’s some tinkering that I did with the ‘front page widgets’.

  – Hidden the second and third widgets (you can simply remove them from dashboard as well).
  – Increased the width of the first. Can you put up some text there so that it can be properly adjusted?

  .front-page-widget:nth-of-type(3n+2) {
      display: none;
  }
  .front-page-widget:nth-of-type(3n+3) {
      display: none;
  }
  .front-page-widget .textwidget {
  	width: 900px;
  }

  You can play around with width, paddings etc. on your own as well! ;)