Need help for mobile theme to show full width header properly

lsr1984 · Member · Dec 10, 2014 at 6:37 pm
Copy link

Add topic to favorites
We have a full width header image that is not displaying properly on mobile devices: if enabled, the header image displays at 100% while the main content is only about 25%. Double-clicking in the text area forces it to full width, but then the header image disappears. If mobile theme is disabled, then the header doesn’t show at all.

A recent post
discussed a workaround but is apparently customized to the Arcade theme; we use the Misty Lake theme.

We’ve tried several different approaches to customize the CSS but have not yet succeeded. Any suggestions gratefully received.

Thanks.

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Dec 10, 2014 at 7:51 pm
Copy link
Without the mobile theme enabled your custom CSS is setting the site title link (the one that would contain your header image except the URL isn’t valid!) to be 900px wide. This is what’s causing the horizontal scroll bars at small screen sizes (below 600px).

You can use media queries in order to set this rule only for certain sizes, try something like:
```
@media screen and (min-width:600px) {
  .site-title a {
    CODE GOES HERE;
  }
}
```
lsr1984 · Member · Dec 10, 2014 at 9:44 pm
Copy link
Thanks, hallluke!

Your suggestion and a reading of the ‘media queries’ have helped resolved the formatting.

No items found.