I'm trying to remove scroll for desktop, but keep scrolling for mobiles and tablets. Can anyone tell me why the below code does not work?
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) {
body {
overflow-y:visible;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) {
body {
overflow-y:visible;
}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) {
body {
overflow-y:hidden;
}
}
Since you already know your media query break points, why not just do your media queries in PX instead like this http://jsfiddle.net/96q3u6ne/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px){
body {
overflow-y:visible;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
body {
overflow-y:visible;
}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
body {
overflow-y:hidden;
}
}
Related
I am converting a website that I made from scratch to be responsive using Bootstrap 4. I started the conversion before I realized that Bootstrap 4 is mobile first, my site was developed desktop first. Without going back and re-doing the entire site, I thought I could just add a few changes with this media query:
#media only screen and (max-width: 767px) {
/***HOMEPAGE - HEADER***/
#header {
height: 45vh;
background-attachment: inherit;
}
}
The changes are not shown on the site but I can see the code when I inspect element and click on sources. My other queries are working just fine, they look like this:
#media (min-width: 768px) and (max-width: 991px) {
/***BODY ***/
html,
body,
a,
blockquote {
font-size: 18px;
}
/***MAIN & MOBILE NAV***/
.main-nav {
display: none;
}
#nav-icon3 {
display: block;
}
}
I tried adding this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
That made everything look jumbled beneath 767px.
I just need to make a few minor tweaks for when the screen is less than 767px and I do not want to re-build my site from mobile first, nor do I want to convert to Bootstrap 3 at this point. Please Help!
If you are using safari browser use viewport as
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
Safari Documentation
and another reference why shrink-to-fit=no
As per Bootstrap 4 documentation Responsive breakpoints are
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
other direction
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575px) { ... }
// Small devices (landscape phones, less than 768px)
#media (max-width: 767px) { ... }
// Medium devices (tablets, less than 992px)
#media (max-width: 991px) { ... }
// Large devices (desktops, less than 1200px)
#media (max-width: 1199px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
and minimum and maximum breakpoint widths
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575px) { ... }
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) and (max-width: 767px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) and (max-width: 1199px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
EDIT: I am completely rewriting this question because I don't think I was being clear enough in my original posting.
According to bootstrap's website, the browser widths for each category of column should be as follows:
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575px) { ... }
// Small devices (landscape phones, less than 768px)
#media (max-width: 767px) { ... }
// Medium devices (tablets, less than 992px)
#media (max-width: 991px) { ... }
// Large devices (desktops, less than 1200px)
#media (max-width: 1199px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
In summary: col-xl is 1200 pixels and up, lg is between 992-1199, md is 768-991, sm is 576-768, and xs is up to 575.
My problem is that for some reason, my webpage is behaving as if xs is sm, sm is md, md is lg, and lg is xl.
View this codepen in the google chrome inspector: https://codepen.io/colesam/full/YxjVwW/
There should be three items per row in lg and up, sm and md should be 2 per row, and xs should be 1.
See below in two examples:
EDIT 2: My header includes the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
EDIT 3: I have now tried inspecting the page on two separate computers but I am getting the same result. I also updated Bootstrap but to no avail. I'm really quite baffled as to why this would be happening. I tried adding xl columns to the html and no matter how large the screen size, the xl columns would not activate.
Here is an image of the google chrome inspector tool. It shows that .col-md-* is activated even though we are within the bounds for lg columns:
Bootstrap is mobile-first, so there's
.col-xs-*
#media (min-width: 768px) {
.col-sm-*
}
#media (min-width: 992px) {
.col-md-*
}
#media (min-width: 1200px) {
.col-lg-*
}
for grid (col-*) classes
instead of
#media (max-width: 575px) { ... }
#media (max-width: 767px) { ... }
#media (max-width: 991px) { ... }
#media (max-width: 1199px) { ... }
It turns out I was looking at the breakpoints for Bootstrap v4+ when I have been using version 3.3.7.
For Bootstrap 4 all of the breakpoints were shifted to make room for col-xl-*.
The Bootstrap 3 breakpoints are:
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
<style>
body{
background: #007bff;
}
#media screen and (min-width: 576px){
body{
background: #007bff;
}
}
#media screen and (min-width: 768px) {
body{
background: #dc3545;
}
}
#media screen and (min-width: 992px) {
body{
background: #28a745;
}
}
#media screen and (min-width: 1200px) {
body{
background: 6f42c1;
}
}
</style>
I am working with a responsive website.
I want to design for all large desktop.
But I don't know the exact media query for large desktop.
Try the following, they are the default bootstrap breakpoints.
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
So my question is when I'm writing CSS you can use #media and then enter a max and min width like so:
#media (min-width: 0px) and (max-width: 767px) {
#social-icons {
padding-left: 125px;
}
}
But I was wondering if you can do the same but instead of using pixels use bootstraps column method, so it would be like (min-width: col-md-3) or something like this, is that possible?
Yeah you can! So according to the bootstrap website you can use media queries with the grid system!
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
#media (max-width: #screen-xs-max) { ... }
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) { ... }
#media (min-width: #screen-md-min) and (max-width: #screen-md-max) { ... }
#media (min-width: #screen-lg-min) { ... }
This is all code from the CSS page of bootstraps website, here.
I want to create generic responsive templates,
which media-queries i have to use if i want to detect all the devices sizes?
Check this Common CSS Media Queries Break Points
/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024 - desktop (default grid)
1024-768 - tablet landscape
768-480 - tablet
480-less - phone landscape & smaller
--------------------------------------------*/
#media all and (min-width: 1024px) and (max-width: 1280px) { }
#media all and (min-width: 768px) and (max-width: 1024px) { }
#media all and (min-width: 480px) and (max-width: 768px) { }
#media all and (max-width: 480px) { }
/* Portrait */
#media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
#media screen and (orientation:landscape) { /* Landscape styles here */ }
/* CSS for iPhone, iPad, and Retina Displays */
/* Non-Retina */
#media screen and (-webkit-max-device-pixel-ratio: 1) {
}
/* Retina */
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}
/* iPhone Portrait */
#media screen and (max-device-width: 480px) and (orientation:portrait) {
}
/* iPhone Landscape */
#media screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* iPad Portrait */
#media screen and (min-device-width: 481px) and (orientation:portrait) {
}
/* iPad Landscape */
#media screen and (min-device-width: 481px) and (orientation:landscape) {
}
I highly recomend using Bootstrap. Faster development. Also documentation is very complete.
http://getbootstrap.com/getting-started/
As for your question, you have this example:
/*Anything outside of media queries is for MOBILE
This is Mobile first approach.
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
Check if these websites help you out:
http://24ways.org/2011/conditional-loading-for-responsive-designs/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/