Help with Image sizing

[rickycortez]

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:

[Tom]

Link to your site ?

---

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

[rickycortez]

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

[Tom]

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 ]

[rickycortez]

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!

[Tom]

This reply has been marked as private.

[Tom]

@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