redirect home page to mobile page

[Salena Knight]

Hi Bill,
I thought I stumbled across an option to have a separate page for mobile, but can’t seem to re-find it.

I have a small issue with my home page picture needing to be completely centred, or else it gets cut off when viewed on a mobile device. Ideally I’d like to have a picture slightly off centre, so is it possible to either
a) redirect the home page to a different page (where my image will be centred for the specific mobile market)

or b) change the way the image is shown on a mobile device, so that it shows the whole image, rather than a scaled image?

Thanks again for all your help. I always recommend your site for themes, specifically because of your support.

[Bill Robbins]

Good Morning Salena,

I really thought I had an option in the hero section for each page to upload a separate mobile image. I’ll definitely add that in the next update to keep it in line with our other themes.

Until then the best option is to simply switch out the hero image for a different one on smaller screen sizes. Here’s how to do that:

1. Go to the Media Section in your WordPress dashboard and select Add New. Upload the image you’d like to use. Once the upload is complete, click on the edit link. Look on the right hand side of the screen that opens up for the File URL. We’ll need that in just a minute.
2. Go to your theme options page and choose the Advanced tab.
3. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 767px) {
   
   	.home #hero-section {
   		background-image: urlhttp://yoursite.com/image.jpg);
   	}
   
   }
   

4. Replace the http://yoursite.com/image.jpg with the URL you copied earlier.
5. Update your settings.

That will replace your hero image on screens that are 767 pixels wide or smaller. You can change the point at which that happens by making the 767px in the snippet above larger or smaller. At the present time 768px is the width of an iPad in portrait orientation.

For the mobile image, you’ll really want to have everything important centered in the image to keep it from being cut out easily.

Take care,
Bill

[Author]

Posts