cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
0
Upvote

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

pierremg
New Here ,
Oct 02, 2017 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 */

Views

543
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
community guidelines

correct answers 1 Correct answer

Jon Fritz Community Expert
Community Expert , Oct 02, 2017 Oct 02, 2017

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.

posit

...

Votes

Translate
replies 5 Replies 5
latest latest Jump to latest reply
Jon Fritz Community Expert
Community Expert ,
Oct 02, 2017 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;

  

}

Votes

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
community guidelines
pierremg
New Here ,
Oct 02, 2017 Oct 02, 2017

Copy link to clipboard

Copied

In Response To Jon Fritz

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

}

Votes

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
community guidelines
Jon Fritz Community Expert
Community Expert ,
Oct 02, 2017 Oct 02, 2017

Copy link to clipboard

Copied

In Response To pierremg

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?

Votes

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
community guidelines
pierremg
New Here ,
Oct 02, 2017 Oct 02, 2017

Copy link to clipboard

Copied

In Response To 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.

Votes

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
community guidelines
Jon Fritz Community Expert
Community Expert ,
Oct 02, 2017 Oct 02, 2017

Copy link to clipboard

Copied

LATEST
In Response To pierremg

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.

Votes

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
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices