Responsive Layout – How to Target Different Orientations?

[MBM]

http://mbmitservices.co.uk/pcommerce/index.html

I can post the web developer screenshots if necessary.

Tablet and mobile portrait and landscape look the same. How do I target the landscape orientations in my stylesheet to make use of the extra width? I only need to change 4 values in the stylesheet and 4 values in the nivo slider stylsheets for each device e.g.

Tablet :

/*Navigation styling */
#navigation {
background-color:#ffff00;
margin-top:-30px;
list-style:none;
font-family: ‘Ubuntu’, Helvetica, Arial, sans-serif;
font-size: 14px;
width:200px;
float:left;
height:900px;
padding-top:100px;
}

Desktop :

/*Navigation styling */
#navigation {
background-color:#ffff00;
margin-top:-18px;
list-style:none;
font-family: ‘Ubuntu’, Helvetica, Arial, sans-serif;
font-size: 18px;
width:300px;
float:left;
height:900px;
padding-top:100px;
}

How do I target 10″ tablet displays to avoid clashing with desktop displays? This works but obviously it’s not ideal :

I have tested in Firefox Web Developer and on my 4 inch android smartphone and 9.7″ android tablet.

Obviously it would be better if the container and navigation were responsive but I haven’t developed the skills yet.

[Chester]

this might help

[media queries](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ “Media Queries”)

[MBM]

Thanks. I can’t get it to pick up. What’s wrong with the syntax?

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
#navigation {
background-color:#ffff00;
margin-top:-50px;
list-style:none;
font-family: ‘Ubuntu’, Helvetica, Arial, sans-serif;
font-size: 12px;
width:200px;
float:left;
height:380px;
}
}

[unasAquila]

Try

@media only screen and (min-width: 320px) and (max-width : 480px) {

[MBM]

Forgot to remove the min and max width declaration in the html.

[MBM]

I’m having problems putting everything in one stylesheet so will use seperate style sheets for each device until I get the code right. I want to target Mobile landscape (480×320). What should I have in my html decleration if I want one stylesheet for both portrait and landscape? I have :

And if I want to target (480×320) in the css? This isn’t working :

@media only screen and (min-width: 480px) {
/* CSS goes here */
div.container {
background: #ffffff ;
margin:0 auto 0;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
width:400px;
height:100%;
position:relative;
margin-top:60px;
}

#navigation {
background-color:#ffff00;
margin-top:-50px;
list-style:none;
font-family: ‘Ubuntu’, Helvetica, Arial, sans-serif;
font-size: 12px;
width:400px;
float:left;
height:380px;}

}

Do I need separate declarations for each class or div or do I dump everything together as above?

[unasAquila]

then inside all.css

/* all styles here */

@media only screen and (min-width: 320px) and (max-width : 480px){ /* styles here */ }
@media only screen and (min-width: 1024px) and (max-width : 768px) {/* styles here */ }

[MBM]

This works fine :

@media only screen and (min-width: 320px) and (max-width : 480px)

But I still cannot get either my desktop or phone to pick-up any of the changes made here :

@media only screen and (min-width: 480px) and (max-width : 320px) {

/* Styles */
#navigation {
top:0px;
font-size: 12px;
width:100px;
margin-top:-120px;
height:320px;
}

#navigation li a {
margin-top:10px;
margin-left:30px;
padding-right:5px;
width:140px;
}

div.container {
width:300px;
padding-top:-20px;
margin-top:10px;
position:relative;
}

/*Resize Images To Fit Window*/
.size {width:250px;height:141px;}
.size2 {width:30px;height:30px;}
.size3 {width:25px;height:25px;}

h1 {
background-color:#000000;
font-family: ‘News Cycle’, sans-serif;
font-size:22px;
color:#ffffff;
position:relative;
height:80px;
margin-left:-0px;
padding-left:20px;
}

.imgfacebook {
float: left;
margin-top:-65px;
margin-left:180px;
}

.imgtwitter {
float: left;
margin-top:-65px;
margin-left:210px;
}

.imgemail {
float: left;
margin-top:-62px;
margin-left:250px;
}

.imghtml5 {
float: right;
margin-top:1040px;
margin-right:50px;
margin-bottom:-20px;
}

figure {
left:10px;
float: left;
position: relative;
overflow: hidden;
margin-right:38px;
margin-bottom:10px;
border:1px solid #000000;
}

figure img {display: block;}

figcaption {
padding: 10px 10px 10px 10px;
width:100%;
font-size:18px;
background:#ffffff;
position:relative;
color:#000000;
}

/*fixed footer styling */
#documentFooter{
width:100%;
text-align: center;
font-size: 16px;
border-bottom: 2px solid #fff;
border-top: 2px solid #fff;
color:#ffffff;
padding-top:25px;
padding-bottom:5px;
background: url(../images/html5.png) no-repeat;
background-position:1320px 14px;
background-color: #000000;
}

/* Link Styling */
a:link {color:#000000; text-decoration: none}
a:visited {color: #000000; text-decoration: none}
a:hover {color: #000000; text-decoration: none}

#topHeader{
margin-top:-25px;
height:128px;
background-color: #000000;
}

/*paragraph styling */
p.footer {
font-family: ‘PT Sans Narrow’, sans-serif;
font-size:18px;
margin-left:-5px;}

}

This is the declaration in the html :

[Paulie_D]

>@media only screen and (min-width: 480px) and (max-width : 320px)

That declaration excludes **all** screen sizes doesn’t it?

It can’t be a minimum of 480px **and** be no more than 320px.

https://css-tricks.com/logic-in-media-queries/

[MBM]

This is working for me :

@media only screen and (min-width : 320px)

@media only screen and (min-width : 480px)

[MBM]

This is what I have used.

@media only screen and (min-width : 320px) – mobile portrait
@media only screen and (min-width : 480px) – mobile landscape
@media only screen and (min-width : 600px) – small tablet portrait
@media only screen and (min-width : 800px) – small tablet landscape
@media only screen and (min-width : 768px) – tablet portrait
@media only screen and (min-width : 1024px) – tablet landscape
@media only screen and (min-width : 1280px) – desktop

I have tested on 4″ android mobile phone, 9.7″ android tablet and desktop. Everything is working great.

[Author]

Posts