How to set html elements width to resize upon browser window resize?

I'm using Bootstrap and I'm struggling to ensure that the site is responsive to different screen sizes, i.e. when I resize my browser window, some of the elements do not resize accordingly. Similarly, when I select the iPhone display in the javascript console, it doesn't fit properly either.

Here's what I see when I halve the width my browser window: screen_view_small width window

Here's what I'd like to see when I halve the width my browser window: screen_view_expected after resize

How can I fix this so that the width of the the elements adjust properly when the window is resized? It does work for my header, but not for the other elements: col-md-10, containers and chart. Height should stay constant, but width has to be responsive. Chart is done in Highcharts, no width or height values are passed in highchart.

My html file is set up as follows:

<!doctype html>
<html>    
    <head>
        <title>my title here</title>
        <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
        <!-- Our Custom CSS -->
        <link rel="stylesheet" href="/static/css/style_charts_black.css">
        <script src="/static/js/jquery-3.2.1.min.js"></script>
        <script src="/static/Highcharts-5.0.14/code/highcharts.js"></script>
        <script src="/static/Highcharts-5.0.14/code/modules/exporting.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        </head>

    <body>

    <div class="header-container">
        <header>
            ...
        </header>
    </div>

    <div class="container-fluid content-container">
        <div class="row">
            <div class="col-md-2">
            ...
            </div>
            <div class="col-md-10">
            ...
            </div>
        </div>
    </div>

    </body>
</html>

My custom css file is set up as follows:

body {
    position: relative;
    font-family: 'GothamBook', sans-serif;
    font-size:12px;
    font-weight:300;
    height: 1100px;
    padding: 0;
    margin: 0;
}
.content-container {
    box-sizing: border-box;
    clear: both;
    float: left;
    height: 100%;
    padding: 65px 0 0;
    width: 100% !important;
    min-width: 768px;
    overflow: hidden !important;
}

.row {
    box-sizing: border-box;
    clear: both;
    float: left;
    height: 100%;
    overflow: hidden !important;
    position: relative;
    width: 99%;
    margin-left: 10px;
    margin-top: 13px;
}

.col-md-2 {
    position: relative;
    height: 100%;
    min-width: 250px;
    max-width: 250px;
    bottom: 20px;
}

.col-md-10 {
    position: absolute;
    margin-left: 255px;
    height: 100%;
    width:100%;
    bottom: 20px;
}

.chart {
    position: absolute;
    width: 98%;
    height: 92%;
    margin-top: 35px;
}

.header-container{
    float:left;
    width:100%;
    height:65px;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7);
    position:absolute;
    top:0;
    left:0;
    z-index:101;
    min-width: 768px;
}

.header-container header{
    float:left;
    width:100%;
}

Upvotes: 0

Answers (3)

Behnam Sharifha

Reputation: 44

You have to add

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

at top of the page

Upvotes: 0

DaFois

Reputation: 2223

As you can see in my example I removed all the css references to width and height you had in your code... and now it works...

Give a bounce to this:

Bootstrap Getting Started

EDIT I also changed the class to container so you can achieve what you were looking for...

<!DOCTYPE html>
<html lang="">
<head>
    <title></title>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Our Custom CSS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      * {outline: 1px solid red}
      body {
        font-family: 'GothamBook', sans-serif;
        font-size:12px;
        font-weight:300;
        padding: 0;
        margin: 0;
    }

    .chart {
        position: absolute;
        width: 98%;
        height: 92%;
        margin-top: 35px;
    }

    .header-container{
        height:65px;
        box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7);
        top:0;
        left:0;
        z-index:101;
        min-width: 768px;
    }

</style>
</head>

<body>
 <div class="container">
    <header>
        ...
    </header>
    <div class="row">
        <div class="col-md-2">
            ...
        </div>
        <div class="col-md-10">
            ...
        </div>
    </div>
</div>


</body>
</html>

Upvotes: 0

Awsme Sandy

Reputation: 1408

Dude you are using bootstrap, try their grid classes, col-md-2 col-sm-6 col-xs-12 .

Have a look at this https://getbootstrap.com/docs/3.3/css/#grid

Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
             | Extra small devices Phones (<768px)| Small devices Tablets (≥768px)  |Medium devices Desktops (≥992px)   |Large devices Desktops (≥1200px) 
__________________________________________________________________________________________________________________________________________________________
 Class prefix|   .col-xs-                         |       .col-sm-                  |       .col-md-                    |        .col-lg-
__________________________________________________________________________________________________________________________________________________________

Upvotes: 2

How to set html elements width to resize upon browser window resize?

Answers (3)

Related Questions