CODEWITHSUNDEEP
cssmobile
LTech
LTech

Reputation: 1761

how to make css for work for different mobile sites

I have a desktop site and I've created a css file for the mobile site. It looks good on most mobiles but on an android tablet browser the menu links background color is not showing. How would I debug this? Is there a way I can code css to make changes just for android browsers? I'm not sure where to start with this. Thanks

To further explain the question: I have a mobile css file that works well for iphone and android. Just one part of the site eg http://thepetwiki.com/q2a/ works for iphones but on android tablet the menu dropdown is not working. How do I change the code so works for android tablets as well?

      .navigation {
    max-width: none;
    background: #21a9e9;
    padding: 0;
    list-style: none;
    }

    .navigation li {
      float: left;
    }

  .navigation li a {
    display: block;
    color: #fff;
    padding: 10px;
  }

  .navigation li a:hover {
    background: #0fcaf2;
    text-decoration:none;
  }
  .navheader { 
    font-size: 30px;
    padding-top: 0;
    /*font-family: helvetica;*/
  }

  .slide-trigger {
    display: none;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    color: #FFFFFF;
  }

  .slide-trigger span {
    background-image: url("skins/mobile/dropdown-arrows.png");
    background-position: 0 -14px;
    display: block;
    float: right;
    margin-top: 3px;
    height: 14px;
    width: 32px;
  }
  @media only screen and (max-width: 1000px) {
    .slide-trigger { display: block; }
      .no-js .slide-trigger { display: none; }
    .navigation { display: none; }
      .no-js .navigation { display: block; }
    .navigation { margin: 0 15px; }
    .navigation li { float: none; }
    .navigation li a { border-bottom: 1px solid #fff; }
  }
  </style>
<script>
/* MOBILE COLLAPSE MENU */
(function($) {
  $.fn.collapsable = function() {
    // iterate and reformat each matched element
    return this.each(function() {
      // cache this:
      var obj = $(this);
      var tree = obj.next('.navigation');
      obj.click(function(){
        if( obj.is(':visible') ){tree.toggle();}
      });
      $(window).resize(function(){
        if ( $(window).width() <= 1000 ){tree.attr('style','');};
      });
    });
  };
})(jQuery);
var $j = jQuery.noConflict();
$j(document).ready(function(){
    $j('.slide-trigger').collapsable();
});
</script>`

Upvotes: 1

Views: 327

Answers (2)

user2265582
user2265582

Reputation:

You can read more about Media queries and responsive design techniques here

Upvotes: 0

San
San

Reputation: 1247

here you go

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Upvotes: 2

Related Questions