Sample Theme Trying to Get Header to Be Responsive

Community Forums Forums Design Tips and Tricks Sample Theme Trying to Get Header to Be Responsive

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  jnine0712 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #102983

    jnine0712
    Member
    Post count: 7

    I am designing a new WordPress blog using the Sample Theme. The site looks great, but the one issue I am having is having the header image get cutoff on mobile devices, such as the iPad and iPhone. I have seen a few tutorials and tried a few work arounds I am familiar with, but nothing seems to work. Any help would be appreciated it at: http://223.6f1.myftpupload.com. (temporary URL I have been designing the site on).

    http://223.6f1.myftpupload.com
    #102999

    Lauren @ OnceCoupled
    Member
    Post count: 513

    Why do you have !important declared on your #header background? It doesn’t seem as if it is necessary to me. If you remove that, you can specify your background size.

    #header {
         background-size: contain;
    }

    You’ll need to make some media queries to adjust the height of that area.
    :)

    Best,
    Lauren


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #103005

    jnine0712
    Member
    Post count: 7

    I don’t even know where I have !important and can’t seem to find it in the CSS code to be honest.

    #103121

    jnine0712
    Member
    Post count: 7

    Ok, I got this working, but now on the iPhone and iPad, there is a lot of padding on the bottom of the image, I have tried adding CSS code, but still no luck? Anyone help on this, please?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.