Theme display issue on larger monitors (27-inch Mac)

[mark hefflinger]

Hi Bill,

In testing on different displays, I found that while things looked fine on MacBook, tablet and mobile screens, the images and theme aren’t displaying properly when viewed on a 21.5-inch or 27-inch desktop Mac screen.

Is there an optimum max size for images, or optimum size for the various panels to compensate for this issue? (Or some other solution?)

MacBook:
http://hefflinger.com/wp-content/uploads/2013/06/Bulldog-screenshot-MacBook.png

27-inch Mac:
http://hefflinger.com/wp-content/uploads/2013/06/Bulldog-screenshot-27inchMac.png

Many thanks!
mark

[Bill Robbins]

Mark,

Good question. Tricky situation too. Here’s what the theme does with the large images on the home page. They are set to cover how ever large the browser window is. So if the image is 1200 pixels wide and the browser window is 2000 pixels wide, the browser will have to scale the image up 800 pixels in order to have it fit. That will almost certainly affect the image quality in a bad way.

The opposite side of this dilemma is if you have large images, they’ll take longer to load and if they are really big, they may not load on a smartphone at all. I’ve had one customer use 8,000 pixel wide images that were around 9mb in size and they would not display on my iPhone.

One option would be to make the images around 2000 pixels wide. You’ll need to pay close attention to the JPEG quality to make sure they look good but the file size isn’t too large.

The other thing, you probably want to check your analytics data to see what size browser your visitors are using. On Organized Themes, about 4% of my visitors use browsers that are 2560 by 1440 or larger. So I do want to consider them, but it’s still a small minority. I don’t want to punish everyone with slower load times, just for them.

All that said, you can probably get a 2000 pixel wide image down to 250K or less which should be fine.

Let me know if you need any help.

Have a great week,
Bill

[mark hefflinger]

Hey Bill,

I upped the image size to 2000 px wide, but am still encountering the display issue with 2560×1440 screen resolution:

http://frenchbulldogomaha.com/wp-content/uploads/2013/08/Screen-Shot-2013-08-14-at-3.03.28-PM.png

Would I need to make the image at least 1440px in height, and then change the height of the pane to 1440px to fix this?

Is there any way to upload different sized images that are called by devices based on optimized resolution?

I ask because the overall size of the large image also seems to be making it less optimal for mobile-sized screens:

http://frenchbulldogomaha.com/wp-content/uploads/2013/08/iphoneFB.png

The logo is off-center because it actually is not in the exact center of the image — but, perhaps if the home page image itself was smaller, the full logo would appear on screen?

Thanks again for your assistance!
Mark

[Bill Robbins]

Mark,

It’s possible to build in a media query for different sized screens there. What you would need to do is go to the Appearance section and edit the page-home.php file.

You’ll find a repeating pattern of code for each block of the home page. At the end of each block is a section of code that looks like this:

			
div#one .picture-block {
	height: px;
	background-image: url(<?php echo of_get_option('section_image_1'); ?>);  
}		

You could edit that to incorporate different heights and images based on screen width. It would look something like this:

@media only screen and (min-width: 2000px) {

	div#one .picture-block {
		height: 1200px;
		background-image: url(https://yoursite.com/largest-image.png);  
	}

}

@media only screen and (min-width: 1400px) and (max-width: 1999px) {

	div#one .picture-block {
		height: 800px;
		background-image: url(https://yoursite.com/middle-image.png);  
	}
	
}

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

	div#one .picture-block {
		height: 500px;
		background-image: url(https://yoursite.com/small-image.png);  
	}
	
}

Each section that begins with @media here is a media query. It will display the styles inside its brackets when the conditions set in the query are met.

So the top one will be used when the browser window is 2000 pixels or larger. The next will be shown when the browser window is between 1400 pixels and 1999 pixels and the last will be show in 1399 pixels and smaller.

You would need to replace the URL to the background image for each query to match the image you’d like to have in the background there.

You can also change the height there to match.

If you need more queries you can use them. This will also keep browsers from downloading unnecessary files.

You can repeat that for each section in the home page too.

Hope that helps out,
Bill

[Author]

Posts