header

• 

  dandradiss · Member · Apr 11, 2017 at 12:26 pm

  • Copy link
  • Add topic to favorites

  my image on the header seems to be bigger than the header space, where can I change it?

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

• 

  otpidusprime · Member · Apr 11, 2017 at 3:01 pm

  • Copy link

  Hello @dandradiss,
  The image-size is set to cover in CSS, meaning that it will stretch to always fit the width of the browser/devices(tablets & mobiles), due to which the image is cropped by browser view-port. The focus is also on center when it is stretched.

  There are 3 ways to solve this:
  1. Change the image and add all your contents(texts) at the very center of the image. But it will not work on every device(resolutions).

  OR

  2. Change the background-size CSS property from cover to contain:

  .bg-image {
      background-size: contain;
  }

  This will ensure that the entire image is visible at all times(so there’s no cropping due to stretching). But, it adds empty spaces to either sides of the image. So you have to ensure that you upload a really wide image every time.

  OR

  3. Increase the height of the header area: (recommended)

  .header {
      padding: 150px 0;
  }

  Hope this helps :)

• 

  dandradiss · Member · Apr 11, 2017 at 6:58 pm

  • Copy link

  It did help. #3. Thanks a lot
  It still cuts it on the tablet and smart phone, anything to be done here?

• 

  otpidusprime · Member · Apr 11, 2017 at 8:16 pm

  • Copy link

  @dandradiss,
  Try focusing your text’s of the image away from the corners(and closer to the center). That will solve the issue :)

• 

  dandradiss · Member · Apr 13, 2017 at 8:50 am

  • Copy link

  Thanks a lot. Will do. Have a great day!

• 

  otpidusprime · Member · Apr 13, 2017 at 8:56 am

  • Copy link

  @dandradiss glad i could help.
  You h ave a great day too! :)

• 

  otpidusprime · Member · Apr 13, 2017 at 8:56 am

  • Copy link

  CORRECTION:
  have*