Doesn't display well on ipad

Hi there, Bushwick is a responsive theme, which means that its CSS code includes something called media queries. These control the site’s layout on different-sized devices.

If you like, you can adjust the “break points” (screen widths) of the media queries in this theme’s CSS code to tweak the viewport size at which the layout changes responsively for smaller screens, such as iPads.

You can learn more about using media queries that target certain screen sizes here:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Feel free to experiment until you get the effect you want.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You could also install a standalone custom CSS plugin, or create a child theme.

Another option is to use something other than a human figure as your main image. In this demo, for example, you can see that a landscape image looks pretty good on many differently sized devices:

https://bushwickdemo.wordpress.com/

Thanks … it’s vital I have the photo in there, not something that can be cut in half unfortunately.

Thanks for the link … I’ve tweaked the relevant bit and can now display the image on the left on ipads BUT the header text is now so large it splits over 3 lines. Is there any way to tweak that? I’m going to actually add text directly to the image (so it will resize automatically) but it would be good to know for future reference.

I’m all for sites being responsive so they display well on phones but think tablet screens are normally big enough to display pretty much everything as the full desktop version – really hacks me off when tablets revert to a mobile version. Sorry!

Good job on the responsive tweaks!

BUT the header text is now so large it splits over 3 lines. Is there any way to tweak that?

You could shrink the size of the site title only for certain screen sizes, by wrapping somem CSS in a media query in your child theme or custom CSS plugin.

Using the Firebug add-on for Firefox, I can see that the site title and site tagline have the following classes, which can then be targetted with CSS:

.site-title and .site-description

To reduce their size, you could try placing something like this within the appropriate media query for the screen sizes where you’d like to have the text smaller:

.site-title {
font-size: 30px;
}
.site-description {
font-size: 14px;
}

ok so i’ve noticed that while the image now site on the left on tablets, the navigation has disappeared completely! Had a loofd look round and can’t work out how to fix it. Such a shame as this is a fab theme but think I’m going to ahve to give up ??

No problem – customizing responsive CSS can definitely be tricky. If you decide to give it another go, feel free to post again and I’m glad to have another look.

Hi,

I’ve created a child theme from Bushwick, and I have a question about the iPad responsiveness.

Looking at the media queries in your style.css file, it looks as though I should basically be getting the same thing on desktop and landscape iPad (i.e. min-width: 1024px). And this is exactly what I do get when I test from my laptop using a responsive design bookmarklet (https://responsive.victorcoulon.fr/).

However, when I actually view on the iPad in landscape mode I get the ‘responsive’ version – i.e. the image takes up the full screen and you have to scroll down to see any content.

This happens with both my site (https://www.marthamclorinan.com/) and the Bushwick demo site. Tell me if I’ve just misunderstood something, but I’d really like the iPad landscape view to look the same as on a desktop.

Thanks!

A bookmarklet like the one you’ve referenced won’t really get a true device view.

The way the theme looks on an iPad directly is indeed the true responsive design setup for the theme. In order to change it, you would need to either remove the media queries from the theme (not recommended, be careful because they would get added back if you ever upgrade or reinstall the them) or you could add your own custom CSS to override all the media queries to turn them off. It would take some work. ??

I’m using Bushwick on one site of mine, and having issues with mobile phone users. Specifically, the menu (sidebar) that expands by pressing a floating button, does not scroll and so a phone user can’t access the entire list of menu items.

You can see it here from an iPhone:

https://iamsoylent.com

Any suggestions on how to make this menu scroll on a phone are appreciated.

tooltrainer – thanks for the report. I’m able to replicate the menu scrolling issue on iPhone 5 (iOS Simulator) and a real iPhone 4S, both in Safari. I’ll report it to our developers so they can take a look.

On second look, I don’t actually see any main menu items after Links on the desktop version of the site, and I’m able to scroll down to see Links on the iPhone, so I’m not clear on what’s missing below Links. Are there other menu items that aren’t live right now? Could you activate them so I can take a look?