My site collapses nicely for the iPad version but once it collapses for iPhone it is a mess. I would prefer just to keep the iPad version for iPhone as well.
I know I have to override /* Landscape phones and down */
#media (max-width: 480px) { ... }
but do I have to override each individual param? Can't I simply tell it somehow "don't collapse below 768px"
I am using a CDN hosted bootstrap and doing custom overrides in my css.
This are the suggested medias:
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
As you can see, here I'm using device-width instead of width.
If what you want is to use same style in iPad and iPhone and there are not constrains between 480px y 768px, you can simply:
#media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
/* Styles */
}
Hope this helps!
Related
The main functionality of my site (http://kawaiiface.net) is stringent upon floats and max-widths working well. My sidebar slots are float: left; and float: right; , and my content buttons are margins: auto;. Everything positions itself in relation to one another responsively on desktop screen sizes -- but on mobile, the sidebars appear above the content.
In anticipation of the algo update, I've gone ahead and added responsive containers to everything: my sidebars run a max-width: 160px; with width: 100%; to 1. keep them in the spot they should be and 2. allow them to be responsive on smaller screens. This has caused an issue, though -- where the max-width allows my containers to fit well and provide a proper UE on desktop, they prevent the slots from expanding enough to fill the whole screen on mobile!
How can I remove my max-width parameter when my left-floated element is in its own block (aka above everything else on smaller screens)? Here is an image to help.
Thanks so much!!
An example of using Media queries
Helpful website: https://css-tricks.com/css-media-queries/
Example:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles for smartphones here */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles for smartphones here */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles for smartphones here */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles for ipad here */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles for ipad landscape here */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles for upad here */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* desktops and laptops style goes here */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles for large screen here *?
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {}
Add this to your css at the top, inside each {} you can change an element depending on the dimensions of the devices width. There are a wide range of varieties depending on the devices you're targeting but this is the broad spectrum.
I'm working on responsive designed web site using media queries. But i do not know how to take a good width set.
As you can see on this table, there is a lot of different resolution even for a single type of device. And as resolution is coming bigger and bigger on mobile device, it is hard to know what design to apply for a specific resolution.
For now, I'm using this :
Mobile First
#media screen and (min-width:720px) => Phablet
#media screen and (min-width:768px) => Tablet
#media screen and (min-width:1024px) => Desktop
Thank you for any advice or recomendations !
Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience
When you design your responsive website you should consider the size of the screen and not the device type. The media queries helps you do that.
If you want to style your site per device, you can use the user agent value, but this is not recommended since you'll have to work hard to maintain your code for new devices, new browsers, browsers versions etc while when using the screen size, all of this does not matter.
You can see some standard resolutions in this link.
BUT, in my opinion, you should first design your website layout, and only then adjust it with media queries to fit possible screen sizes.
Why? As I said before, the screen resolutions variety is big and if you'll design a mobile version that is targeted to 320px your site won't be optimized to 350px screens or 400px screens.
TIPS
When designing a responsive page, open it in your desktop browser and change the width of the browser to see how the width of the screen affects your layout and style.
Use percentage instead of pixels, it will make your work easier.
Example
I have a table with 5 columns. The data looks good when the screen size is bigger than 600px so I add a breakpoint at 600px and hides 1 less important column when the screen size is smaller. Devices with big screens such as desktops and tablets will display all the data, while mobile phones with small screens will display part of the data.
State of mind
Not directly related to the question but important aspect in responsive design.
Responsive design also relate to the fact that the user have a different state of mind when using a mobile phone or a desktop. For example, when you open your bank's site in the evening and check your stocks you want as much data on the screen. When you open the same page in the your lunch break your probably want to see few important details and not all the graphs of last year.
Here is media queries for common device breakpoints.
/* 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
**********/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
#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 ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
The screen widths Bootstrap v3.x uses are as follows:
Extra small devices Phones (<768px) / .col-xs-
Small devices Tablets (≥768px) / .col-sm-
Medium devices Desktops (≥992px) / .col-md-
Large devices Desktops (≥1200px) / .col-lg-
So, these are good to use and work well in practice.
Take a look at this...
http://getbootstrap.com/
For big websites I use Bootstrap and sometimes (for simple websites) I create all the style with some #mediaqueries. It's very simple, just think all the code in percentage.
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
Inside the container, your structure must have widths in percentage like this...
.col-1 {
width: 40%;
float: left;
}
.col-2 {
width: 60%;
float: left;
}
#media screen and (max-width: 320px) {
.col-1, .col-2 { width: 100%; }
}
In some simple interfaces, if you start to develop the project in this way, you will have great chances to have a fully responsive site using break points only to adjust the flow of objects.
i will provide mine because #muni s solution was a bit overkill for me
note: if you want to add custom definitions for several resolutions together, say something like this:
//mobile generally
#media screen and (max-width: 1199) {
.irns-desktop{
display: none;
}
.irns-mobile{
display: initial;
}
}
Be sure to add those definitions on top of the accurate definitions, so it cascades correctly (e.g. 'smartphone portrait' must win versus 'mobile generally')
//here all definitions to apply globally
//desktop
#media only screen
and (min-width : 1200) {
}
//tablet landscape
#media screen and (min-width: 1024px) and (max-width: 1600px) {
} // end media query
//tablet portrait
#media screen and (min-width: 768px) and (max-width: 1023px) {
}//end media definition
//smartphone landscape
#media screen and (min-width: 480px) and (max-width: 767px) {
}//end media query
//smartphone portrait
#media screen /*and (min-width: 320px)*/
and (max-width: 479px) {
}
//end media query
I have media types for landscape and portrait orientations.
All looks like this when the orientation = portrait
When I turn the phone to the landscape orientation - it applies css stylesheet for the landscape orientation, but dimension is different. Zoom doesn't work.
That's how the page looks when I load it as a new page. Stylesheet works fine.
When I change from landscape to portrait orientation - it works also fine.
/* For landscape mobile screens */
#media only screen
and (min-width : 321px) and (max-width:1223px) {
/* styles */
}
/* For portrait mobile screens */
#media only screen and (max-width:320px) {
/*styles*/
}
Try this:
Landscape #media queries
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) { /* STYLES GO HERE */}
Portrait #media queries
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) { /* STYLES GO HERE */ }
I've got a block of html, let's call it a tile. When the screen is wide we lay down tiles horizontally in rows. But when the screen is less than two tiles wide we lay them down the page.
Inside the tiles are an image and some text. When the tiles are going across the page the image should show above the text. But when there is only one tile in a row the image should show to the left of the text.
Perhaps you're still with me. I'm trying to work out how to use the same html for both layouts and apply the left/top positioning of the image purely with css. The tile html looks like this:
<li class="car-item">
<img src="{{car_image}}" class="img-rounded">
<h3>{{name}}</h3>
<ul>
<li class="ico-body">{{body}}</li>
<li class="ico-petrol">{{cylinder}}</li>
<li class="ico-transmission">{{transmission}}</li>
</ul>
</li>
The sass/css has gone through a number of variations. I've been trying to use visible-phone class but my attempts always wind up needing to output two versions of the html, one with "visible-phone" class and another "hidden-phone" class. Is this really necessary?
Is it not possible to declare a default css class (for desktop) and an alternate which automatically applies to phone?
.visible-phone
height: none
margin-right: 10px
img
float: left
(#media?)
Here are the media queries of standard devices (from CSS-Tricks.com):
/* 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 */
}
All of the areas that say /* Styles */ are where you would place the separate CSS components for the different devices you are supporting.
**PLEASE NOTE: this is a pretty convoluted media query sheet. I would normally delete the landscape stuff, and the iPhone media query takes care of most smartphones, so there's normally no need to have two separate ones for that. Here is what I usually use:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
(and from Creating a mobile web page with different css style)
This question already has answers here:
Common breakpoints for media queries on a responsive site
(5 answers)
Closed 3 years ago.
I am working on a Responsive Web Site with CSS Media Queries.
Is the following a good organization for devices?
Phone, Ipad (Landscape & Portrait), Desktop and Laptop, Large Screen
What are the common media queries break-point values?
I am planning to use the following breakpoints:
320: Smartphone Portrait
481: Smartphone Landscape
641 or 768 ???: IPad Portrait ???
961: IPad Landscape / Small Laptop ???
1025: Desktop and Laptop
1281: Wide Screen
What do you think? I have a few doubts as ??? points.
Rather than try to target #media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It's different for every site. As long as the design flows well at each browser width, it should work pretty reliably on any screen size (and there are lots and lots of them out there.)
I've been using:
#media only screen and (min-width: 768px) {
/* tablets and desktop */
}
#media only screen and (max-width: 767px) {
/* phones */
}
#media only screen and (max-width: 767px) and (orientation: portrait) {
/* portrait phones */
}
It keeps things relatively simple and allows you to do something a bit different for phones in portrait mode (a lot of the time I find myself having to change various elements for them).
I'm using 4 break points but as ralph.m said each site is unique.
You should experiment. There are no magic breakpoints due to so many devices, screens, and resolutions.
Here is what I use as a template.
I'm checking the website for each breakpoint on different mobile devices and updating CSS for each element (ul, div, etc.) not displaying correctly for that breakpoint.
So far that was working on multiple responsive websites I've made.
/* SMARTPHONES PORTRAIT */
#media only screen and (min-width: 300px) {
}
/* SMARTPHONES LANDSCAPE */
#media only screen and (min-width: 480px) {
}
/* TABLETS PORTRAIT */
#media only screen and (min-width: 768px) {
}
/* TABLET LANDSCAPE / DESKTOP */
#media only screen and (min-width: 1024px) {
}
UPDATE
As per September 2015, I'm using a better one. I find out that these media queries breakpoints match many more devices and desktop screen resolutions.
Having all CSS for desktop on style.css
All media queries on responsive.css: all CSS for responsive menu + media break points
#media only screen and (min-width: 320px) and (max-width: 479px){ ... }
#media only screen and (min-width: 480px) and (max-width: 767px){ ... }
#media only screen and (min-width: 768px) and (max-width: 991px){ ... }
#media only screen and (min-width: 992px){ ... }
Update 2019: As per Hugo comment below, I removed max-width 1999px because of the new very wide screens.
This is from css-tricks link
/* 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 */
}
I can tell you I am using just a single breakpoint at 768 - that is min-width: 768px to serve tablets and desktops, and max-width: 767px to serve phones.
I haven't looked back since. It makes the responsive development easy and not a chore, and provides a reasonable experience on all devices at minimal cost to development time without the need to fear a new Android device with a new resolution you haven't factored in.
Media Queries for Standard Devices
In General for Mobile, Tablets, Desktop and Large Screens
1. Mobiles
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
2. Tablets
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
3. Desktops & laptops
#media only screen
and (min-width : 1224px) {
/* Styles */
}
4. Larger Screens
#media only screen
and (min-width : 1824px) {
/* Styles */
}
In Detail including landscape and portrait
/* 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 */
}
/* Tablets, iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Tablets, iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* Tablets, 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 */
}
Reference
Consider using twitter bootstrap's break points.
with such a massive adoption rate you should be safe...
#media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
#media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
#media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
#media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
#media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
#media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}
If you go to your google analytics you can see which screen resolutions your visitors to the website use:
Audience > Technology > Browser & OS > Screen Resolution ( in the menu above the stats)
My site gets about 5,000 visitors a month and the dimensions used for the free version of responsinator.com are pretty accurate summary of my visitors' screen resolutions.
This could save you from needing to be too perfectionistic.
I always use Desktop first, mobile first doesn't have highest priority does it? IE< 8 will show mobile css..
normal css here:
#media screen and (max-width: 768px) {}
#media screen and (max-width: 480px) {}
sometimes some custom sizes. I don't like bootstrap etc.
Instead of using pixels should use em or percentage as it is more adaptive and fluid, better not target devices target your content:
HTML5 rockrs read, mobile first
Keep your code clean and stylesheets logically separated per screen 'media' type config...
1) Using himansu's answer from above as a reference: Common CSS Media Queries Break Points
AND
2) https://www.w3schools.com/css/css3_mediaqueries.asp
your answer would be:
<link rel="stylesheet" media="#media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">
<link rel="stylesheet" media="#media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">
Your break points look really good. I've tried 768px on Samsung tablets and it goes beyond that, so I really like the 961px.
You don't necessarily need all of them if you use responsive CSS techniques, like % width/max-width for blocks and images (text as well).