Twitter Bootstrap Question posted in

Testing Resposive Screens | Twitter Bootstrap

Hi friends just testing out responsiveness of my website.

So i made a basic code, hoping titles in the pages will be made responsive for different screen size.

here is the HTML code,

<!-- Custom styles for this template -->

<link rel="stylesheet" type="text/css" href="style.css">
<title>Testing Responsive Screens</title>
</head>

<body>

<div class='divHeader'><!-- Contact Us title Start -->

    <div class="container"><!--container-->

        <div class="row"><!-- Contact Us title -->

            <!-- LARGE SCREEN TITLE -->

            <div class='LGS'>

                <div class='col-lg-4'></div>

                <div class='col-lg-4 divHeaderContent text-center'>
                    <h1><br>Contact Us</h1>
                </div>

                <div class='col-lg-4'></div>

            </div>

            <!-- MEDIUM SCREEN TITLE -->

            <div class='MDS'>

                <div class='col-md-4'></div>

                <div class='col-md-4 divHeaderContent text-center'>
                    <h2><br>Contact Us</h2>
                </div>

                <div class='col-md-4'></div>

            </div>

            <!-- SMALL SCREEN TITLE -->

            <div class='SMS'>

                <div class='col-sm-4'></div>

                <div class='col-sm-4 divHeaderContent text-center'>
                    <h3><br>Contact Us</h3>
                </div>

                <div class='col-sm-4'></div>

            </div>

            <!-- EXTRA SMALL 1 SCREEN TITLE -->

            <div class="XSS1">

                <div class='col-xs-4'></div>

                <div class='col-xs-4 divHeaderContent text-center'>
                    <h4><br>Contact Us</h4>
                </div>

                <div class='col-xs-4'></div>

            </div>

            <!-- EXTRA SMALL 2 SCREEN TITLE -->

            <div class="XSS2">

                <div class='col-xs-4'></div>

                <div class='col-xs-4 divHeaderContent text-center'>
                    <h6><br>Contact Us</h6>
                </div>

                <div class='col-xs-4'></div>

            </div>

        </div><!-- End of Contact Us title -->

    </div><!--End of container-->

</div>

</body>

</html>

& the simple CSS,

    @media (min-width: 1200px) {
    /* ================== GENERAL RULE ===================== */
    .MDS, .SMS, .XSS1, .XSS2{
        display: none;    
    }
}

     /* Landscape tablets and medium desktops */
      @media (min-width: 992px) and (max-width: 1199px) {
        /* ================== GENERAL RULE ===================== */
        .LGS, .SMS, .XSS1, .XSS2{
            display: none;    
        }
     }

     /* Portrait tablets and small desktops */
     @media (min-width: 768px) and (max-width: 991px) {
        /* ================== GENERAL RULE ===================== */
        .LGS, .MDS, .XSS1, .XSS2{
            display: none;    
        }
     }

     /* Landscape phones and portrait tablets */
     @media (max-width: 767px) {
        /* ================== GENERAL RULE ===================== */
        .LGS, .MDS, .SMS, .XSS2{
            display: none;    
        }
     }

     /* Portrait phones and smaller */
     @media (max-width: 480px) {
        /* ================== GENERAL RULE ===================== */
        .LGS, .MDS, .SMS, .XSS1{
            display: none;    
        }
     }

Classes are dedicated to each type screen size.

Problem occurs in the smallest screen size. The title simply doesn’t appears. Help me people, let me know here I am going wrong.

Thanks!

Tags:

2

Answers


  1. 0

    The problem is you are not specify a min width for Landscape phones and portrait tablets. So at 767px and less XSS2 is hidden anyway (even in ‘Portrait phones and smaller’ case). There is a fix:

    /* Landscape phones and portrait tablets */
@media (min-width: 481px) and (max-width: 767px) {
    /* ================== GENERAL RULE ===================== */
     .LGS, .MDS, .SMS, .XSS2{
        display: none;    
    }
}
    Login or Signup to reply.
  2. 0

    See if this works for you: http://codepen.io/panchroma/pen/LZVyPQ , it’s a little easier to follow what’s happening at the different viewports if you hide all your custom classes, then specify which to display for each breakpoint, as opposed to specifying which to hide at each breakpoint.

     .LGS, .MDS, .SMS,.XSS1, .XSS2{display:none;}

 @media (max-width: 480px) {
   .XSS2{
     display:block;
   }
}

 @media (min-width: 481px) and (max-width: 767px) {
   .XSS1{
     display:block;
   }
}

@media (min-width: 768px) and (max-width: 991px) {
   .SMS{
     display:block;
   }
}

@media (min-width: 992px) and (max-width: 1199px) {
   .MDS{
     display:block;
   }
}

@media (min-width: 1200px) {
   .LGS{
     display:block;
   }
}

    In case you don’t know, Bootstrap does have native responsive utilities which can achieve some of what you are looking for: http://getbootstrap.com/css/#responsive-utilities

    Also it’s not clear from your code if you’ve include a viewport meta tag in the head of your doc, if not you need something like 

    <head>  
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>

    Good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search