Adjusting sidebar width in Sela theme

• 

  firstmethodistmesquite · Member · Feb 23, 2016 at 10:24 pm

  • Copy link
  • Add topic to favorites

  I need to adjust the sidebar width in Sela to make the Google Calendar widget display properly. I’ve inspected the CSS and am completely stumped. I’d appreciate any help!

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

• 

  thesacredpath · Member · Feb 24, 2016 at 12:01 am

  • Copy link

  Hi, I did some testing and for the calendar to be readable, it will have to be at least 450px in width and on narrower screens/browser windows, that will mean limiting the content width. The following is my first take at things, but my first suggestion would be to put the calendar on its own page instead of in the sidebar. Perhaps change your main page to a full-width template and add the calendar below the content and then not put it on the other pages.

  @media screen and (min-width: 1180px) {
  	.content-wrapper {
      padding-left: 55px;
    }
    .content-wrapper .content-area {
      max-width: 580px;
      width: 100%;
    }
    .sidebar-widget-area {
      width: 450px;
    }
  }
  @media screen and (min-width: 986px) and (max-width: 1179px) {
  	.content-wrapper .content-area {
  		max-width: 400px;
  		width: 100%;
  	}
  	.sidebar-widget-area {
  		width: 450px;
  	}
  }
  @media screen and (max-width: 985px) {
  	.content-wrapper .content-area, .sidebar-widget-area {
  		width: 100%;
  	}
  	#text-2 iframe {
  		width: 100%;
  	}
  }

  With the above changes, make sure and view your other pages on your computer and narrow and widen your browser window, and also view everything on a tablet and phone to see how things work and appear.

• 

  firstmethodistmesquite · Member · Feb 24, 2016 at 5:24 pm

  • Copy link

  Thank you so much for your quick assistance! I think your idea is the best one.

• 

  thesacredpath · Member · Feb 24, 2016 at 6:28 pm

  • Copy link

  You are welcome, and let us know if you have additional questions or problems.