Highlighted

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

New Here ,
Oct 02, 2017

Copy link to clipboard

Copied

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 */

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

318

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Oct 02, 2017

Copy link to clipboard

Copied

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 */

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

319

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 02, 2017 0
Adobe Community Professional ,
Oct 02, 2017

Copy link to clipboard

Copied

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;

  

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2017 0
New Here ,
Oct 02, 2017

Copy link to clipboard

Copied

<!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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2017 0
Adobe Community Professional ,
Oct 02, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2017 0
New Here ,
Oct 02, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2017 0
Adobe Community Professional ,
Oct 02, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2017 0