Skip to main content
pierremg
pierremg
Participant
October 2, 2017
Answered

I can't get a div follow the CSS rules for screens with 767px

  • October 2, 2017
  • 1 reply
  • 665 views

Hi. I have a <div class="container-fluid"> and inside it are a responsive image and another div over the image. I have set some CSS rules in order to control the position of this div over the image but unfortunately it's ignoring the rule I set for 767 px screens.

<div class="container-fluid div-header-image-full">

   <div class="container-fluid div-header-image">

<img src="images/headerimage.jpg" alt="Placeholder image" class="img-responsive">

    <div class="div-form-header"><h3 class="h3-form-header">GET A QUOTE</h3>

    <form id="form1" name="form1" method="post">

     <p>

         <input name="textfield" type="text" class="form-textfield-header" id="textfield" placeholder="Name"></p>

      <p>

         <input name="textfield" type="text" class="form-textfield-header" id="textfield" placeholder="Company"></p>

         <p>

         <input name="textfield" type="text" class="form-textfield-header" id="textfield" placeholder="Site url"></p>

         <p>

             <input name="email" type="email" class="form-textfield-header" id="email" placeholder="Email">

      <p>

             <textarea name="textarea" class="form-textarea-header" id="textarea" placeholder="Project details"></textarea>

      <p>

             <input type="submit" name="submit" id="submit" value="Submit"></p>

             </p>

         </p>

  </form></div></div>

  </div>

/*Header contact form */

.div-form-header {

    background-color:aqua;

    position: absolute;

    right: 0;

    width: 35%;

    text-align: center;

    top: 30px;

   

}

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

.div-form-header {

    background-color:aqua;

    position: absolute;

    right: 0;

    width: 35%;

    text-align: center;

    top: 20px;

   

}

}

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

.div-form-header {

    background-color:aqua;

    position: absolute;

    right: 0;

    width: 35%;

    text-align: center;

    top: 12px;

   

}

}

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

.div-form-header {

    background-color:aqua;

    position: absolute;

    right: 0;

    width: 35%;

    text-align: center;

    top: 35px;

   

}

}

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

.div-form-header {

    background-color:aqua;

    position: absolute;

    width: 35%;

    text-align: center;

   

}

}

.form-textfield-header {

    width: 80%;

    border:0;

   

}

.form-textarea-header {

    width: 80%;

    height: 80px;

    border:0;

}

.h3-form-header {

    color:white;

    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";

}

