1

I am constructing a responsive website, and have designed it to look correct for desktop view.

I am currently tweaking it now for responsive breakpoints/media queries.

Here's the problem that I would like guidance on:

From my understanding, I've seen people only use width for their break points. In which case I did the same thing and make it look good on all the width break points.

However, I happened to be testing using the google chrome developer tool and started selecting specific devices (iphone 5, iphone 6, iphone 6 plus, ipad, etc.)

And noticed something alarming, which was that the elements was getting pushed off the screen vertically at the top and bottom because each of these devices not only have different widths, but HEIGHTS as well.

So the perfectionist in my is thinking about setting a media query for both height and width for every major device, but I realize that this work, although can be done, might not be the most efficient, and I have not seen other tutorials do this.

My specific question is: if there is a more efficient way to developing a responsive site without having elements go off the screen vertically.

Added information: I have a div that contains an img, then a h1 below it, then a bootstrap row with col-sm-6

The img width is in px (I experimented with vh/vw and %, but that seemed to make it more difficult to control when it scaled)

a72
  • 49
  • 3
  • a72, this question is already answered here.. http://stackoverflow.com/questions/11404744/media-queries-max-width-or-max-height – Leo the lion Nov 26 '15 at 05:23
  • read this question and answers and you will find the solution you are looking for. – Leo the lion Nov 26 '15 at 05:24
  • @leothelion Leo, thanks for the comment, but the question I have is not "can you do this". My question is "should I be doing this". Just because I can do something, doesn't mean I should be doing it. – a72 Nov 26 '15 at 05:26
  • m using bootstrap and media query from years and did not found any problem like you are saying in different different phone? if you will set the media query at width then it will control the height if you are not using any fixed height or it just depends on condition. It will be easier to explain if you will come with working demo where we can discuss more. Thanx – Leo the lion Nov 26 '15 at 05:30

1 Answers1

-3

You can not set media query for device height, You can set height only, And do not depend only in google chrome developer tool because sometimes it will not response in proper way, so you have to test in actual device for batter view.

Harsh Sanghani
  • 1,666
  • 1
  • 14
  • 32