Banner cut on mobile

• 

  kzdigital · Member · Aug 13, 2016 at 1:52 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I have used Edin theme and what happened is banner on home page is not showing fully on different devices. How can I override this?

  Please help!

  This is website: http://garethbensongolf.co.uk/

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

• 

  hallluke · Member · Aug 13, 2016 at 8:36 pm

  • Copy link

  Try something like this which sets a few different heights for the image area depending on what size screen the site is being viewed on:

  .hero {
  	padding: 40px 0;
  }
  @media screen and (min-width:600px) {
  	.hero {
  		padding: 80px 0;
  	}
  }
  @media screen and (min-width:768px) {
  	.hero {
  		padding: 110px 0;
  	}
  }

• 

  kzdigital · Member · Aug 14, 2016 at 7:39 pm

  • Copy link

  Thank you so much!

  It’s still a little bit cut on Iphone but I think I can live with it!

  Much appreciated!

• 

  hallluke · Member · Aug 15, 2016 at 7:01 am

  • Copy link

  You can adjust the values a bit, or even add in another block beginning with @media and change the padding and width until you get something that works.