/*End header contact form */

    This topic has been closed for replies.
    Correct answer Jon Fritz

    As the screen gets smaller I want the <div class="div-form-header"> to get back to its original place below the <img src="images/headerimage.jpg" alt="Placeholder image" class="img-responsive">, that's why I didn't set any location rule.


    Ah, but you have written location rules, they're in the "larger" media query.

    I put the quotes around larger because, although the pixel count is higher, both media queries apply to anything under 767 pixels. Your rules are written to stop taking affect once the browser hits a given size, essentially "everything under this pixel number, use these rules".


    Since the smaller media query doesn't specifically negate or override the rules from the larger media query, they're still going to be used.

    position:absolute and responsive design, while not mutually exclusive, are problematic companions. I'm not sure what size the image is, but you might only need to change the position:absolute back to position:static in the 767px MQ to get your desired effect. That will put the form back into the normal document flow and completely ignore any top, left, right or bottom set in previous media queries.

    1 reply

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    October 2, 2017

    Could you post a link to the page, or the entirety of the code?

    There are no rules specifying the location of your absolute positioned element in your 767px media query.

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

    .div-form-header {

        background-color:aqua;

        position: absolute;

        width: 35%;

        text-align: center;

      

    }

    pierremg
    pierremgAuthor
    Participant
    October 2, 2017

    <!DOCTYPE html>

    <html lang="en">

      <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

        <title>Untitled Document</title>

        <!-- Bootstrap -->

        <link href="css/bootstrap.css" rel="stylesheet">

        <link href="style.css" rel="stylesheet" type="text/css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

        <!--[if lt IE 9]>

              <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

              <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

            <![endif]-->

      </head>

      <body>

      <div class="container-fluid div-main">

    <nav class="navbar navbar-default">

        <div class="container-fluid">

              <!-- Brand and toggle get grouped for better mobile display -->

              <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

                <a class="navbar-brand" href="#">Brand</a></div>

              <!-- Collect the nav links, forms, and other content for toggling -->

              <div class="collapse navbar-collapse" id="defaultNavbar1">

                <ul class="nav navbar-nav">

                  <li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li>

                  <li><a href="#">Link</a></li>

                  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>

                    <ul class="dropdown-menu">

                      <li><a href="#">Action</a></li>

                      <li><a href="#">Another action</a></li>

                      <li><a href="#">Something else here</a></li>

                      <li role="separator" class="divider"></li>

                      <li><a href="#">Separated link</a></li>

                      <li role="separator" class="divider"></li>

                      <li><a href="#">One more separated link</a></li>

                    </ul>

                  </li>

                </ul>

                <form class="navbar-form navbar-left" role="search">

                  <div class="form-group">

                    <input type="text" class="form-control" placeholder="Search">

                  </div>

                  <button type="submit" class="btn btn-default">Submit</button>

                </form>

                <ul class="nav navbar-nav navbar-right">

                  <li><a href="#">Link</a></li>

                  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>

                    <ul class="dropdown-menu">

                      <li><a href="#">Action</a></li>

                      <li><a href="#">Another action</a></li>

                      <li><a href="#">Something else here</a></li>

                      <li role="separator" class="divider"></li>

                      <li><a href="#">Separated link</a></li>

                    </ul>

                  </li>

                </ul>

              </div>

              <!-- /.navbar-collapse -->

        </div>

            <!-- /.container-fluid -->

          </nav></div>

        <div class="container-fluid div-header-image-full">

       <div class="container-fluid div-header-image">

    <img src="images/headerimage.jpg" alt="Placeholder image" class="img-responsive">

        <div class="div-form-header"><h3 class="h3-form-header">GET A QUOTE</h3>

        <form id="form1" name="form1" method="post">

         <p>

             <input name="textfield" type="text" class="form-textfield-header" id="textfield" placeholder="Name"></p>

          <p>

             <input name="textfield" type="text" class="form-textfield-header" id="textfield" placeholder="Company"></p>

             <p>

             <input name="textfield" type="text" class="form-textfield-header" id="textfield" placeholder="Site url"></p>

             <p>

                 <input name="email" type="email" class="form-textfield-header" id="email" placeholder="Email">

          <p>

                 <textarea name="textarea" class="form-textarea-header" id="textarea" placeholder="Project details"></textarea>

          <p>

                 <input type="submit" name="submit" id="submit" value="Submit"></p>

                 </p>

             </p>

            

      </form></div></div>

      </div>

      <div class="container-fluid div-main div-main2">

          <div class="row feature1">

            <div class="col-md-4"><p><h3 align="center">Build or improve your mobile site</h3></p><p align="center"><img src="images/mobile.png" /></p></div>

            <div class="col-md-4"><p><h3 align="center">Convert your HTML site to Wordpress</h3></p><p align="center"><img src="images/wordpress.png" /></p></div>

            <div class="col-md-4"><p><h3 align="center">Improve your site performance</h3></p><p align="center"><img src="images/speed.png" /></p></div>

          </div>

        </div>

        <div class="container-fluid div-main">

          <h2 align="center">Why choose us?</h2>

          <div class="row feature1">

            <div class="col-md-3"><p align="center"><img src="images/1.jpg" /></p></div>

            <div class="col-md-3"><p align="center"><img src="images/2.jpg" /></p></div>

            <div class="col-md-3"><p align="center"><img src="images/3.jpg" /></p></div>

            <div class="col-md-3"><p align="center"><img src="images/4.jpg" /></p></div>

          </div>

        </div>

       

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

        <script src="js/jquery-1.11.3.min.js"></script>

        <!-- Include all compiled plugins (below), or include individual files as needed -->

        <script src="js/bootstrap.js"></script>

      </body>

    </html>

    @charset "utf-8";

    /*Header contact form */

    .div-form-header {

        background-color:aqua;

        position: absolute;

        right: 0;

        width: 35%;

        text-align: center;

        top: 30px;

       

    }

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

    .div-form-header {

        background-color:aqua;

        position: absolute;

        right: 0;

        width: 35%;

        text-align: center;

        top: 20px;

       

    }

    }

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

    .div-form-header {

        background-color:aqua;

        position: absolute;

        right: 0;

        width: 35%;

        text-align: center;

        top: 12px;

       

    }

    }

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

    .div-form-header {

        background-color:aqua;

        position: absolute;

        right: 0;

        width: 35%;

        text-align: center;

        top: 35px;

       

    }

    }

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

    .div-form-header {

        background-color:aqua;

        position: absolute;

        width: 35%;

        text-align: center;

       

    }

    }

    .form-textfield-header {

        width: 80%;

        border:0;

       

    }

    .form-textarea-header {

        width: 80%;

        height: 80px;

        border:0;

    }

    .h3-form-header {

        color:white;

        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";

    }

    /*End header contact form */

    .div-main {

        max-width: 1200px;

    }

    .div-header-image-full {

        background-color: #1d8fca;

        max-height: 500px;

    }

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

    .div-header-image-full {

        background-color: #1d8fca;

        height: 380px;

        }

    }

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

    .div-header-image-full {

        background-color: #1d8fca;

        height:auto;

        }

    }

    .div-header-image {

        max-width: 1200px;

        padding-right: 10px;

        position:relative;

       

    }

    .div-main2 {

        padding-top: 10px;

    }

    .feature1 {

        margin-left: auto;

        margin-right: auto;

        left: 0;

        right: 0;

        max-width: 1000px;

    }

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    October 2, 2017

    I'm assuming you're talking about the .div-form-header class...

    Right now, as I posted above, you don't have any rules for the actual location of that absolutely positioned div in your 767px media query. Because there's nothing specifying left, right, top or bottom, it's using the top and right rules of the 869px media query.

    Whatever top and right settings you end up adding to the 767px media query would override the right:0; and top:35px; of the previous one (the 869px MQ) in the cascade until the max-width is met, and the other one takes over.

    What, specifically, would you like it to do?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices