CODEWITHSUNDEEP
cssresponsive-design
Millhorn
Millhorn

Reputation: 3166

Responsive CSS isn't working properly?

Here's the site: Website

There are some navigation arrows I'm trying to hide in mobile view.

Here's the HTML... 

<div id="nav_arrow">
     <a href="index.html"><img src="images/icons/arrow_left.png" width="60" height="44"></a>
</div>

Here's the CSS...

#nav_arrow { display: none; }

The media query appears to be typed out correctly. The style works when the phone (iPhone 5) is held vertically. But, when I hold it in a landscape view, the arrows show up. I'm trying to not have them display unless the site is pulled up in tablet view or larger?

Any ideas?

Update 1 This is the section of CSS where I have the media query... 

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

#nav { display:none;}
#secondary-nav { display:none; }
#footer-social { float:left; }
.jcarousel-skin-tango .jcarousel-next-horizontal { right:0; }
.jcarousel-skin-tango .jcarousel-prev-horizontal { right: 43px;}
.jcarousel-skin-tango .jcarousel-item { width: 300px !important; }
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 20px;}              
#latest-projects .block, #latest-posts .block, .programs .block { width:295px; height:inherit; }
#latest-projects .stack, #latest-posts .stack, .programs .stack { width:295px; height:274px; }
#latest-projects .block img, #latest-posts .block img, .programs .block img { width:283px; height:262px; }
#latest-projects .block .mask, #latest-posts .block .mask, .programs .block .mask { width:283px; height:261px; }
.nav-projects .viewall { display:none;}
#clients .block { width:298px;}
#clients .block img { width:298px;}
#info-block ul li > div { height: 85px; width: 270px; }
#latest-projects .block iframe, #latest-posts .block iframe, .programs .block iframe { width:283px; height:262px; }
.fix-fish-menu select { display:block; }
#menu { float: none; }
#clients .columns { padding-bottom:20px; }
.ribbon-front { left: 1px; }
.ribbon-edge-topleft, .ribbon-edge-bottomleft { display:none; }
#footer-social li { margin-right: 5px; margin-left: 0px; }
#top-panel .columns { margin-bottom:20px;}      
#contacts-form input[type=text], #contacts-form input[type=password], #contacts-form input[type=email] { width:130px;}
#contacts-form textarea { width: 290px; }
#contact-info li { width:275px; }
#latest-posts .mejs-container {width:265px !important;}
#latest-posts .block .text { height: 200px;}
#latest-posts .block { width:295px; height:274px; }
#nav_arrow { display: none; }
.link-icon { background-position: top: 100px; right: 100px; bottom: 100px; left: 60px; }

The specific tag is on the bottom. Second to last.

Upvotes: 1

Views: 592

Answers (3)

Cody Guldner
Cody Guldner

Reputation: 2886

Screen in media queries are defined as anything on an screen, so not print, or other similar medias. Your media query is saying that those styles will only be displayed on a screen, and the screen has to be less than 480 pixels.

Chances are that when you tilt your iPhone to landscape, it increases the pixels past 480. So then all of those styles in that block are not applied, and the iPhone renders the default styles of screens bigger than 480 pixels. There are a few ways to solve this.

You could increase the max-width pixel value. This might be the solution you will have to go to. You will just have to be careful picking a value

  • You don't want it too low. If you only target iPhone for this value, then any phones with a bigger screen won't have those styles. So you'd be back to the same problem
  • You don't want it too high, because you might end up accidentally targeting some smaller screen notebooks, and then you have destroyed a little part of your UI

Chris posted a good article relating to this. He has a lot of media queries you could use to solve this. But that might get a little heavy with queries.

Unfortunately, there isn't a query made yet that only targets handheld devices

Upvotes: 2

Renzo Cortez
Renzo Cortez

Reputation: 66

Are you sure you are using the right mediaquery?, have you tried the orientation property:

@media only screen  and (min-device-width : 320px)  and (max-device-width : 568px)  and (orientation : landscape) {}

or maybe device-aspect-ratio would be more accurate for iphone 5:

@media screen and (device-aspect-ratio: 40/71) and (orientation : landscape) {}

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49044

The width of the iphone5 landscape is 568px, so change your media query to something like: @media only screen and (max-width: 568px).

Maybe use 768 as a breakpoint for tablets (portrait).

Upvotes: 0

Related Questions