• 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

Help with Image sizing

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 › Help with Image sizing

This topic is: not resolved

Tagged: media query, retina logo

  • This topic has 6 replies, 2 voices, and was last updated 9 years, 6 months ago by Tom.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 22, 2015 at 10:01 am #174558
    rickycortez
    Member

    Hello, I'm hoping someone can help me with image sizing on high resolution displays (at least that's what I think the issue is). I am running Altitude Pro as my theme.

    As soon as I set up my theme, I realized that my company logo was not showing nicely on high density displays, so I added the following code to my CSS:

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and ( min--moz-device-pixel-ratio: 2),
    only screen and ( -o-min-device-pixel-ratio: 2/1),
    only screen and ( min-device-pixel-ratio: 2),
    only screen and ( min-resolution: 192dpi),
    only screen and ( min-resolution: 2dppx) {
    .header-image .site-title > a {
    float: left;
    min-height: 76px;
    width: 100%;
    background: url(images/[email protected]) no-repeat left top !important;
    background-size: 360px 76px !important;
    }
    }

    While the logo now looks sharp, I noticed that it doesn't fit on the display of my Galaxy S6 (and I'm guessing this may be happening with other devices). The logo is getting cut off. I was hoping someone could help get it to resize accordingly. The logo looks like this:

    December 22, 2015 at 11:44 am #174568
    Tom
    Participant

    Link to your site ?


    Choose your next site design from over 350 Genesis themes.
    [ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

    December 22, 2015 at 12:20 pm #174573
    rickycortez
    Member

    I currently have it in maintenance mode.

    I thought I had linked an image to show what it looks like but apparently that didn't work. That image is here: http://sigmalambdabeta.com/wp-content/uploads/2015/12/logosize_screenshot.png

    December 22, 2015 at 9:38 pm #174598
    Tom
    Participant

    Essentially, you've declared with your CSS snippet that the logo background image (for hi-dpi devices) will *always* be 360x76 pixels.

    The screen width on an S6 is effectively 360px, therefore your 360px wide image begins to be cropped.

    To make your @2x image work for smaller screens you need to add media queries that redefine those dimensions for those screen sizes. For example:

    @media only screen and (max-width: 320px) {
    
      /* Small screen, non-retina */
    
    .header-image .site-title > a {
    		background-size: 260px 62px !important;
    	}
    }

    See the example section on this page for more detail. (Note that the examples are for mobile-first setup -- Altitude is not.)


    Choose your next site design from over 350 Genesis themes.
    [ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

    December 23, 2015 at 10:37 am #174647
    rickycortez
    Member

    Tom, thank you for your help! I'm very new at using WordPress and I'm not as comfortable with Media Queries (or CSS for that matter). I tried your suggested code but it didn't work. The logo still cuts off on my mobile 🙁 - I appreciate your help!

    December 23, 2015 at 11:12 am #174652
    Tom
    Participant
    This reply has been marked as private.
    December 26, 2015 at 12:46 pm #174838
    Tom
    Participant

    @rickycortez - Looked at alternative methods ... try this code at the top of your media queries:

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)     ,
    only screen and (   min--moz-device-pixel-ratio: 2)     ,
    only screen and (     -o-min-device-pixel-ratio: 2/1)   ,
    only screen and (        min-device-pixel-ratio: 2)     ,
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx)  {
    
    	.header-image .site-title > a {
    	    float: left;
    	    width: 100%;
    	    background: url(http://<your-path-to>/wp-content/themes/altitude-pro/images/[email protected]) no-repeat left top !important;
    	    background-size: contain !important;
    	}
    }

    Choose your next site design from over 350 Genesis themes.
    [ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 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

© 2025 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