0
240
Views2 boxes side by side, the second box goes off screen
I'm trying to make 2 boxes side by side and in smaller screen the second box goes off screen
like this:
I want it stay like this until at least 900px width but the problem when screen be bigger the gap is disappears then expands https://media.giphy.com/media/33a0O0ra1S3Ou8F7u0/giphy.gif
this is my code
.boxes {
background-color: blue;
display: flex;
justify-content: space-between;
gap: 1rem;
}
.box {
width: 820px;
height: 300px;
margin-left: 0.5rem;
}
.box-1 {
margin-bottom: 0.5rem;
background-color: antiquewhite;
margin-right: 1.5rem;
}
.box-2 {
position: absolute;
left: 95%;
background-color: cadetblue;
}<div class="boxes">
<div class="box box-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
</div>
<div class="box box-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
</div>
</div>2 answers
Answer question0
Could you please specify the reason you're trying to position(absolute) the element here?
As I can see, we can achieve the end result even without positioning. Note: Here, you've not used the positioning in the correct way.
Another thing, for flexbox, gap works better compared to margin. Just check the code I've edited, you'll see.
As you want to make the width responsive, giving the width in terms of percentage would be the appropriate option.
.boxes {
background-color: blue;
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.25rem;
}
.box {
width: 50%;
height: 300px;
}
.box-1 {
background-color: antiquewhite;
}
.box-2 {
background-color: cadetblue;
}<div class="boxes">
<div class="box box-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
</div>
<div class="box box-2">
<p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
</p>
</div>
</div>0
You can add a media query to do that. Add this to you CSS :
@media all and ( min-width:900px) {
.box-2 {
position: relative;
left: 0;
}
}