Media Querries Breakpoints are colliding

Question

Fala galera!

I made a website for my portfolio and in it I had the following problem:

The site is done on one page only, so I had to adjust the sizes of the sections to the media querries.

I did everything using the "Responsive Layouts" from Google Chrome’s Webdev Tools.

For cell phones in portrait position, I kept 100vh as the height of each Section, but for cell phones in Landscape position, I had to increase to 120vh or 140vh, since the height of the viewport gets too small to support content.

The problem is, the width of the lying cell phone collides with the width of some standing cell phones. This is making sure that, for certain devices, I have a huge spare.

I’m SURE I’m making snot with the breakpoints. I’m a new dev and this is a part that breaks me a lot!

Someone knows how to give me some advice on how to fix this and good practice for the breakpoints of media querries not collide?

Entire code: https://github.com/lucasemg/porfolio Page: https://lucasemg.github.io/porfolio/

@media screen and (max-width:400px) /*celulares retrato*/
@media (min-width:400px) and (max-width:498px) /*celulares landscape*/
@media (min-width:498px) and (max-width:630px) /*Tablets Pequenos Retrato*/
@media (min-width:630px) and (max-width:818px) /*Tablets Pequenos Landscape*/
@media (min-width:818px) and (max-width: 1200px) /*Tablets Grandes*/



insira o código aqui

Answer 1

Look this is not an absolute answer, because you have to analyze applying in your document, but the way you are doing the @media can rather be optimized using orientation: portrait or orientation: landscape

The orientation CSS media Feature can be used to test the orientation of the viewport (or the page box, for paged media).

Mozilla Documentation on Screen Guidance: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

Here’s a basic example to help you treat these media queries. Here is an example for guidance portrait

@media only screen 
  and (min-width: 400px) 
  and (max-width: 498px)
  and (orientation: portrait) {

  /*seu css aqui*/

}

Another example for horizontal orientation

@media only screen 
  and (min-width: 498px) 
  and (max-width: 630px)
  and (orientation: landscape) {

  /*seu css aqui*/

}

This means that the 3 rules must be true to apply the CSS, the min-width, max-width and orientation should match @media for the CSS to apply. Here you can read more about this Use @media, @media screen and or @media only screen and Have some difference?

---

OBS: This feature does not match the orientation of the device. Opening the virtual keyboard on multiple devices in portrait orientation will make the preview window wider than high, causing the browser to use landscape styles instead of portrait.