I’m trying to get 4 boxes on top of a fading image and the 4 boxes should be in a line.
I’ve tried display: flex;
, but doesn’t works and all my 4 elements are just on top of each other for now, have tried removing position: absolute;
, then it works but my elements come down from the fading image, what’s the solution to this?
.hero-fade{
background-color: #d4ebf9;
height: 200px;
width: 100%;
-webkit-mask-image: linear-gradient(black, rgba(0,0,0,0));
mask-image: linear-gradient(black, rgba(0,0,0,0));
}
.products{
display: flex;
margin-left: 1.5%;
margin-right: 1.5%;
}
.gaming{
background-color: blue;
width: 350px;
height: 420px;
position: absolute;
top: 445px;
}
.fashion{
background-color: blue;
width: 350px;
height: 420px;
position: absolute;
top: 445px;
}
.pc{
background-color: blue;
width: 350px;
height: 420px;
position: absolute;
top: 445px;
}
.space{
background-color: blue;
width: 350px;
height: 420px;
position: absolute;
top: 445px;
}
<div class="hero-fade">
</div>
<div class="products">
<div class="fashion"></div>
<div class="gaming"></div>
<div class="pc"></div>
<div class="space"></div>
</div>
2
Answers
First of all,
class
is defined for the element when you want the same design for many elements,id
when the design is on a single element, pay attention! For example on thediv
of products it is more correct to define an id.And the divs inside the products have the same design, for that you must use the same class for all of them – and that way in CSS there will be no duplication of code but one common design for all.
If in any case you want to define a different design for each product, use the id.
Here is a possible fix
Remove the positioning declarations from the individual products and position the
products
container instead.I also changed the fixed widths to a relative 25% (and added a border to visualize the boxes.)
This second example is a suggestion for reducing the redundant CSS declarations using the rule
.products > div
to style all of the child containers.