Search code examples
htmltwitter-bootstrapviewport

Using HTML Meta Viewport Tag with Bootstrap

I'm currently building a website in Bootstrap 4. I was using Google Lighthouse to analyze the website and it recommended that I add <meta name="viewport" content="width=device-width, initial-scale=1"> to my code's head tag to have correct display on mobile.

This tag improved my website by making text appear bigger on mobile; before, it looked like a desktop view, so the text and pictures were harder to read. Unfortunately, it also messed up the Bootstrap formatting. Text is overlapping outside of the navbar and elements and the look is completely messed up.

Before using that tag, my website looked like this on mobile:

Before Using Tag

After using that tag, my website looked like this on mobile:

After Using Tag 1 After Using Tag 2

Note how the text is easier to read, but overlaps outside of its container. Am I not supposed to use this tag while also using Bootstrap? I want to keep the increased size and improved readability of the text, but also don't want to mess up the UI.

Here is my HTML code for the page:

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styling.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Services</title>
    <meta name="Description" content="Salon's Offered Services.">
    <link rel="manifest" href="manifest.webmanifest">
</head>
<body>
    <div id="navbar"></div>
    <div class="container-fluid py-4 px-5">
        <div class="row">
            <div class="col">
                <h1 class="text-center">Your escape awaits.</h1>
                <h5>
                    Our services are customized for you to enhance your personal style and overall wellbeing. Take a moment for yourself . . . embrace your natural beauty, find a sense of balance, and, most importantly, have fun. You're always welcome at Salon.
                </h5>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-4">
                <div class="list-group" id="list-tab" role="tablist">
                    <a class="list-group-item list-group-item-action active" id="list-hair-list" data-toggle="list" href="#list-hair" role="tab" aria-controls="list-hair">Hair Services</a>
                    <a class="list-group-item list-group-item-action" id="list-facials-list" data-toggle="list" href="#list-facials" role="tab" aria-controls="list-facials">Facials</a>
                    <a class="list-group-item list-group-item-action" id="list-massages-list" data-toggle="list" href="#list-massages" role="tab" aria-controls="list-massages">Massages</a>
                    <a class="list-group-item list-group-item-action" id="list-body-list" data-toggle="list" href="#list-body" role="tab" aria-controls="list-body">Body Treatments</a>
                    <a class="list-group-item list-group-item-action" id="list-waxing-list" data-toggle="list" href="#list-waxing" role="tab" aria-controls="list-waxing">Waxing</a>
                    <a class="list-group-item list-group-item-action" id="list-sideorsolo-list" data-toggle="list" href="#list-sideorsolo" role="tab" aria-controls="list-sideorsolo">On the Side or Solo</a>
                    <a class="list-group-item list-group-item-action" id="list-nails-list" data-toggle="list" href="#list-nails" role="tab" aria-controls="list-nails">Nails</a>
                    <a class="list-group-item list-group-item-action" id="list-makeup-list" data-toggle="list" href="#list-makeup" role="tab" aria-controls="list-makeup">Makeup</a>
                </div>
            </div>
            <div class="col-8">
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="list-hair" role="tabpanel" aria-labelledby="list-hair-list">
                        <p>Consultation</p>
                        <p>Women's Haircut & Style</p>
                    </div>
                    <div class="tab-pane fade" id="list-facials" role="tabpanel" aria-labelledby="list-facials-list">...</div>
                    <div class="tab-pane fade" id="list-massages" role="tabpanel" aria-labelledby="list-massages-list">...</div>
                    <div class="tab-pane fade" id="list-body" role="tabpanel" aria-labelledby="list-body-list">...</div>
                    <div class="tab-pane fade" id="list-waxing" role="tabpanel" aria-labelledby="list-waxing-list">...</div>
                    <div class="tab-pane fade" id="list-sideorsolo" role="tabpanel" aria-labelledby="list-sideorsolo-list">...</div>
                    <div class="tab-pane fade" id="list-nails" role="tabpanel" aria-labelledby="list-nails-list">...</div>
                    <div class="tab-pane fade" id="list-makeup" role="tabpanel" aria-labelledby="list-makeup-list">...</div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="loadelements.js"></script>
</html>

Here is my CSS:

:root {
    --primary-color: #03A9F4;
    --primary-color--light: #B3E5FC;
    --secondary-color: #009688;
    --secondary-color--dark: #00675b;
    --secondary-color--light: #52c7b8;
}
html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 60px; /* Margin bottom by footer height */
}
nav {
    background-color: var(--primary-color);
}
.navbar-brand {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
}
footer {
    background-color: var(--primary-color--light);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; /* Set the fixed height of the footer here */
    line-height: 60px; /* Vertically center the text there */
}
#get-started-button {
    border-color: var(--secondary-color);
    background-color: var(--secondary-color);
}
#hairstyle-carousel {
    width: 400px;
    margin: 0 auto;
}
.list-group-item.list-group-item-action.active {
    border-color: var(--secondary-color--light);
    background-color: var(--secondary-color--light);
}
.image-description {
    color: var(--secondary-color--dark);
}
Solution

  • Make sure if you are using elements that are already only a fraction of the size of the window (such as columns), that you read their guidelines on responsiveness. For example, with the col classes you can add a breakpoint like this col-sm-4. Depending on which breakpoint you use (sm, md, lg, xl) the columns will resize to fit, responsively.

    https://getbootstrap.com/docs/4.1/layout/grid/

    This is the bootstrap page that talks all about what you’re looking for! Good luck!

    In other words, add that to your column classes and that should resolve a majority of your spacing and “crunching” issues. (I personally find the md breakpoint to be the most ideal, but again, that’s an opinion. Your site is what you want it to be!)