I'm working with Foundation's 12-column grid and it is working as expected - I have the logo as a large-4 and medium-6 column, and then full 12 columns for small screen. Everything is great, except for when I rotate my iPhone to landscape orientation and the logo is then too big (tall) to fit in the screen, since it is still a "small" screen, so it takes up the entire width of the screen and thus is too big for the screen (since it is as tall as it is wide).
So my question is, what's the best way to fix this? If I use an orientation media query to make it smaller for landscape screens, then it is too small on a large landscape screen (such as a laptop or computer screen). Also if it is not the full 12 columns for the small screen size, then it is too small in portrait orientation on a mobile device.
Thanks.
(View full screen and resize or view on phone to see the problem.)
<!---->There's a couple ways you can address this... if you're going to have a bunch of things you think you'll want to customize for this you can add a custom breakpoint for that intermediate stage (see http://foundation.zurb.com/sites/docs/media-queries.html#sass-variables).
That said, if you just want to target this image in particular, it might well be sufficient to just put a max height on it, something like
#logo {
margin-bottom: 20px;
max-height: 50vh;
}