Mobile Rendering

[kevin davies]

Hi bill,

The site looks great on PC, MAC and iPad but doesnt quite come together on iPhone. Is there something I can do to put it right?

Maybe my images are too big? Can you help at all?

Hope you are well.

Thanks,
Kev

[Bill Robbins]

Hello Kev,

Sorry for the trouble there. I think it’s the height on the Home Box that’s causing the trouble. Let’s give this a try and see if it won’t keep them from overflowing everything:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media screen and (max-width: 768px) {
   
   	.image-holder {
   		height: 200px;
   	}
   
   	.organizedthemes-home-box {
   		height: auto;
   	}
   	
   	.hero-title-holder h2.hero-title {
   		font-size: 28px;
   	}
   	
   	#hero-section .hero-caption p {
   		font-size: 16px;
   	}
   	
   	.home-widgets .attention-block {
   		padding: 0;
   	}
   
   }
   

3. Update your settings.

That also makes the hero title and caption a bit smaller and takes out the padding on the attention block on smaller sizes. You might also set the background of the section with the attention block so it doesn’t repeat.

Let me know how that goes,
Bill

[kevin davies]

As always, you got it! Thanks again bill. Wonderful theme.

Kevin

[Bill Robbins]

Fantastic. Great looking site you have there. Really good work.

[Author]

Posts