[Grid] Rules aren’t getting applied in 1px gaps between media-queries

[Moataz-Hammous]

Hello we have faced issue related to transition between media queries as 767px 991px 1199px & 1919px as these media queries not applied so if we use mobile only, not applied all wide size for these queries not applied. we have used workaround found in following website: http://damienclarke.me/code/posts/those-1px-gaps-between-media-queries-can-be-a-problem but we guess it should be handled in semantic media queries

[awgv]

Just to clarify the issue, please see this Codepen to understand it better. In it, headers are different divs that are shown on different screen sizes, so, say, “Large size” header will only be shown on screens that are higher than ≥1200px. Zoom in to 125% and slowly resize the window until you see the issue of them being shown at the same time regardless of the rules:

Personally, I think it’s absolutely irrelevant; let’s keep it opened until there’s a conclusive decision.

[andjd]

We are noticing a similar problem as well with the Container element, when the screen has a width that is a fractional pixel between two sizes (e.g. 767.5), none of the container styles apply. Similar problems appear elsewhere where media queries are used. This should be an easy fix, just change the 'gap' between sizes to a small fraction of a pixel.

[a8568730]

Our team have faced the 1-pixel-gap problem, too. We use semantic-ui@2.2.11, and the media rules is below:

@media only screen and (max-width:1199px) and (min-width:1000px){
  .ui.container{width:920px;}
 }
@media only screen and (min-width:1200px){
  .ui.container{width:1127px;margin-left:auto!important;margin-right:auto!important} 
}  

We found the problem when zoom in at 150%. When html width reaches 1199.33px, the ui container won't take any styles of above.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.