Site's body and elements are stuck on 980px width, won't scale down

Question

I'm trying to start the front end (only HTML/CSS) page on top of a Rails app and having trouble with the 320px viewport. There are elements that will not scale down, and I cannot figure out why. I've gone through Inspect Element giving various elements a max-width: 100%; and/or width: 100%; along with other fixed widths, but something is wrong.

index.html

<div class="temple">
    <div class="container" style="height: 100%;"><div class="row" style="height: 100%;">
        <div class="templeHeader">
            Every tourist sees the temples
        </div>
    </div></div> <!-- container and row -->
</div>

I have the container and row inside the "temple" because I want the image to be 100% width, not 100% minus the container's margins.

layout.scss

@import "bootstrap-sprockets";
@import "bootstrap";

@mixin center-both {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} 

.temple {
    /* background-image: image-url("temple.jpg"); */
    position: relative;
    height: 500px;
    background-color: black;
    .templeHeader {
        font-size: 52px;
        color: white;
        position: relative;
        text-align: center;
        @include center-both;
    }
}

How can I make it so that .temple and its children are 100% max width, so that .templeHeader centers properly in the 320px viewport? I feel like I'm missing some initial setup that is messing this up.

Answer 1

You need to add this into your HTML head:

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

More here on View port Control

Currently with your HTML and this updated CSS below It is working fine for me, the .templeHeader is responsively centering.

Please see bottom of code snippet for more.

@import "bootstrap-sprockets";
@import "bootstrap";

@mixin center-both {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} 

* {
    margin:0; // It is a good idea to set these to zero at the start of
    padding:0; // your css and add them to each element individually as required
}

    .temple {
    /* background-image: image-url("temple.jpg"); */
    position: relative;
    height: 500px;
    background-color: black;
}

    .templeHeader {  //fixed this block where the curly braces were not properly defined 
        font-size: 52px;
        color: white;
        position: relative;
        text-align: center;
        @include center-both;
}

If you want the "Every tourist sees the temple" To not wrap onto multiple lines on smaller screens then use the following media query to change the font size at certain widths

@media screen and (max-width:640px) {

   .templeHeader 

        { font-size:8vw; } //this query will give you a nice responsive header all
                          // the way through various devices

}