CSS to make header responsive

• 

  eatwellorlando · Member · Jun 20, 2016 at 5:42 pm

  • Copy link
  • Add topic to favorites

  I need a CSS code to make my header image responsive for mobile devices. Thanks!

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

• 

  thesacredpath · Member · Jun 21, 2016 at 2:06 am

  • Copy link

  With the design of the header area this is sort of tricky to do, and when I get down to phone size on my browser window, the phone number and “Orlando” get really fuzzy. Add this at the very bottom of your custom CSS and see what you think.

  @media screen and (max-width: 550px) {
  	.header-bg {
  		background-size: 149%;
  		background-color: #fff;
  	}
  }
  @media screen and (max-width: 500px) {
  	.header-bg {
  		min-height: 200px;
  	}
  }
  @media screen and (max-width: 400px) {
  	.header-bg {
  		min-height: 150px
  	}
  }