• 0

Featured Image truncated on iPad


Question

Posted · Report post

Hi,

 

Our website http://www.rootstock.com/ truncates the home page feature slider images when viewed on an iPad, but looks perfect on standard PC/laptop.

 

You can see a screenshot of the iPad at http://www.davidcosgrovesandbox.com/ipad.jpg

 

We are hosting on WP Engine, using the latest WP and PageLines theme.

 

Here is a screenshot of the Page Options Features panel - http://www.davidcosgrovesandbox.com/options.jpg

 

Thanks for your help.

 

Dave

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

Hi Dave,

 

I'm afraid the problem is that your graphic is wider than the iPad browser allows.  Often, browsers will crop images.  It's not Framework doing that.

 

But, that said, there are solutions.

1.  Resize your image and add some background color on either side so that what is cropped is simply empty space.  This is a best practice for slides with text in the graphics.  Simply open the image in your normal graphics editor, resize it down and add some background color to either side.

2.  Use the Browser-Specific CSS plugin and re-size the slider for that browser only.  This will give you more info. http://support.pagelines.me/docs/plugins/browser-specific-css/   You'll find that if your CSS skills are good, you can accomplish this quickly.

3.  Change the size from static to aspect ratio (static is not responsive, while aspect ratio is).  There are some drawbacks to this, but it's easy to change, and worth a try.   You can learn more about aspect ratio here: http://support.pagelines.me/docs/sections/features/

 

I hope one of these solutions work for you. Please let us know.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob,

 

Thank you very much for your help - I have been tinkering with the aspect ratio option, and I am hoping that with some adjustments I can get it to work.

 

Here is one of the feature images, which is 1070x300 - http://www.rootstock.com/wp-content/uploads/2013/07/banner-05.jpg

 

I used this online aspect ratio calculator http://andrew.hedges.name/experiments/aspect_ratio/

 

It said the aspect ratio was 107:30 which translates into 3.566 - so I plugged 3.566 into the Aspect Mode box and set height mode to Aspect Height - the features look exactly the same on my laptop and PC as they did with fixed height, but they do not seem to have changed at all for the iPad - am I missing a step or doing something incorrect?

 

Thanks again for your help.

 

Dave

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob,

 

It's now working perfectly fine - caches needed to be cleared.  The featured images now are scaling on the iPad, iPhone, Samsung Galaxy tablet, etc. etc.

 

Thanks again for your help!

 

Dave

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Excellent news!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now