Need help for header image in mobile view

ilamie · Member · Aug 31, 2017 at 10:02 pm
Copy link

Add topic to favorites
Hi. I need some help fixing my header image in mobile view. I followed the recommended dimensions when I uploaded it. But it seems the header image is not responsive when viewing from a mobile device. It’s fixed and enlarged, so it is halfway hidden in the menu navigation bar on mobile.

I even tried to adjust the dimensions hoping this trick would work by reducing the image and pushing the object inside the image (my site’s title) a little higher. But it also didn’t work.

I’m using the Snaps theme, btw.

Also, if it’s possible to fix it through CSS I’d appreciate any possible tricks as the header image really looks useless on mobile coz it’s not readable.

I’d appreciate any help. Thanks in advance.

The blog I need help with is: (visible only to logged in users)
jojagiello · Member · Sep 1, 2017 at 9:48 am
Copy link
I’m having the same problem – but it used to be fine! But now ads appear over the header too so I wonder if this theme is just bust on mobile view now.
kathrynwp · Staff · Sep 1, 2017 at 8:25 pm
Copy link
ilamie – this custom CSS should make your header look better on small devices:
```
@media screen and ( max-width: 800px ) {
  #masthead.site-header {
      background-size: contain; 
    }
}
```
jojagiello – I don’t see a header image on the primary site connected to this account. Could you please start a new thread and provide a link to the site in question so we can help you more easily? Thanks.
ilamie · Member · Sep 1, 2017 at 9:54 pm
Copy link
Hi, Kathryn. Thanks! The header image looked good except for the wide black background/border between the image and navigation. Is it possible to reduce the space between the image and the navigation? Or at least make it white or transparent?
thesacredpath · Member · Sep 1, 2017 at 10:31 pm
Copy link
Hi @ilamie, let’s try a variation on the code Kathryn gave above.
```
@media screen and ( max-width: 800px ) {
 #masthead.site-header {
  background-size: auto 100%;
 }
}
```
ilamie · Member · Sep 2, 2017 at 6:30 am
Copy link
Thesacredpath: Yes, it worked. Thank you so much!
kathrynwp · Staff · Sep 4, 2017 at 3:12 pm
Copy link
Super! Glad you’re set. I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.

No items found.