Bootstrap 4 grid working for computer screens: resizes on browser resizing. Not resizing for phone screens (remains at medium screen setting)

Question

I am making a page with one .html file and one .css file.

I have incorporated the bootstrap 4 CDN into my html head.

The grid appears properly for the medium screen sizes but it is not resizing when I view on my phone.

I have used bootstrap 4 before with no issues in my react app but the same methods do not seem to be working with plain html and css.

my code can be seen below.

html:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Portfolio</title>
        <meta name="description" content="Showcasing my portfolio">
        <!-- Latest compiled and minified CSS (bootstrap) -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <nav>
            <div class="navLeft">
                <a href=".nameSection">NAME</a>
            </div>
            <div class="navRight">
                <a href="">PORTFOLIO</a>
                <a href="">ABOUT</a>
                <a href="">CONTACT</a>
                <a href="">CURRICULUM VITAE</a>
                <a href="">GITHUB PROFILE</a>
            </div>
        </nav>
        <div class="container">
            <div class="contentPane">
                <div class="nameSection">
                    <div class="row">
                        <div class="col-md-4 col-10 mx-auto">
                            <img src="" alt="NAME">
                            <h1>NAME</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-10 mx-auto">
                            <div class="underline" class="col-12 mx-auto"></div>
                            <h4>Front End Developer</h4>
                        </div>
                    </div>
                </div>
                <div class="portfolioSection">
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <h1>PORTFOLIO</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <div class="underline" class="col-12 mx-auto"></div>
                            <h4>Front End Developer</h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-10 mx-auto">
                            <img class="screen" id="kovScreen" src="" alt="King Of Vape Screenshot">
                        </div>
                        <div class="col-md-5 col-10 mx-auto">
                            <img class="screen" id="rgbyScreen" src="" alt="Simon Game Screenshot">
                            testcontent
                        </div>
                        <div class="col-md-5 col-10 mx-auto">
                            <img class="screen" id="osxsScreen" src="" alt="Naughts and Crosses Screenshot">
                            testcontent
                        </div>
                        <div class="col-md-5 col-10 mx-auto">
                            <img class="screen" id="pomodoroScreen" src="" alt="Pomodoro Clock Screenshot">
                            testcontent
                        </div>
                        <div class="col-md-5 col-10 mx-auto">
                            <img class="screen" id="calculatorScreen" src="" alt="Calculator Screenshot">
                            testcontent
                        </div>
                    </div>
                </div>
                <div class="aboutSection">
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <h1>PORTFOLIO</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4 mx-auto">
                            <div class="underline" class="col-12 mx-auto"></div>
                            <h4>Front End Developer</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

I do have more than 12 columns in some rows but never had an issue with it before, and as I stated earlier, everything works fine on medium screen sizes.

css:

nav {
    position: fixed;
    top: 0px;
    z-index: 1;
    display: block;
    height: 50px;
    width: 100%;
    background-color: #A65900;
    padding-top: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.68);
}

nav a {
    text-decoration: none;
    color: white;
    padding: 0 0.5em;
    display: inline;
}

nav .navLeft {
    font-size: 20px;
    display: inline;
    margin-left: 5rem;
}

nav .navRight {
    display: inline;
    margin-right: 5rem;
}

.contentPane {
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.68);
}

.nameSection {
    width: 100%;
    text-align: center;
    background-color: #FFA200;
}

.nameSection img {
    margin-top: 90px;
    max-height: 200px;
    width: 100%;
}

.underline {
    display: block;
    clear: both;
    height: 8px;
    background-color: white;
    border-radius: 5px;
    margin-bottom: 5px;
}

.nameSection h4 {
    margin-bottom: 40px;
}

.portfolioSection {
    text-align: center;
    background-color: #FFEF00;
}

.portfolioSection h1 {
    margin-top: 40px;
}

.screen {
    width: 100%;
    max-height: 200px;
}

Can anybody see what I am doing wrong?

All help is appreciated. Thanks.

One thing I would recommend is not messing with the Bootstrap `col` margin's. You have `mx-auto` on almost all your `col`'s to center them. Instead you should simply put `justify-content-center` on the containing `row` of the `col`'s you want centered. — zgood, Mar 08 '18 at 21:35
Wow thanks zgood! I had no idea about `justify-content-center`. It works so much better for what I need than `mx-auto` does. As for the responsiveness issue, it still hasn't solved anything unfortunately, but your comment is a big help to my site non-the-less! — Gurtaj, Mar 08 '18 at 22:22
Have you tried entering the above into something like jsfiddle? Based on what I'm seeing there (things are resizing in small viewports), it's hard to tell what your issue here is. Can you be a bit more specific? — Kolichikov, Mar 08 '18 at 22:58
Hi Kolichikov. No I have not tried jsfiddle yet but let me give that a go now. I am currently using chrome's inspect to see what it looks like on different phone screens and that is where I am basing my conclusion from. perhaps jsfiddle will give me some more insight.. — Gurtaj, Mar 08 '18 at 23:25
@dippas I have looked at the question which you have marked my question as the duplicate of. I actually am using col- not col-xs and have edited the title of my question appropriately. If you read the body of my question you will see that I am indeed asking something different. — Gurtaj, Mar 08 '18 at 23:27
@Kolichikov I have just tried your suggestion and run my code on jsfiddle. What do you know it works! I do not know why it is not still showing on my chrome inspect though. I will try again on there once I reboot my PC and answer/change my question accordingly. Thank you for your help! — Gurtaj, Mar 08 '18 at 23:30
Update to last comment @Kolichikov. It does work with resizing the view window on jsfiddle but as it turns out, this is not representative of how it will look on a phone screen (div sizes still are not resizing!) does anybody see why?? — Gurtaj, Mar 09 '18 at 15:17

score 4 · Accepted Answer · answered Mar 09 '18 at 15:29

4

See Responsive meta tag in the Bootstrap documentation.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

You missed out the meta viewport directive so mobile browsers will assume you have not designed a responsive website and will default to scaling for a desktop design instead.

Add the meta element.

answered Mar 09 '18 at 15:29

Quentin

914,110
126
1,211
1,335

Bless you @Quentin. It works!! I had used an index.html template for my previous react app and so I had no idea this part was needed for bootstrap. You've saved me a lot of time pal. Thanks a bunch!! – Gurtaj Mar 09 '18 at 15:47

Bootstrap 4 grid working for computer screens: resizes on browser resizing. Not resizing for phone screens (remains at medium screen setting)

1 Answers1