When i am taking min-width:368px; in desktop mode it is working but after that as i am using media queries and i am converting it to max-width:368px (for mobile and tablet) and it is not working.It is taking min-width value not max-width value. Why?.
Example:
min-width: 368px;(desktop );
max-width: 368px;(mobile, tablet);
try this :
#media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
#media screen and (max-device-width: 640px) and (orientation:landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
#media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
#media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 5 Portrait or Landscape #### */
#media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
#media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
/* #### Desktops #### */
#media screen and (min-width: 1024px){
/* some CSS here */
}
Related
We have the following CSS which works for all iPads except for iPad Pro 12.9:
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.pp-button-1 {margin-bottom: 10px;)
}
/* ----------- iPad Pro 10.5" ----------- */
/* Portrait */
#media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
.pp-button-1 {margin-bottom: 0;)
}
/* ----------- iPad Pro 11 2018 " ----------- */
/* Portrait */
#media only screen
and (min-width: 834px)
and (orientation: portrait) {
.pp-button-1 {margin-bottom: 0;}
}
/* ----------- iPad Pro 11 2020 " ----------- */
#media only screen
and (min-width: 834px)
and (orientation: portrait) {
.pp-button-1 {margin-bottom: 0;}
}
/* ----------- iPad Pro 11 2021 " ----------- */
#media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
.pp-button-1 {margin-bottom: 0;}
}
/* ----------- iPad Pro 9 " ----------- */
/* Portrait */
#media only screen
and (min-width: 1024px)
and (orientation: portrait) {
.pp-button-1 {margin-bottom: 10px;}
}
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait */
#media only screen
and (min-device-width: 1024px)
and (max-device-height: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.pp-button-1 {margin-bottom: 0;}
}
Our site https://mandoemedia.com displays with a gap above one of the buttons on an iPad Pro 12.9:
which is produced by CSS:
.pp-button-1 {
margin-bottom: 10px;
}
Note the last CSS rule which targets iPad Pro 12.9 taken from this page:
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait */
#media only screen
and (min-device-width: 1024px)
and (max-device-height: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.pp-button-1 {margin-bottom: 0;}
}
However this margin-bottom: 0; is not taking effect.
EDIT: What is taking effect is:
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.pp-button-1 {margin-bottom: 10px;)
}
Why is the iPad 3, 4 and Pro 9.7" media query active for an iPad Pro 12.9?
I think the below should work, attaching screenshots.
.padding-20-20.mobile-centered {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
I am trying here to add a different background image for every single page as soon you visit the website on mobile (Tablet and Smartphones).
As you can see, I am using Wordpress and fullPage.js
I tried this in CSS, but without any result:
/* ----------- iPhone 4 and 4S ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}
Any tips would be appreciated.
Change your min-device-width to min-width, that should do the trick. See this for more info!
Checkout that you have not closed quotes - "
#beste-lage { background-image: url("http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png); }
should be:
#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) }
The background isn't on #beste-lage but on .bt-op-item-content.
I'm trying to allow a container that holds five images per row to change the size of it's width if the browser width is smaller than the five images, including the margins etc.
I've added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)...The container changes width and the content is centered.
However, when browsing on mobile device (iPhone 4 and S4) it doesn't work. Thoughts?
CSS
.main-width {
margin: 20px auto;
max-width: 1080px;
min-width: 960px;
}
#media screen and (max-width: 1080px) {
.main-width {
max-width: 870px !important;
min-width: 870px !important;
}
}
This is likely because you don't have a viewport set.
Place the following meta tag in the <head> element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
You can use (max-device-width:1080px) instead. It passes viewport and applys on device width.
Give this a try this is a modified one that I use:
/* Media queries */
/* Desktop Resolutions */
/* 2k */
#media screen and (max-width: 2048px) {
}
/* 1080 HD */
#media screen and (max-width: 1920px) {
}
/* Wide SXGA/ Apple Powerbook G4 */
#media screen and (max-width: 1440px) {
}
/* HDTV 720p/1080i monitors */
#media only screen and (max-width: 1366px) {
}
#media only screen and (max-width: 1024px) {
}
#media only screen and (max-width: 768px) {
}
#media only screen and (max-width: 480px) {
}
#media only screen and (max-width: 320px) {
}
/* Device Width & Density */
/* iPad Mini */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
/* iPad 2 and 3 Landscape */
#media (max-device-width: 1024px) and (orientation: landscape) {
}
/* iPad 2 and 3 Portrait */
#media (max-device-width: 768px) and (orientation: portrait) {
}
/* iPad 4 */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 4 */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone 5 */
#media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
}
/* HTC One */
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
/* Samsung Galaxy S2 */
#media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) {
}
/* Samsung Galaxy S3 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
}
/* Samsung Galaxy S4 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
I'm trying to allow a container that holds five images per row to change the size of it's width if the browser width is smaller than the five images, including the margins etc.
I've added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)...The container changes width and the content is centered.
However, when browsing on mobile device (iPhone 4 and S4) it doesn't work. Thoughts?
CSS
.main-width {
margin: 20px auto;
max-width: 1080px;
min-width: 960px;
}
#media screen and (max-width: 1080px) {
.main-width {
max-width: 870px !important;
min-width: 870px !important;
}
}
This is likely because you don't have a viewport set.
Place the following meta tag in the <head> element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
You can use (max-device-width:1080px) instead. It passes viewport and applys on device width.
Give this a try this is a modified one that I use:
/* Media queries */
/* Desktop Resolutions */
/* 2k */
#media screen and (max-width: 2048px) {
}
/* 1080 HD */
#media screen and (max-width: 1920px) {
}
/* Wide SXGA/ Apple Powerbook G4 */
#media screen and (max-width: 1440px) {
}
/* HDTV 720p/1080i monitors */
#media only screen and (max-width: 1366px) {
}
#media only screen and (max-width: 1024px) {
}
#media only screen and (max-width: 768px) {
}
#media only screen and (max-width: 480px) {
}
#media only screen and (max-width: 320px) {
}
/* Device Width & Density */
/* iPad Mini */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
/* iPad 2 and 3 Landscape */
#media (max-device-width: 1024px) and (orientation: landscape) {
}
/* iPad 2 and 3 Portrait */
#media (max-device-width: 768px) and (orientation: portrait) {
}
/* iPad 4 */
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 4 */
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone 5 */
#media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
}
/* HTC One */
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
/* Samsung Galaxy S2 */
#media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5) {
}
/* Samsung Galaxy S3 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
}
/* Samsung Galaxy S4 */
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}
What are the best width ranges for detecting media queries in a responsive design?
I would like to cover all Desktop/Laptop monitors( with one orientation) in 4 media queries but I do not know if it is possible for example: small monitors, medium monitors, large and extra large monitors.
For example in this code
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {}
I think we need still to device the Desktops and laptops media into three sub media as small (like 13" to 14 laptops), medium (like 15 to 17) and large (over 22#). I know that the browser resolution is different than screen resolutions but let's say we have browsers in full-screen mode in all formats.
Try this one with retina display
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Update
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width: 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* Styles */
}
/* iPad 3 (landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPad 3 (portrait) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width: 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width: 1824px) {
/* Styles */
}
/* iPhone 4 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 4 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 5 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 5 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6 (landscape) ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6 (portrait) ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6+ (landscape) ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 6+ (portrait) ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S3 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S3 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}
/* Samsung Galaxy S4 (landscape) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S4 (portrait) ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S5 (landscape) ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
/* Samsung Galaxy S5 (portrait) ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}
You can take a look here for a longer list of screen sizes and respective media queries.
Or go for Bootstrap media queries (archived):
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Update:
Bootstrap 5 breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Additionally you might wanty to take a look at Foundation's media queries with the following default settings:
// Media Queries
$screenSmall: 768px !default;
$screenMedium: 1279px !default;
$screenXlarge: 1441px !default;
Update:
Foundation 6 breakpoints
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
best bet is targeting features not devices unless you have to, bootstrap do well and you can extend on their breakpoints, for instance targeting pixel density and larger screens above 1920