CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Carlo_Aclao
Carlo_Aclao

Reputation: 13

Website is responsive on laptop but not on iPhone

When I am on my laptop my website is how I want it to be. The top part of my website is fixed, and when I resize the windows, everything resizes with the window. However, when I go on my iPhone, it gives me the zoomed out version of the website and my top part of my website is not fixed. 

    <head>
    <title>Home page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

I included both the CDN for bootstrap and the viewport. I tried adjusting the viewport and I cannot figure it out.

iPhone screenshot:

enter image description here

Screenshot from my laptop:

enter image description here

Body HTML:

<div class="container-fluid">
        <div class="row">
            <div id="NavTop">
                <a href="#">Carlo Aclao</a>
                <p><a href="#">About</a> | <a href="#">Resume</a> | <a href="#">Work</a></p>
            </div>
        </div>
        <div class="row">
            <div id="Introduction">
                <p>$echo Welcome, Currently I am a computer science student, future software developer.</p>
            </div>
        </div>
        <div class="row" id="Info1">
                <div id="slider">
                    <img class="sliderPicture" src="images/PictureOne.jpg" alt="First Image">
                </div>
        </div>
        <div class="row" id="About">
            <div id="About1">
                <p><span class="darker">CarloAclao myLife = new CarloAclao();</span></p>
                <p><span class="darker">myLife.Origin()</span>      >> Born in the Philippines, New Jersey Resident for 15 years.</p>
                <p><span class="darker">myLife.Education()</span>   >> Currently a second year student at Raritan Valley CC. Future student at Montclair State University.</p>
                <p><span class="darker">myLife.Major()</span>       >> Computer Science</p>
                <p><span class="darker">myLife.HomeLife()</span>    >> Everything peeks my interest, anywhere from gaming to sports to health.
                Looking forward to traveling the world and expericing all the different cultures
                that this world has to offer. I am both an avid regular sports and also, esports fan
                . I currently invest in cryptocurrency, blockchain will reinvent what we do today and in my opinion
                will win in the macro. I also have two dogs that relax me when needed.</p>
                <p><span class="darker">myLife.WorkLife()</span>    >> I have always been comfortable around a computer. Coding has stepped that to the next level,
                seeing something that I have helped create satisfies me like nothing else. I like to believe that I am
                good at coding, I have a healthy balance of thinking algorthimically and inuitively. I enjoy learning and I am
                always motivated to be the best in anything I do. I always question how things work, and like to find more efficient
                ways of doing it.</p>

            </div>




        </div>

Upvotes: 1

Views: 99

Answers (1)

WebDevBooster
WebDevBooster

Reputation: 14964

That is because you aren't using any Bootstrap classes for making your website responsive. None at all.

So, you cannot expect your website to be responsive if you don't have any code for responsiveness in your HTML.

All of your content must go into Bootstrap columns. None of the content must go directly into Bootstrap rows.

Bootstrap columns are the only elements that can be direct children of Bootstrap rows.

Upvotes: 3

Related Questions