adjusting website for mobile devices

[Luis Segovia]

Hello Bill, I want to make a site display the hero image on mobile devices without chopping the sides, or maybe just little is acceptable. Right now the site’s image is adjusted to fit the height of the screen, but I want the image to be adjusted to fit the length of the screen. thank you!

[Bill Robbins]

Good Morning Luis,

Great question there. It is possible to essentially “contain” the image so that all of it is visible on smaller screens. The trade off is there will be some empty space around the image since it will no longer fill the screen. If you’d like to see what that looks like, here’s what to do:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   @media only screen and (max-width: 520px) {
   	
   	.window {
   		background-size: contain;
   		background-repeat: no-repeat;
   	}
   
   }
   

3. Update your settings.

If you have any questions, just let me know.

Have a great week,
Bill

[Author]

Posts