StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Sample Theme Trying to Get Header to Be Responsive

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

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

This topic is: resolved

Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 29, 2014 at 2:03 pm #102983
    jnine0712
    Member

    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
    April 29, 2014 at 3:41 pm #102999
    Lauren @ OnceCoupled
    Member

    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

    We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

    April 29, 2014 at 4:13 pm #103005
    jnine0712
    Member

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

    April 30, 2014 at 3:14 pm #103121
    jnine0712
    Member

    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?

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.