CSS: Absolute div and media query

pseudodejapris 0
Viewed 36

I assume this has been posted before and I apologize in advance, I'm afraid I didn't find the solution.

My issue: I have a design with two divs, one must be transparent on top of the other. I was able to achieve that with div 1: position relative and div 2: position absolute, z-index: 1. However the page must be responsive and I cannot change the size of the absolute div.

Somehow, I need to find a way to make the transparent absolute div responsive with media query.

Basically, this is the desired design:

.main {
display: flex;
}
.content {
height: 200px;
padding-left: 36px;
padding-right: 100px;
position: relative;
flex: 1;
background-color: lightblue;
}

.visual {
width: 200px;
height: 300px;
position: absolute;
z-index: 1;
right: 24px;
background-color:rgba(106, 132, 226, 0.1);
  <div class="main">
        <div class="content">
         <h1 id="header">title</h1>
            </header>
            <div class="description">
                <h3 id="description-text">Text</h3>
            </div>
        </div>

        <div class="visual">
            <h3>Transparent div</h3>
        </div>
    </div>
    </div>

absolute media-queries responsive css html
1 Answers

change width to percent instead of px

and for media query, you must set width for each query.

* {
  border: 1px solid red;
}

.main {
  display: flex;
  }

  .content {
  height: 200px;
  padding-left: 36px;
  padding-right: 100px;
  position: relative;
  flex: 1;
  background-color: lightblue;
  }
  
  .visual {
  width: 700px;
  height: 300px;
  position: absolute;
  z-index: 1;
  right: 24px;
  background-color:rgba(106, 132, 226, 0.1);
  }

  @media only screen and (max-width: 600px) {
    .visual {
      width: 400px;
    }

  }
<div class="main">
    <div class="content">
     <h1 id="header">title</h1>
        </header>
        <div class="description">
            <h3 id="description-text">Text</h3>
        </div>

        <div class="visual">
          <h3>Transparent div</h3>
      </div>
    </div>

Willpower-70
Related