CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapresponsive-design
bertone_in
bertone_in

Reputation: 67

bootstrap template refusing to be responsive on mobile phones

I'm having strugle with getting my Bootstrap website to be responsive, basicly its responsive on iPad and bigger devices, but on mobile phones the contest "dissapears" and changes font/size of elements to bootstrap default ones. I checked all CSS links (bootstrap main CSS, JS etc) and they are all on place and properly positioned in html file. I want to mention that I properly used bootstrap grid system, I don't know why it refuses to be responsive on mobile phone.

https://jsfiddle.net/hbb1sLut/7/

live : http://i1cevic.com

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-  scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>test</title>    

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->       

<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Fonts -->

<link rel="stylesheet"  href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic' rel='stylesheet' type='text/css'></title>
</head>
<body>
<!-- Header -->
    <section id="FullScreen">
        <div class="container home-container text-center">
            <h1><font color="#fff">First Line<br>Second Line</font></h1>

            <a>RANDOM CTA</a>
        </div>

    </section>
<!-- End Header -->

<section id="section1">
    <div class="container">                                      
        <!-- Section Title -->
            <div class="text-center">
                <h2><font color="#000">Test</font><font color="#000">   Test</font></h2>
                <h5>lorem ipsum</h5>
    </div>
         <!-- End Of Section Title -->               

    <div class="row">
        <div class="col-md-4">
            <div class="media">
                <div class="media-body">
                <h3 class="media-heading">Test</h3>
                    <p>Lipsum</p>
                </div>
            </div>
        </div><!--/.col-md-4-->

          <div class="col-md-4">
              <div class="media">
                  <div class="media-body">
                      <h3 class="media-heading">Test</h3>
                      <p>Lipsum</p>
                  </div>
              </div>
          </div><!--/.col-md-4-->

          <div class="col-md-4">
              <div class="media">
                  <div class="media-body">
                      <h3 class="media-heading">Test</h3>
                      <p>Lipsum</p>
                  </div>
              </div>
          </div><!--/.col-md-4-->
    </div>
    </div><!--/.row-->
    </section>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery.js"></script> 
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script> 



   </script>
    </body>
    </html>

css

/* Global Styles */

html,
body {

width: 100%;
height: 100%;
     }

a:hover,
a:focus {
text-decoration: none;
outline: none; 
    } 

a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
} 





#FullScreen {
position: relative;
display:table;
color: #fff;
width:100%;
height:100%;
background-image: url(../img/bg.jpg);
background-size:cover;
background-position:center bottom;

            }

#section1 {

padding-top:90px;
padding-bottom:90px;

          }





/* Vertical + Horizontal Center */


.home-container {
display: table-cell;
text-align:center;
vertical-align: middle;
                }




/* Typography */

.bold {
font-weight:bold;
      }

p {

font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 14px;
color:#787878;
line-height:25px;


  }

h5 {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 18px;
letter-spacing:normal;
color:#787878;

   }

h4 {
font-family: 'Raleway', sans-serif;
font-weight: 100;
font-size: 46px;
letter-spacing:-1px;
line-height:30%;

}

h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing:-0.5px;
color:black;
   }

Upvotes: 0

Views: 139

Answers (2)

Akash Vartak
Akash Vartak

Reputation: 167

Edit the live code (uploaded at http://i1cevic.com/) to include the CDN bootstrap link instead of your own downloaded one. Always try and use CDNs.

Hope this helps solve the issue

Upvotes: 1

user6161288
user6161288

Reputation:

I'm not sure what you mean by contest

But I tested your live site on different sized screens and nothing disappears, it works as expected

Upvotes: 1

Related Questions