Header cropping in mobile (CSS needed?)

• 

  thetimeladies · Member · Oct 21, 2017 at 9:50 pm

  • Copy link
  • Add topic to favorites

  Hi all,

  My theme is responsive (which is great) but it crops my header far too much when on mobile.

  How can I change this or which code is best to concentrate on the header in mobile view only? Unsure of where to start…

  Many thanks,
  Kezia

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

• 

  tryptc · Member · Oct 23, 2017 at 12:15 pm

  • Copy link

  Hi thetimeladies,

  I would be happy to assist you! Cropping of the header image will occur in most responsive design themes. There are a few things that you could do to change the header size and crop on your site:

  1. Edit and crop your image so that it looks good on the mobile view of your site first. It looks like you would have to shrink your header down slightly, then make it slightly wider and taller to fill a full size screen. (This is what I recommend, as it is the simplest solution)
  2. Use custom media queries to adjust your image for a specific screen size: https://en.support.wordpress.com/custom-design/custom-css-media-queries/
     The WordPress CSS Forums are a great place to look for CSS specific help

  I hope that helps! :-) Let me know if you need further assistance!