Support » Theme: Seos Business » Only half of header visible on mobile devices

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi there!

    First of all, a quick suggestion: don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    For your issue, I’d recommend the CSS approach. Here’s a code snippet that should adjust the header image so it looks better:

    #header-img {
        background-size: contain;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }

    I’ve resorted to using some !important flags here because there’s some inline styling on the header element. Generally speaking, this isn’t great practise—the ideal solution would be to remove any inline styles, then use the code above without any !important flags. 🙂

    Cheers!

    Thank you for your help. I’ve used your suggestion and the whole header still doesn’t fit on the mobile device (although it is better than it was – now it’s just cut-off partially.

    I’m sure there must be something I’m missing. The background image below the header image (and the call to action button) are not showing completely either. I’m about ready to try another theme, but I really thought this one looked good. (I switched to this theme from the Sydney theme because of problems with the header slider.)

    I’ve scoured the web looking for a solution, but so far nothing is working.

    http://www.djbigcountry.com/

    It doesn’t look as though the CSS code above has been applied to your site—this should solve the issue for you. 🙂 How are you adding the CSS to your site?

    I’ve made a screenshot of the code working on your site here: https://cloudup.com/cNsSTdXGWLE

    The missing “book now” button is another issue altogether, but I fixed it using the following CSS:

    .seos-business-home-slider img {
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    See here: https://cloudup.com/ce9ij-pfSx0 for screenshot.

    If you’re finding the theme you’re using is requiring a lot of extra modifications and has bugs out of the box, you may want to experiment with different themes until you find one that’s a bit easier to work with. 🙂

    Thanks. I had put the code in the custom CSS area.

    I tried quite a few solutions after that one didn’t work (correction – it partially worked, but was still partially cut off on my tablet), so it may not have still been in there, but I will try again now.

    If it doesn’t work, I’ll just try another theme. I spent weeks customizing the Sydney theme and then just couldn’t get the banner right and the loading time was too much, so I switched to this one. Which seemed so much simpler, until I discovered the mobile issue.

    I’ll give it another go and update whether or not it worked.

    Thanks again for your assistance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Only half of header visible on mobile devices’ is closed to new replies.