CHANGING THE WIDTH OF THE WIDGETS

• 

  lesfacons · Member · Mar 19, 2014 at 12:49 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I currently have the FULL FRAME theme and would like to know how I can change the width of the widget so that the lager widget is the center column. I would like to display a subscribe section with a menu bar beside it with it not being stacked.

  My website is http://www.lesfacons.com and you can refer to http://www.nowness.com as the type of footer I am looking to get.

  Please advise.

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

• 

  thesacredpath · Member · Mar 19, 2014 at 5:41 pm

  • Copy link

  Give the following a try and see what you think. I’ve limited this to 769px and wider screens/browser windows since at 768px (iPad portrait width), the widgets switch to a single column below the content.

  @media screen and (min-width: 769px) {
  #footer-widgets #first, #footer-widgets #third {
      width: 22.667%;
  }
  #footer-widgets #second {
      width: 34.667%;
  }
  #search-2 input {
      width: 85%;
  }
  #contact-form-widget-text-8 #gwidget-text-8-email {
      width: 92%;
  }
  p.contact-submit {
      text-align: center;
  }
  }

• 

  thesacredpath · Member · Mar 19, 2014 at 5:42 pm

  • Copy link

  Oh yeah, and you will probably want to rearrange your social icons in the text widget with perhaps two rows, 4 on top and 3 in the second.

• 

  lesfacons · Member · Mar 19, 2014 at 8:42 pm

  • Copy link

  Hi ! thanks so much for the code.

  Is there also a way to make the middle column wider?

  Please let me know.

  Thank you.

• 

  thesacredpath · Member · Mar 19, 2014 at 10:10 pm

  • Copy link

  The code I gave above reduces the width of the left and right column by 4% each, and widens the center column by 8%. Did you try the code? If you want it even wider, try this instead.

  @media screen and (min-width: 769px) {
  #footer-widgets #first, #footer-widgets #third {
      width: 15.667%;
  }
  #footer-widgets #second {
      width: 48.667%;
  }
  #search-2 input {
      width: 85%;
  }
  #contact-form-widget-text-8 #gwidget-text-8-email {
      width: 92%;
  }
  p.contact-submit {
      text-align: center;
  }
  }

• 

  lesfacons · Member · Mar 19, 2014 at 10:23 pm

  • Copy link

  Thank you for the code. This is more the width I am looking for.

  Thanks again!

• 

  thesacredpath · Member · Mar 19, 2014 at 10:36 pm

  • Copy link

  You are welcome.