How to change the css style for phone and desktop? - css

Question

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?)

Answer 1

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)