Re-sizing my homepage for smaller screens

• 

  preventiondiaries · Member · Aug 19, 2016 at 11:15 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I recently changed the homepage of my responsive design to include a sidebar, which has calendar and testimonials widgets. I have specified that I want the calendar to be 400px by 400px, but I only want that to apply for large screens because when you start looking at the site on a phone screen, the calendar takes up too much real estate.

  Can someone help me come up with a media query for this that would make this site look normal on the phone?

  Thanks so much!
  Christine

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

• 

  hallluke · Member · Aug 21, 2016 at 8:24 pm

  • Copy link

  Instead of reducing the size of the calendar you can just make that widget show horizontal scrollbars when the calendar would otherwise not fit:

  #text-1 {
    overflow: scroll;
  }

• 

  preventiondiaries · Member · Aug 22, 2016 at 9:34 pm

  • Copy link

  Thank you @halluke! Elegant solution!