Header Image on mobile devices

spirit1977

Hi, I've uploaded a header image. On my PC it looks great, but on my smartphone it looks a bit strange. Do you have any idea why?

Screenshot smartphone: https://www.dropbox.com/s/oyb0kg819yorvta/screenshot smartphone.png

Screentshot PC: https://www.dropbox.com/s/znx5yftm43qnoj7/screenshot pc.png

marius7

on mine it shows the "blue" background from the demo - but ONLY on the mobile version - I've tried to turn on the "Header without background image & padding" but that only seems to work on desktop version, not on mobile (I'm using an iPhone)

Albert

Hi guys,

@spirit1977 This is standard behavior. This line on header image comes probably from your image but to be sure we need url to your website so we can have a look on it.

@marius7 If you chosen "Minimalist header" option because you don`t want to show header image on pc or even on mobile devices, then you should use also below custom css but this will be fixed with next update:

body.minimalist-header:not(.template-slider) #Header { min-height: 0 !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

spirit1977

Hi, the url is www.vorsorgeausweis.ch and the password is abitur

Albert

Ok, we think below css should help you a lot

body:not(.template-slider):not(.header-simple) #Header { background-position: center top; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

spirit1977

Great. Thank you. I've added this to you css code from above and then it looks better on mobile devices

body:not(.template-slider):not(.header-simple) #Header {

min-height: 200px;

background-position: center 202px;

}