Geek Answers Handbook

Simple Media request rules change when page refreshes

I have a strange problem. The media query rules in my CSS trigger have a certain width, as intended, however, if I have already resized the browser window to a smaller width, and then expand the browser window outside, something strange will happen. Things seem normal until I refresh the page. The layout changes unexpectedly only when the page is refreshed. Of course, the goal is that media queries behave normally, as when refreshing a page, should not change any rules.

I tried to recreate the problem using bare bones:

//CSS media queries added to style tag here to prevent scrolling in other code blocks var style = document.getElementsByTagName('style')[ 0 ]; style.innerHTML += ' \ @media( max-width: 550px ) { \ body { \ background-color: #ddd; \ transition: 1s; \ } \ main { \ height: auto; \ text-align: center; \ } \ .circle, .about-container { \ float: none; \ } \ .circle { \ display: inline-block; \ transform: translateY( 0 ); \ } \ .about-container { \ margin: 0 auto; \ text-align: left; \ } \ } \ @media( min-width: 551px ) { \ .circle { \ transform: translateY( 0 ); \ } \ } \ '; 
 /* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */ * { box-sizing: border-box; } main { max-width: 600px; height: 11rem; margin: 0 auto; padding-top: 10px; font-size: 0.8rem; text-align: left; } .circle { width: 100px; height: 100px; background-color: #444; border-radius: 50%; float: left; top: calc( 50% - 10px ); } .about-container { width: 75%; float: right; } body button { display: block; margin: 0 auto; padding: 8px; } 
 <head> <style> /* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */ @import url('https://necolas.imtqy.com/normalize.css/latest/normalize.css'); .clearfix:after { content: ""; display: block; clear: both; } .vertically-center { position: relative; top: 50%; transform: translateY( -50% ); } </style> </head> <body> <main class="clearfix"> <div class="circle vertically-center"></div> <div class="about-container"> <h3>About</h3> <p> This problem is wierd. When <strong>snippet is made full screen</strong> and browser width is shrunk to less than <strong>550px</strong> <em> ( You will know you're at 550px because the background will darken )</em> the layout changes - as expected. However when window is expanded beyond 550px again and <strong>Reload Frame</strong> is clicked the layout unexpectedly updates itself. <br><br>What going on? </p> </div> </main> <button onclick="location.reload()">Reload Frame</button> </body>

Although strange, I feel this is a simple solution, hope?

Edit: I see these results in the Chrome browser. A GIF will be loaded, which demonstrates what I see below.

enter image description here

+7
css google-chrome media-queries css-float
source share
4 answers

Thus, thanks to previous answers, indicating that it was a browser quirk in chrome. However, none of the solutions is as simple as it could be. I found that the key issue was display: inline-block as part of the @media( max-width: 550px ) media query @media( max-width: 550px ) . I removed this, changed it to display: block and added margin: 0 auto to include the circle in that it no longer affects the text-align: center rule on it parent. This solves the problem in the easiest way for me. Here is a snippet:

 //CSS media queries added to style tag here to prevent scrolling in other code blocks var style = document.getElementsByTagName('style')[ 0 ]; style.innerHTML += ' \ @media( max-width: 550px ) { \ body { \ background-color: #ddd; \ transition: 1s; \ } \ main { \ height: auto; \ text-align: center; \ } \ .circle, .about-container { \ float: none; \ } \ .circle { \ display: block; /* changed display: inline-block to display: block */ \ margin: 0 auto; /* added this line to recenter the circle */ \ transform: translateY( 0 ); \ } \ .about-container { \ margin: 0 auto; \ text-align: left; \ } \ } \ @media( min-width: 551px ) { \ .circle { \ transform: translateY( 0 ); \ } \ } \ '; 
 /* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */ * { box-sizing: border-box; } main { max-width: 600px; height: 11rem; margin: 0 auto; padding-top: 10px; font-size: 0.8rem; text-align: left; } .circle { width: 100px; height: 100px; background-color: #444; border-radius: 50%; float: left; top: calc( 50% - 10px ); } .about-container { width: 75%; float: right; } body button { display: block; margin: 0 auto; padding: 8px; } 
 <head> <style> /* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */ @import url('https://necolas.imtqy.com/normalize.css/latest/normalize.css'); .clearfix:after { content: ""; display: block; clear: both; } .vertically-center { position: relative; top: 50%; transform: translateY( -50% ); } </style> </head> <body> <main class="clearfix"> <div class="circle vertically-center"></div> <div class="about-container"> <h3>About</h3> <p> This problem is wierd. When <strong>snippet is made full screen</strong> and browser width is shrunk to less than <strong>550px</strong> <em> ( You will know you're at 550px because the background will darken )</em> the layout changes - as expected. However when window is expanded beyond 550px again and <strong>Reload Frame</strong> is clicked the layout unexpectedly updates itself. <br><br>What going on? </p> </div> </main> <button onclick="location.reload()">Reload Frame</button> </body>

enter image description here

0
source share

It looks like Chrome has issues with elements that float, position, and translate at the same time. Again, this is a flaw in Chrome, not in your code.
One way to do this is to use not positioning, but only translation to move the circle.

 //CSS media queries added to style tag here to prevent scrolling in other code blocks var style = document.getElementsByTagName('style')[ 0 ]; style.innerHTML += ' \ @media( max-width: 550px ) { \ body { \ background-color: #ddd; \ } \ main { \ height: auto; \ text-align: center; \ } \ .circle, .about-container { \ float: none; \ } \ .circle { \ display: inline-block; \ transform: translateY(-40%); /* changed a bit to compensate */ \ } \ .about-container { \ margin: 0 auto; \ text-align: left; \ } \ } \ '; 
 /* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */ body { transition: 0.25s; } main { max-width: 600px; margin: 0 auto; height: 11rem; padding-top: 10px; font-size: 0.8rem; text-align: left; } .circle { height: 100px; width: 100px; background-color: #444; border-radius: 50%; float: left; } /* this was moved here */ .vertically-center { transform: translateY(40%); } .about-container { width: 75%; float: right; } body button { display: block; margin: 0 auto; padding: 8px; } 
 <head> <style> /* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */ @import url('https://necolas.imtqy.com/normalize.css/latest/normalize.css'); * { box-sizing: border-box; } .clearfix:after { content: ""; display: block; clear: both; } /* moved the .vertically-center bit to before the media query */ </style> </head> <body> <main class="clearfix"> <div class="circle vertically-center"></div> <div class="about-container"> <h3>About</h3> <p> This problem is pretty wierd. When you <strong>make this snippet full screen</strong> and try shrinking the browser width to less than <strong>550px</strong> <em>( You will know you're at 550px because the background will darken )</em> the layout changes - Which is expected. However when you expand the window beyond 550px again and click <strong>Reload Frame</strong> the current layout unexpectedly updates itself. <br><br>What going on? </p> </div> </main> <button onclick="location.reload()">Reload Frame</button> </body>

But as others have shown, there are more solutions. Take your pick!

+3
source share

Solution: A simple solution is to add margin-top:11% to div.vertically-center , after which the circle returns to its original state after resizing the window back !: D

And to fix the CSS problem, there are many fixes that you can even fix by simply adding some html elements along with the css code or simply changing the current css and not adding any elements. So this is you, which one then follow.

BEST WAY TO USE THIS: Since I checked that margin-top:11% corrupt in Firefox style, you can use the following two ways to just apply it to Chrome only as:

1) Solution for Chrome JavaScript:

 if (navigator.appVersion.indexOf("Chrome/") != -1) { document.getElementById("vertically-center").style.marginTop = "11%"; }

2) Chrome CSS Solution:

 /* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { .vertically-center { margin-top:11%; } } /* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { .selector {-chrome-:only(; property:value; );} }
+1
source share

update code try this run code

 <div class="circlemain"> <div class="circle vertically-center"></div> </div> .circlemain { top: 50%; position: relative; } @media( max-width: 550px ) { .vertically-center { position: relative; transform: translateY( 0% ) !important; top: 50%; } 

 //CSS media queries added to style tag here to prevent scrolling in other code blocks var style = document.getElementsByTagName('style')[ 0 ]; style.innerHTML += ' \ @media( max-width: 550px ) { \ body { \ background-color: #ddd; \ } \ main { \ height: auto; \ text-align: center; \ } \ .circle, .about-container { \ float: none; \ } \ .circle { \ display: inline-block; \ transform: translateY( 0 ); \ } \ .about-container { \ margin: 0 auto; \ text-align: left; \ } \ } \ @media( min-width: 551px ) { \ .circle { \ transform: translateY( 0 ); \ } \ } \ '; 
 /* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */ main { max-width: 600px; margin: 0 auto; height: 11rem; padding-top: 10px; font-size: 0.8rem; text-align: left; } .circlemain { top: 50%; position: relative; } .circle { height: 100px; width: 100px; background-color: #444; border-radius: 50%; float: left; top: calc( 50% - 10px ); } .about-container { width: 75%; float: right; } body button { display: block; margin: 0 auto; padding: 8px; } @media( max-width: 550px ) { .vertically-center { position: relative; transform: translateY( 0% ) !important; top: 50%; } } 
 <head> <style> /* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */ @import url('https://necolas.imtqy.com/normalize.css/latest/normalize.css'); * { box-sizing: border-box; } .clearfix:after { content: ""; display: block; clear: both; } .vertically-center { position: relative; top: 50%; transform: translateY( -50% ); } </style> </head> <body> <main class="clearfix"> <div class="circlemain"> <div class="circle vertically-center"></div> </div> <div class="about-container"> <h3>About</h3> <p> This problem is pretty wierd. When you <strong>make this snippet full screen</strong> and try shrinking the browser width to less than <strong>550px</strong> <em>( You will know you're at 550px because the background will darken )</em> the layout changes - Which is expected. However when you expand the window beyond 550px again and click <strong>Reload Frame</strong> the current layout unexpectedly updates itself. <br><br>What going on? </p> </div> </main> <button onclick="location.reload()">Reload Frame</button> </body>
0
source share

More articles:


All Articles