• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

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

header image for Balance

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.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › header image for Balance

This topic is: not resolved

Tagged: background, Balance

  • This topic has 7 replies, 3 voices, and was last updated 7 years, 8 months ago by SavvyJackie.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 13, 2015 at 11:38 am #152018
    jlph
    Participant

    I am using a taller image than the default header image space for the theme. Default width is fine at 960, but the image height is 728 instead of default 135px. I changed the css code for min-height here, but of course it looks ok only on my laptop. Do I need to change every instance of header image height in the css for it to look right on mobile? Thanks!

    #header {
    margin: 0 auto;
    min-height: 728px;
    overflow: hidden;
    width: 960px;

    May 13, 2015 at 12:01 pm #152027
    SavvyJackie
    Member

    Hi,
    What theme are you using? Do you have a link you can share?

    You can use StudioPress http://www.studiopress.com/responsive/ design checker to see how it looks on different viewports.


    Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

    Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

    May 13, 2015 at 1:08 pm #152037
    jlph
    Participant

    Thanks for the response! I can't share the URL right now though. That site is interesting, and I did already check it on an iphone and ipad so I know it's not working. I just need to figure out what areas in the css I need to change the header image height to so it appears correctly everywhere, thanks!

    May 13, 2015 at 1:13 pm #152041
    SavvyJackie
    Member

    The @media queries sections at the bottom of the stylesheet is where to look.


    Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

    Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

    May 13, 2015 at 1:15 pm #152042
    emasai
    Participant

    A height of 728px is not great for SEO as all your content will fall beneath the fold. For mobile phones I would remove it completely, people checking web sites on their phone are looking for information not pretty pictures.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    May 13, 2015 at 1:25 pm #152046
    jlph
    Participant

    I totally agree with you on the fold problem, but that's just the way it's going to be for this particular site. Also, it works for the subject matter of the site, so it will be ok I think. : ) Thanks!

    May 13, 2015 at 2:24 pm #152062
    jlph
    Participant

    Thanks SavvyJackie! That's what I'm looking at but I can't find an element for the header image file itself to edit....or maybe I don't know what I'm looking for ha! Still trying...

    May 13, 2015 at 2:29 pm #152064
    SavvyJackie
    Member

    If you don't see then try adding a copy of it from in the main section, and adjusting the values. Remember each @media query section is in it's own set of brackets. The max-widths may be different on yours. Just be sure to keep your additions inside the section brackets.


    @media
    only screen and (max-width: 1139px) {

    }


    @media
    only screen and (max-width: 1023px) {

    }


    Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

    Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

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

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble