I have a Chrome-only problem with my Bootstrap (v3.3.5) layout css at exactly 767px where the layout styles simply aren't being applied.
Here's the behaviour after experimenting with the console on 3 browsers...
Chrome
-window.innerWidth of <= 766 - correctly shows mobile layout
-window.innerWidth of == 767 - incorrectly applies no layout styles
-window.innerWidth of >= 768 - correctly shows full screen layout
Firefox
-window.innerWidth of <=766 and ==767 - correctly shows mobile layout
-window.innerWidth of >=768 - correctly shows full screen layout
Safari
-behaves fine although window.innerWidth doesn't correctly correspond to the breakpoints (perhaps something to do with Safari not accounting for scrollbars in the same way)
All my media queries have been created as follows...
#media (max-width: 767px) {
/*small view*/
}
#media (min-width: 768px) {
/*full view*/
}
I've experimented changing these values so there's an overlap (e.g. a min-width of 767px) but it has no effect.
Apologies if this is a little vague, but I don't really know where to go from here in investigating the problem and have found only one report of similar behaviour from a previous version of bootstrap (https://github.com/twbs/bootstrap/issues/1531).
Does anyone know of any possible reason that I'd be seeing this on Chrome only? Either way, any advice on an appropriate way to investigate would be very much appreciated.
-- EDIT --
After hours of research I tested this simple file...
<html>
<head>
<style>
#media (max-width: 767px) {
.headlineText {
font-size: 10px;
color: red;
}
}
#media (min-width: 768px) {
.headlineText {
font-size: 10px;
color: green;
}
}
</style>
</head>
<body>
<h1 class="headlineText">this is a headline</h1>
</body>
</html>
On Chrome only - at 767px the text is neither green or red - it's black, Times New Roman, and considerably bigger than 10px. Of course I can't replicate this by uploading to a fiddle/codepen - so it must be something to do with the fact I'm running on a localhost (via MAMP). Absolutely zero ideas why that would be the case, but at least it doesn't seem to be something that will affect me in a live environment
Chrome (for me version 89.0.4389.82 on Win10) seems to work with fraction of pixels. Hence, increasing all lower breakpoint thresholds by .9px solved the issue for me. So for example
max-width :767px needs to become max-width :767.9px
Make this full screen and resize your window. It works for me in Chrome and has no display of "does not work" in between.
.works {
display: none;
}
.does-not-work {
display: block;
}
#media(max-width:767px){
.works {
display: block;
}
.works::before {
content: 'max-width: 767px | ';
}
.does-not-work {
display: none;
}
}
#media(min-width:768px){
.works {
display: block;
}
.works::before {
content: 'min-width: 768px | ';
}
.does-not-work {
display: none;
}
}
<span class="works">works</span>
<span class="does-not-work">does not work</span>
Side note, based on comments: About a year ago I had the same issue with a huge website. Result of a team of 6's work of nearly two years. Bits of code pouring in from all sides. I was the one gluing front-end together, making sure it all worked. You can imagine #media queries were a mess. I only got rid of the bug by refactoring all queries using mobile first principle - I grouped all #media's using Bootstrap's exact order. Fixed it for me. To this day I don't know what caused it. It was (slightly) broken on (exactly) 768px and 992px before.
Related
I created a website where I used rem unit for measurement across the stylesheet for every element, so that when I needed to make it mobile responsive, I just had to reduce the root font size and everything else would scale down accordingly. One problem I encountered here is that iOS/Safari does not follow the styles exactly as it should be. The width and height of elements are a little larger than they should be in iOS, resulting in content being pushed out of the viewport. This is not the case with android, everything scales down properly there. I'm not using Bootstrap or any other framework, just plain CSS(SCSS).
For comparison, here are some screenshots on both android and iOS-
Comparison 1- Android and iOS
Comparison 2- Android and iOS
Also to be noted, layout doesn't break until and below 245px width, while the iPhone here was iPhone XS Max which has width over 400px I believe, so its definitely not because of smaller screen this is happening, its something else.
The root font size at various stages is defined like this-
html {
font-size: 62.5%;
}
#media(max-width: 900px) {
html {
font-size: 55%;
}
}
#media(max-width: 660px) {
html {
font-size: 45%;
}
}
#media(max-width: 500px) {
html {
font-size: 35%;
}
}
#media(max-width: 380px) {
html {
font-size: 30%;
}
}
So, is there any way I can fix this?
Thanks in advance :)
So this question seems to be asked a lot but in the reverse.. I'm having the issue where my media query is overriding the previously set styles in a mobile first design and I don't know why. Mobile should be padding: 33rem 0 and desktop should be padding: 18rem. See below.
.description {
background-image: linear-gradient(#b676fa,#14D8EB);
padding: 33rem 0;
}
#media only screen and (min-width: 900px) {
.description {
padding: 18rem;
}
}
Works fine for me.. All brackets closed? Run it through a CSS validator perhaps - https://codepen.io/pmackey-deveire/pen/vYBvxQz
Have you checked the inspector to see what styles are being applied as you change the window size?
Perhaps using PX instead of REM for testing.. 33rem appears to be smaller than 18rem on mobile so you might be tricked into thinking it's not working
I installed a plug-in called Display-listings-shortcode, and added the columns-extension to allow for columns the blogs halfway down the homepage at RitaNaomi.com will be horizontally displayed on a web browser. It looked whacky at first with titles being scrunched beside and underneath the image, but eventually i figured out how to edit the .display-posts-listing class to change the display
.display-posts-listing .listing-item {padding-bottom:30;}
.listing-item
{
float:left;
width:22%;
margin: 40px
}
But when I look at it on a mobile device, they're all scrunched together as if it was still being displayed on a laptop. I want to have it listed vertically and not horizontally, because thats the way it would fit best.
I tried (and it didn't work) to use #media to change it through the css, but it didn't work.
#media handheld {
.display-posts-listing .listing-item {
clear: both;
display: block;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
}
You shouldn't be using #media handheld {} since it's been deprecated according to MDN.
You're better off targeting pixel-width values. You may need a couple queries, and some of the oldschool standards were 1023px, 767px. Feel free to replace the 900px below with whatever works for you.
#media only screen and ( max-width: 900px ){
.display-posts-listing .listing-item {
/* CSS Here */
}
}
Removed the custom CSS that was already added from the original theme. It was interfering with the Columns display.
Not using #media handheld {} because it was deprecated (thanks to xhynk for the response), and instead used the command (max-width: 768) , the point at which the title and image css look funky.
To make the title display on its own line on a bigger screen, i added this to my CSS:
.display-posts-listing .listing-item .title { display: block; }
And now i'm using the above media query to figure out how to style it on smaller devices.
Complete CSS: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a
Created a responsive site in Dreamweaver CS6 using the Fluid Grid system. All break points initially worked fine, and I had 3 separate layouts for desktop, tablet, and mobile; with different resolutions, each Fluid Grid Layout Div Tag would rearrange on the page into different columns. Every div on the page is set up with width: __%; in the CSS so that they expand and contract with the browser size.
Everything is responsive on the page and works correctly; however, somewhere during development I lost the Tablet break point, in a sense. When the browser reaches the 768px width which should break the page into the Tablet layout, it instead jumps straight to the mobile formatting, which should not happen until 480px.
In Dreamweaver, I can view the formatting I have set for the Tablet layout, in Design mode it will show me the correct layout of columns of DIVs and content; however, once I place DW in Live mode, or preview in a browser, it no longer has the Tablet functionality, just Desktop and Mobile formatting.
I will post the CSS code for the #media queries and the subsequent .gridContainer code - trying to see if a solution could be found without having to post the entire CSS code, as there's quite alot. Please let me know if I need to edit my question and include more code - perhaps the truncated code of a few DIVs and their responsive values for each layout? I'd be happy to post any more information if it will help resolve this issue.
Thank you in advance for any support or advice!
CSS:
/* Mobile Layout: 480px and below. */
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
border:1px solid #00133e;
background: #004aa1;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
Found the solution:
Near the end of my mobile layout CSS style code, there was an extra curly brace. Removed the brace, responsiveness returns.
Very simple solution; thanks to #MrRO for pointing me in the right direction to look!
Assuming, this is copy paste of actual code. In the given CSS, I believe you have have missed one curly braces, which was suppose to close the style for <480 width devices.
background: #004aa1;
} <-- Here one more "}" needed
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
EDIT
As #Joe pointed out in his answer, the problem here with IE has nothing to do with media queries.
I have therefore updated the old title: ("media queries GLITCH in IE") with the current one. (thanks also to some meta advice)
Just to be sure, I created a new FIDDLE containing just the calc function, and low and behold - I see the same (bad) behavior in IE as I did in my original fiddle with the media queries.
Also, one interesting observation which I noticed was that this only happens when I use division in the calc operation, but if I use something simpler like calc(100% - x px) -
IE handles it ok.
I am using media queries to justify a list of boxes.
Basically, I set up a media query for each #columns states, where I then use calc() to work out the margin-right on each of the elements (except the ones in the last column).
Here's the fiddle
Now this is working fine in chrome and firefox - but when I run this in IE9+
I see a glitch between media query states (including flickering and disobeying the media queries).
Here is a screenshot of what i'm talking about
[screenshot taken at browser window width of 710px] :
Is this an IE bug or have I done something wrong?
FIX:
here is a smoothly working jsfiddle of my solution
further investigating the math i had a hunch internet explorer is having trouble trying to do something stupid ( what else is new ), and that was to allow decimal values ie margin-left:250.123px; thus causing VERY miniscule inconsistencies and ruining your layout.
to correct this issue i temporarily subtracted 1px from all of your calculations and everything is looking smooth as can be
#media (max-width: 350px) {
.container > div {
margin-left: calc(((100% - 150px)/2) - 1px);
margin-right: calc(((100% - 150px)/2) - 1px);
background:black;
}
}
#media (min-width: 350px) and (max-width: 550px) {
.container > div {
margin-right: calc((100% - 300px) - 1px);
background:red;
}
.container > div:nth-child(2n) {
margin-right: 0;
}
}
#media (min-width: 550px) and (max-width: 750px) {
.container > div {
margin-right: calc(((100% - 450px) / 2) - 1px);
background:purple;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
#media (min-width: 750px){
.container > div {
margin-right: calc(((100% - 600px) / 3) - 1px);
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
EDIT:
ive added colors to the media queries to help troubleshoot the source of the problem and have ruled them out as the issue. ive also ruled out compatibility mode as the cause of this issue and your calc formatting looks just fine.
take a look at the updated fiddle
were the media queries breaking we would see inconsistencies in the color flickering as well... this leads me to beleive it is a mathematical calculation error specific to our margin / spacing definitions... further investigating coming soon
i have encountered a few issues with media queries in ie... a few bugs worth mentioning are
compatibility mode - make sure this is turned off can cause unexpected behavior or just break media queries all together
doctype - not declaring one or not having an html5 doctype can be the cause of even more media query inconsistencies
<!DOCTYPE html>
ive noticed you are using calc() my first reaction was to make sure all mathematical operators are surrounded by white space... this is another issues ive encountered, where
calc(2px+5px)
has the tendency to fail where the proper syntax should be
calc(2px + 5px)