Header and text too close on a mobile device

• 

  edtech4beginners · Member · May 12, 2016 at 1:57 am

  • Copy link
  • Add topic to favorites

  Hi,

  My site looks great on a desktop but on a mobile device, the header is too close to the blog titles.

  Can a small gap be put in?

  Thanks

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

• 

  thesacredpath · Member · May 12, 2016 at 3:00 am

  • Copy link

  Hi there, the .site-header CSS rule you have with the margin 0 is what is causing the issue on smaller screens. Let’s use a Media Query to add some margin below 800px in width, which it appears is the point it becomes an issue. Add this to the very bottom of your custom CSS.

  @media screen and (max-width: 800px) {
  	.site-header {
  		margin-bottom: 40px;
  	}
  }

• 

  thesacredpath · Member · May 12, 2016 at 3:15 am

  • Copy link

  I should have also mentioned you can adjust the 40px value as desired.

• 

  edtech4beginners · Member · May 12, 2016 at 4:50 am

  • Copy link

  Thank you, worked perfectly! :)

• 

  thesacredpath · Member · May 12, 2016 at 6:29 pm

  • Copy link

  Great, and you are welcome.