• 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 not 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.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Header Image not responsive

This topic is: resolved

Tagged: header image, responsive, site title

  • This topic has 4 replies, 2 voices, and was last updated 4 years, 1 month ago by Victor Font.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 31, 2019 at 12:17 am #489167
    UmpquaWeb
    Participant

    I wanted the header image to be larger than the 300px that is set in the theme, so I changed it to 500px. This works fine on a large screen, but it is not responsive. How can I fix this?

    https://atthewhitehouse.com/
    January 31, 2019 at 11:45 am #489179
    UmpquaWeb
    Participant

    I changed it back to 300px. I'm thinking that if I want the header image to be larger on larger screens, I need to utilize @media for smaller screens, but I'm not sure how to write that code. I'll keep looking for a solution.

    January 31, 2019 at 2:30 pm #489183
    Victor Font
    Moderator

    If you want to make the image scalable at all screen sizes, change the .header-image .title-area class and add a max-width to it and change the width to 100% at line 1376 in style.css:

    .header-image .title-area {
        margin: 0;
        max-width: 500px;
        width: 100%;
    } 

    Next do the same for the .header-image .site-title > a around line 1367:

    .header-image .site-title > a {
        background-position: center center !important;
        background-size: contain !important;
        float: left;
        min-height: 70px;
        max-width: 500px;
        width: 100%;
    } 

    As an FYI, I wouldn't have used a jpg for a text image. I would use a svg image. Using a SVG means the text will remain crystal clear at any size. Using the jpg will render the text fuzzy.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    January 31, 2019 at 4:20 pm #489185
    UmpquaWeb
    Participant

    The image was already a jpg, and not the quality I would have liked. Hopefully that will get changed out soon. I'm not sure how to even get an SVG image, but I'm hearing more and more that that is the way to go.

    Please help me with the logic behind using width 100%. Doesn't that mean it would still be 500px no matter what?

    Adding your code works great for cell phone and of course large screen. But I have a second monitor that is 19" and while the logo no longer overlaps the menu bar (the bar drops down), the logo and menu are not side by side. I would ideally like to make the image smaller so they do fit side by side. Is that unrealistic? Does it look weird?

    January 31, 2019 at 5:54 pm #489187
    Victor Font
    Moderator

    No, it would not be 500px all the time. Max-width basically means, it there's enough room use 500px max. If there's not enough room for 500px, then use whatever room you have. My setting the width to 100%, you're using all of the available space up to a maximum of 500px.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Header Image not responsive’ is closed to new 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