I have this css file for adding styles for mobile devices:
/* responsive styles */
/* Extra Small */
@media (max-width: 767px) {
.container { width: auto; }
.logo a, .logo a:hover { margin-left: 0 !important; width: 100% !important; background-position: 50% 0px; }
.logo { margin-bottom: 20px; }
.services a .row .service-container img { max-height: 60px; }
.services a .row .service-container { height: 60px; margin-bottom: 0.23em; }
.navbar.navbar-context.navbar-fixed-top .twentypx_marginbottom { margin-bottom: 0.24em; }
.navbar-context .navbar-nav > li.navmenu-item > a { padding-bottom: 5px; padding-top: 5px; padding-left: 30px; }
.navbar.navbar-context.navbar-fixed-top .fifteenpx_marginleft { margin-left: 30px; margin-right: 15px; }
.leftmenu, #hide-lm { display: none; }
.navbar-toggle .icon-bar { border: 1px solid #4b4c4e; }
.navbar-toggle { border: 1px solid #d0d1d3; }
/*#context_main_logo a { margin: 0 auto; float: none;}*/
.list-group-item.row .col-md-3 { padding-bottom: 0.77em; padding-right: 1.54em; float: left; }
.list-group-item.row .col-md-3 > img { max-width: 100px; height: auto; }
.list-group-item.row .col-md-9 { padding-right: 0; }
.list-group-item.row { width: auto; }
/* PAGINATION */
.pagination-container .col-xs-12 { text-align: center; }
.pagination { padding-left: 0px; margin-left: auto; margin-right: auto; }
.pagination>li>a, .pagination>li>span { padding: 6px 10px; }
.map-container { margin: 15px; width: auto; }
#map-canvas {
width: inherit;
height: 300px;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px
}
#context_website_button_oasis a, #context_website_button_oasis a:hover,
#context_website_button_concon a, #context_website_button_concon a:hover,
#context_website_button_industry a, #context_website_button_industry a:hover { width: inherit; }
/* INDUSTRY EVENTS TABLE */
#industry-events-table table, #industry-events-table thead,
#industry-events-table tbody, #industry-events-table th,
#industry-events-table td, #industry-events-table tr { display: block; }
/* Hide table headers (but not display: none;, for accessibility) */
#industry-events-table thead tr { position: absolute; top: -9999px; left: -9999px; }
#industry-events-table tr { border: 1px solid #ccc; }
#industry-events-table td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left; }
#industry-events-table td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
#industry-events-table td:before { content: attr(data-title); }
#context_main_logo a img { max-width: 90%; height: auto; }
#context_main_logo .navbar-toggle {
margin-right: 0px;
padding: 9px 13px;
margin-top: 0px;
}
.navbar-context {
min-height: 80px;
}
body.concon_style h2 {
margin-top: 5px;
}
img.richtext-image.full-width {
max-width: 100%;
height: auto;
}
/* BACK TO TOP */
.back-to-top { font-size: 11px; bottom: 1em; }
/* PAGINATION */
.pagination-container .col-xs-12 { text-align: center; }
.pagination { padding-left: 0px; margin-left: auto; margin-right: auto; }
/* SERVICES */
.services .child-pages { display: none; }
body.services .row.services .col-md-4.col-sm-4.col-xs-12 { margin-bottom: 0.23em; }
body.services .services a .row .service-container .col-md-12 > span {
margin-top: 5px;
margin-bottom: 5px;
}
body.services .row.services .col-md-4.col-sm-4.col-xs-12 {
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
}
/* RESOURCES */
body.resources .context_website_button_resources a {
width: 100%;
height: 133px;
background-position: -10px -10px;
margin-bottom: 0.23em;
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
}
/* EVENTS */
#context_website_button_oasis a, #context_website_button_oasis a:hover {
background-image: url("/static/contextis/images/context_website_button_oasis_off.jpg");
}
#context_website_button_concon a, #context_website_button_concon a:hover {
background-image: url("/static/contextis/images/context_website_button_concon_off.jpg");
}
#context_website_button_industry a, #context_website_button_industry a:hover {
background-image: url("/static/contextis/images/context_website_button_industry_on.jpg");
}
#context_website_button_oasis a, #context_website_button_concon a, #context_website_button_industry a,
#context_website_button_oasis a:hover, #context_website_button_concon a:hover, #context_website_button_industry a:hover{
width: 100%;
height: 133px;
background-position: -10px -125px;
margin-bottom: 0.23em;
background-repeat: no-repeat;
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
}
}
/* Small */
@media (min-width: 768px) and (max-width: 991px) {
.container { width: auto; }
.services a .row .service-container img {
max-height: 65px;
margin-top: 5px;
}
.carousel-inner>.item>a>img { margin-left: auto; margin-right: auto; }
footer #accrediation .row .logo a { margin: 0 auto;float: none; }
.navbar-nav>li { width: 9.77777%}
#leftmenu-content-href { display: none; }
/*.leftmenu, #hide-lm { display: none; }*/
/*.map-container { margin: 15px; width: auto; }*/
.col-sm-9.centralcolumn img { max-width: 100%; height: auto; }
#map-canvas {
width: inherit;
height: 300px;
width: 90%;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px
}
.navbar-fixed-top>.container>.clearboth.twentypx_marginbottom {
margin-bottom: 1.54em;
}
#context_main_logo .col-xs-10 { padding-left: 8px; }
img.richtext-image.full-width {
max-width: 100%;
height: auto;
}
/* RESOURCES */
.context_website_button_resources img { width: 98%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); }
.context_website_button_resources.first { padding-right: 0px; padding-left: 15px;}
.context_website_button_resources { padding-right: 7px; padding-left: 7px; }
.context_website_button_resources.last { padding-right: 15px; padding-left: 0px; }
}
/* Medium */
@media (min-width: 992px) and (max-width: 1199px) {
.container {
width: auto;
}
.services a .row .service-container img {
max-height: 65px;
margin-top: 5px;
}
.carousel-inner>.item>a>img { margin-left: auto; margin-right: auto; }
footer #accrediation .row .logo a { margin: 0 auto;float: none; }
#leftmenu-content-href { display: none; }
#context_main_logo .col-xs-10 { padding-left: 8px; }
/* RESOURCES */
.context_website_button_resources img { width: 98%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); }
.context_website_button_resources.first { padding-right: 0px; padding-left: 15px;}
.context_website_button_resources { padding-right: 7px; padding-left: 7px; }
.context_website_button_resources.last { padding-right: 15px; padding-left: 0px; }
}
/* Large */
@media (min-width: 1200px) {
footer #accrediation .col-md-3 {
width: 23%;
}
#leftmenu-content-href { display: none; }
#context_main_logo .col-xs-10 { padding-left: 8px; }
body.services .row.services .child-pages .col-md-12.col-sm-12.col-xs-12 {
min-height: 253px;
background-color: #e6e6e6;
}
/* RESOURCES */
.context_website_button_resources a {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
}
.context_website_button_resources a:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}
/* SERVICES */
body.services .row.services .col-md-4.col-sm-4.col-xs-12 {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
body.services .row.services .col-md-4.col-sm-4.col-xs-12:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
z-index: 1;
}
body.services .services a .row .service-container img {
max-height: 130px;
}
body.services .services .child-pages .links {
padding-top: 30px;
line-height: 2.0em;
font-size: 14px;
}
}
/* EXTRA STYLES OVERRIDES - START */
/* Smartphones (landscape) ----------- */
@media handheld and (min-width : 321px) {
body.resources .context_website_button_resources a {
background-size: 100%;
background-position: 0px -50px;
}
body.resources #blog-btn a {
background-position: 0px -70px;
}
#context_website_button_oasis a, #context_website_button_oasis a:hover {
background-size: 100%;
background-position: 50% -245px;
}
#context_website_button_concon a, #context_website_button_concon a:hover {
background-size: 80%;
background-position: 59% -182px;
background-repeat: repeat
}
#context_website_button_industry a, #context_website_button_industry a:hover {
background-size: 100%;
background-position: 50%;
}
}
/* Smartphones (portrait) ----------- */
@media only handheld and (max-width : 320px) {
}
/* Tablets (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/*#context_website_button_oasis a, #context_website_button_concon a, #context_website_button_industry a,*/
/*#context_website_button_oasis a:hover, #context_website_button_concon a:hover, #context_website_button_industry a:hover{*/
/*width: 100%;*/
/*height: 133px;*/
/*background-position: -10px -125px;*/
/*margin-bottom: 0.23em;*/
/*background-repeat: no-repeat;*/
/*box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);*/
/*}*/
body.services .row.services .col-md-4.col-sm-4.col-xs-12, #context_website_button_industry a,
#context_website_button_concon a, #context_website_button_oasis a {
box-shadow: 5px 5px 15px 3px rgba(0, 0, 0, 0.3);
background-size: 100%;
}
body.resources .context_website_button_resources a {
box-shadow: 5px 5px 15px 3px rgba(0, 0, 0, 0.3);
background-size: 103%;
}
body.resources #blog-btn a {
background-position: 0px -11px;
}
#context_website_button_oasis {
padding-right: 0px;
padding-left: 15px;
}
#context_website_button_concon {
padding-right: 7px;
padding-left: 7px;
}
#context_website_button_industry {
padding-right: 15px;
padding-left: 0px;
}
}
/* Tablets (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
#context_website_button_industry a, #context_website_button_concon a, #context_website_button_oasis a {
background-position: 50%;
width: 100%;
background-size: 120%;
height: 330px;
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
}
#context_website_button_oasis { padding-right: 2px; }
#context_website_button_concon { padding-left: 7px; padding-right: 7px; }
#context_website_button_industry { padding-left: 2px; }
body.resources .context_website_button_resources a {
width: 100%;
height: 330px;
background-size: 110%;
background-position: 50%;
margin-bottom: 0.23em;
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
}
body.services .row.services .col-md-4.col-sm-4.col-xs-12 { box-shadow: 5px 5px 15px 3px rgba(0, 0, 0, 0.3);
}
}
/* Smartphones (landscape) ----------- */
@media only handheld and (min-width : 321px) {
body.resources .context_website_button_resources a {
background-size: 100%;
background-position: 0px -50px;
}
body.resources #blog-btn a {
background-position: 0px -70px;
}
#context_website_button_oasis a, #context_website_button_oasis a:hover {
background-size: 100%;
background-position: 50% -245px;
}
#context_website_button_concon a, #context_website_button_concon a:hover {
background-size: 80%;
background-position: 59% -182px;
background-repeat: repeat
}
#context_website_button_industry a, #context_website_button_industry a:hover {
background-size: 100%;
background-position: 50%;
}
}
/* Smartphones (portrait) ----------- */
@media only handheld and (max-width : 320px) {
}
/* EXTRA STYLES OVERRIDES - END */
My problem is that the rules that I've added just for portrait orientation of smarthphones are not recognized, probably due to the handheld keyword. If I cange it to screen, they will affect also bigger screens (tablets) and desktop. How can I solve this?
You should not necessarily use handheld as media type.
Android and iOS ignore media="handheld".
Also most modern smart phone browsers simply ignore handheld style sheets.
Just use media queries targeting a screen with lower resolution and use pixel-ratio and pixel-density to be more specific targetting modern mobile devices.
SMARTPHONES
/*----- Smartphones (portrait and landscape) ----- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Place Your Styles Here */
}
/*----- Smartphones (landscape) ----- */
@media only screen
and (min-width : 321px) {
/* Place Your Styles Here */
}
/*----- Smartphones (portrait) ----- */
@media only screen
and (max-width : 320px) {
/* Place Your Styles Here */
}
IPHONE 5
/*----- iPhone 5 in portrait & landscape ----- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* Place Your Styles Here */
}
/*----- iPhone 5 in landscape ----- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* Place Your Styles Here */
}
/*----- iPhone 5 in portrait ----- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* Place Your Styles Here */
}
IPHONE 2G-4S
/*----- iPhone 2G-4S in portrait & landscape ----- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Place Your Styles Here */
}
/*----- iPhone 2G-4S in landscape ----- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
/* Place Your Styles Here */
}
/*----- iPhone 2G-4S in portrait ----- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
/* Place Your Styles Here */
}
When targeting tablet you might consider using and orientation(landscape){ but for mobile is not necessary, you can simply rely on the screen resolution.