- This topic has 6 replies, 2 voices, and was last updated 9 years, 6 months ago by
.
-
Posts
-
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:
Link to your site ?
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]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
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 ]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!
@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 ]
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.