Hi there, could you provide a screenshot of what you’re seeing so I can have a look?
How to take a screenshot on an iPad
You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library, and provide a link so I can see it, or upload it with a service like Droplr or Imgur. Thanks!
Twenty Fourteen is a responsive theme, which means it adapts automatically to the browser’s screen size.
Macbook Air – 11′ – http://d.pr/i/4kxb
iPad Air Landscape – http://d.pr/i/9BPW
iPad Air Portrait – http://d.pr/i/yQyd
Kyvenko, why not try using Chrome for the ipad?
This will let you see the site as a desktop site instead of a mobile one.
That’s not really good advice. I don’t like Chrome, but it is not the reason. I don’t want to explain my visitors, that just use chrome instead, if you want good-looking website.
I think i have some logic behind that, right? 🙂
Thanks for the screenshots. As I mentioned earlier, Twenty Fourteen is a responsive theme which automatically displays content in different ways to optimize visitors’ viewing experience at various screen sizes.
If you’d like to tweak the display at particular device resolutions, you can experiment with creating a child theme – or add custom CSS – to modify the existing media queries. Media queries in the theme’s CSS control how the site is displayed at different screen resolutions.
To get started, you can study section 11.0 – Media Queries – in the theme’s style.css file, and try adapting some of those screen widths as you like.
You can learn more about using media queries that target certain screen sizes here:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Just a heads-up that the best way to make changes is either in a child theme or using a custom CSS plugin like Jetpack’s Custom CSS module or a standalone custom CSS plugin. If you don’t, all your changes will be overwritten the next time you update the theme.
I wanted to follow up on this, and possibly ask the same sort question in a different way. What’s bugging me about the iPad display is that I have three “featured” posts, which show up beautifully on the desktop (three across), and nicely on the iPhone (one over one over one), but clunkily on the iPad (two on top, one on the second row, and then that shaded ’empty’ slot).
This is actually my first WordPress site, but I’ve broken just about everything that can be broken in PHP and CSS. Before I go hacking at code here, though, is the right way to fix this to a) lessen the width of each of the featured posts in a CSS media query targeted for whatever screen width at which it goes to two featured posts per line or b) I actually wouldn’t mind, at that particular resolution, dropping to two featured posts, rather than three. I assume that’d be PHP code somewhere.
Thoughts? Thanks!
-steve
Hi Steve, those types of changes would require some substantial tweaking of the code and knowledge of responsive design. You could always start a new thread for it and see if anyone has time to give you a hand with the customizations, or it’s the type of work you might want to hire a developer to handle.
