I have made a simple website which is responsive (more or less). I have used media query #media only screen and (max-width: 699.99px). Now I know that this will activate the css inside it when resolution is less than 699.99px. So it is fine with computer but it doesn't work in mobiles and I know why. But I don't really understand how to solve this. I want this query to work on computer screen (resizing) as well as mobile devices and tablets.
You can use em or rem instead of px. This makes the styling depend on how much content fits on the screen assuming that you also use em/rem to set the sizes of your elements.
could be an issue with difference between real screen width and actual size
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or you can use media-device-width
#media only screen and (max-device-width: 700px) {
/* Style goes here */
}
but I suggest you to start with mobile-first approach that will definitely solve the issue. basically first you do css for mobile and then you override css for desktop with media queries like
#media only screen and (min-width: 700px){
/* Style goes here */
}
btw does your device support 699.99px? try using 700 instead
First of all if you want make your website responsive it's better to use responsive framework like Bootstrap or foundation.
but if you prefer to do it without framework. try this
you can make 4 media query steps
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// 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) { ... }
and extra guide
/*========== 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) {
}
I hope this can help
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) { ... }
I have a 640*225 image I want it to fit on various device screens,
When I put width="100%" it fits perfectly on small device but on a PC it extends till it fits the entire browser width responsively.
Is there a way to set the actual image size on large screen and responsive when it hits the width size image?
try width:100%; max-width:80%;
You can use media queries to specify custom styles for every screen resolution. The most popular of them I put in the snippet below:
/*========== Desktop 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) {
}
/*========== 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) {
}
For more info about media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
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>
This is my bootstrap website: http://www.feather.com.lk/index.php
My main issue is in iPad portrait view. The elements are not resizing as intended. However, further investigation into the issue showed that I only have this issue when the browser size is scaled down to 768px and 769px. I'm not sure how to solve this issue.
The media queries I used:
#media screen and (min-width: 0px) and (max-width:769px)
#media screen and (min-width: 770px) and (max-width: 992px)
#media screen and (min-width: 993px) and (max-width: 1199px)
#media screen and (min-width: 1200px)
It seems like there is a mismatch between your media queries and the ones provided by Bootstrap.
/* 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) { ... }
(Bootstrap Media Queries)
As you can see here, the smallest Bootstrap media query takes a maximum width of 767px (notice that the next one starts from 768px). However, the smallest media query that you have used takes the width of up to 769px. That must be the reason why there are two pixels, where the website doesn't look as intended.
Try changing your media queries to be the same as the ones in Bootstrap.
I have a website that uses "card" views. When viewed on a desktop I set the CSS for the card as such:
width: 75%
margin: auto
I did this so the "card" would not take up the entire width which looks nicer on the desktop:
But what I am trying to figure out is how to take the width and margins auto off when the screen sizes changes to a mobile smaller screen. I want the card to be width 100% when in mobile view for obvious reasons. How can I change the CSS based on width of the window?
Here's a standard bootstrap mediaqueries.make sure you put this meta tag on head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/*========== 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) {
}