Clever Geek Handbook

Why is my site not loading properly on iPhones?

I am very new to this field, I am learning about front-end development and this is my second project and I don't know what the problem is.

I recently created this website :

   
    $(document).ready(function(){
        $('body').scrollspy({target:".navbar", offset: 50});
        $('nav a').smoothScroll({offset: -40});
    });
      

        
        
        
      

    
        body {
        position: relative,
    }
    body, html {
        height: 100%;
    }
    .div {
        display: block;
    }
    
    .navbar-inverse .navbar-nav>li>a {
        color: white;
    }
    
    .navbar {
        margin-bottom: 0px;
        font-size: 18px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        
    }
    
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        color: white;
        font-family: "Oleo Script", cursive;
        font-size: 25px;
    }
    
    i:hover {
        opacity: 0.4;
    }
    
    .bg { 
        position: relative;
        background-image: url("https://raw.githubusercontent.com/Arielink90/project/master/image/pexels-photo-261577.jpeg");
        height: 100%; 
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        color: white;
    }
    
    .text-stylin {
        font-family: 'Oleo Script', cursive;
        font-size: 50px;
        letter-spacing: 5px;
       
    }
    
    #front-end {
        letter-spacing: 10px;
        font-size: 25px;
        
        
    }
    
    .centered {
      position:absolute;
      left: 0;
      top: 45%;
      width: 100%;
      transform: translate(-50%, -50);
    }
    
    .centered a {
        color: white;
    }
    
    .header-icons {
         font-size: 40px;
         color: white;
         letter-spacing: 20px;
    }
    
    #about {
        background-color: rgb( 151, 150, 145);
    }
    
    
    .position {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    .img-circle {
        border-radius: 50%;
        width: 200px;
        position: inherit;
        display: block;
        margin: auto;
    }
    
    .down {
        display: grid;
        top: 30px
        
    }
    
    #hello {
        font-family: monospace;
    }
    
    #presentation {
        font-size: 18px;
        text-align: justify;
     }
    
    #hayao:hover {
        opacity: .5;
    }
    
    #project {
        margin-bottom: 42px;
    }
    
    #work {
        font-weight: bold;
        font-size: 40px
    }
    
    
    #project .col-sm-4 {
        padding: 0;
        
    }
    #project .col-sm-4 {
        padding: 20px;
        
    }
    
    .zoom {
        position: relative;
        overflow: hidden;
    }
    
    .polaroid img {
    	-webkit-transform: scale(1);
    	transform: scale(1);
    	-webkit-transition: .3s ease-in-out;
    	transition: .3s ease-in-out;
    }
    .polaroid:hover img {
    	-webkit-transform: scale(1.3);
    	transform: scale(1.3);
    }
    
    div.polaroid {
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin-bottom: 25px;
    }
    .polaroid-text {
        text-align: center;
        padding: 10px 20px;
        
    }
    
    footer {
        background-color: rgb( 16, 16, 16);
        padding-bottom: 30px;
    }
    
    .color {
        color: white
    }
    
    .icons {
        font-size: 40px;
        letter-spacing: 20px;
    }
    
    .icons a {
        color: white;
    }
      

        
        
        
      

    
     <div id="home" class="bg">
             <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#home">Portfolio</a>
        </div> 
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#home">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#project">Work</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
            <div class="centered">
                <h2 class="text-stylin">Ariel Yanes</h2>
                <h4 id="front-end">Front End Web Developer</h4>
                   <div class="header-icons">
                    <i class="fa fa-github-square" aria-hidden="true"></i>
                    <a href="https://www.freecodecamp.com/arielink90" Target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a>
                    <a href="https://www.linkedin.com/in/ariel-yanes-albuerne-7a61b4121/" Target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
                    <a href="https://codepen.io/Arielink/" Target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i></a>
               </div>
            </div>
        </div>
        
        <div id="about" class="container-fluid">
            <div class="row position">
                <div class="col-sm-4">
                    <img class="img-circle" src="https://raw.githubusercontent.com/Arielink90/project/master/image/FaceQ2017_06_29_12_07_01.png" alt="avatar image"/>
                </div>
                <div id="presentation" class="col-sm-8 down">
                    <h2 id="hello" class="text-center">Hello and Welcome to my page!</h2>
                    <p >I'm a front web developer student. Is being two-month sense I start in freeCodeCamp. I have learned a lot and I now the what a like is elegant and minimalistic web designs, that help the user to have a pleasant experience</p>
                </div>
            </div>
            
        </div>
        
        <div id="project" class="container-fluid">
            <div class="row">
                <h2 id="work" class="text-center">My Work</h2>
                <div class="col-sm-4">
                    <div class="polaroid">
                        <div class="zoom">
                            <a href="https://codepen.io/Arielink/full/GEWQwm/"><img class="img-responsive" src="https://raw.githubusercontent.com/Arielink90/project/master/image/CodePen%20-%20Hayao%20Miyazaki%20Tribute%20Page%20-%20Google%20Chrome%207_2_2017%2012_37_27%20PM.png" alt="project image"/></a>
                        </div>
                        <div class="polaroid-text">
                            <h4>Tribute Page</h4>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                   <div class="polaroid">
                       <div class="zoom">
                           <img class="img-responsive" src="https://raw.githubusercontent.com/Arielink90/project/master/image/Personal%20Portfolio%20-%20Google%20Chrome%207_2_2017%2012_38_37%20PM.png" alt="project image"/>
                       </div>
                       <div class="polaroid-text">
                           <h4>My Portfolio</h4>
                       </div>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="polaroid">
                      <div class="zoom">
                          <img class="img-responsive" src="https://raw.githubusercontent.com/Arielink90/project/master/image/Creative%20-%20Start%20Bootstrap%20Theme%20-%20Google%20Chrome%207_2_2017%2012_56_01%20PM.png" alt="project image"/>
                      </div>
                      <div class="polaroid-text">
                          <h4>Future Poject</h4>
                      </div>
                  </div>
                </div>
            </div>
        </div>
        
    <footer id="contact">
        <div class="container">
            <div class="color text-center">
                <h2>Contact Me</h2>
                <p>Name: Ariel Yanes Albuerne</p>
                <p>E-mail: xxxxxxxxxxx@gmail.com</p>
                <p>Phone Number: xxx-xxx-xxxx</p>
                  <div class="icons text-center">
                     <i class="fa fa-github-square" aria-hidden="true"></i>
                    <a href="https://www.freecodecamp.com/arielink90" Target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a>
                    <a href="https://www.linkedin.com/in/ariel-yanes-albuerne-7a61b4121/" Target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
                    <a href="https://codepen.io/Arielink/" Target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i></a>
               </div>
            </div>
              
        </div>
       
    </footer>
Run codeHide result


It works great for computers and android devices, but not iPhones and I can't seem to find the reason. If someone can explain the problem to me or give me any ideas it will be very helpful. Thank.

+3


source to share


2 answers


Probably because it is designed for large screens and it is curious when a screen smaller than a screen uses a media query in css like this



@media only screen and (min-width: 200px) {
    // insert css here that you want to be used when the screen size is bigger than 200px
}
0


source


Try adding this line to your section:



<meta name="viewport" content="width=device-width, initial-scale=1">

0


source






More articles:


All Articles