ipad twenty fourteen

When you say it doesn’t display “properly” on an iPad, what specifically isn’t displaying properly?

it is displayed as if it was on a mobile as oppose to a normal screen.

Well, an iPad is considered a mobile device, which is why, for example, the menu switches to a hamburger style menu on an iPad. Just about every responsive theme is going to have media queries with a breakpoint around the 768px mark, which is the width of an iPad’s viewport. Overriding the behavior in TwentyFourteen is not going to be easy. You would have to take a look at all the media query sections in TwentyFourteen’s style.css file, I think mostly in the section where min-width: 783px, and see what you want to move to another media query section.

Hi
Thank you for your reply, Being not very tech. Am I right in thinking that if the images were smaller that 783 it would look better? |Also does this happen with all wordpress sites? are all tablets the same or is this just ipads? I also dont understand why have a wordpress site that is not compatible to ipads. Any further help on this would be most appreciated. Thanks.

Hmm, OK, I just viewed your site on my phone, and it looks very different than my test site where I have Twenty Fourteen installed. Are you using some sort of plugin to display a mobile version of your web site? If I scroll all the way down to the bottom and click the View Full Site link, then I see what I expect to with Twenty Fourteen.

HI
Yes i am using a mobile version plugin. Its called WP Mobile Detector Mobile Plugin.

Is this causing the problem on ipads?

Well, it’s not really a problem, but again, it’s indicative of an iPad being considered a mobile device. As a side note, I’m not sure why you think you need a mobile plugin. Twenty Fourteen is a responsive theme and adapts according to the viewport size. If you were to click the View Full Site link down at the bottom, you’ll see how it looks on mobile devices.

As far as the “problem” goes, I take it you are referring to the extra white space to the side of your images. One solution, as it looks like you’ve discovered, is to float the image so the text flows around it. But in general, yes, if your images were to span across the entire width of the container, you would get rid of that extra white space. Another option is instead of setting a set pixel width for your images, to set a width using CSS of 100% so they will fill the width of the container, and then re-size automatically according to the container width.

Hi
Many thanks for your help on this. I have solved the problem and now it looks fine on ipads. Again thank you very much for your help.
Cheers
Rod