css Question posted in
Some basic documentation can be found here.

Css – How to get 4 elements in a line when they are in when they are on top a fading image?

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>
Tags:

2

Answers


  1. 0

    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 the div 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

    #products-container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #0ba1ff; /*For browsers that do not support gradients*/
    background: linear-gradient( #0ba1ff 0%,  rgb(254, 254, 254) 70%);
}
.product{
    
    display:flex;
    flex-direction: column;
    align-items:center;
    width: 20vw;/*for it will be abut 1/4 from the width*/
    height: 420px;
    background-color: blue;
    

}
    <div id="products-container">  
    <div class="product" id="fashion"></div>
    <div class="product"  id="gaming"></div>
    <div class="product"  id="pc"></div>
    <div class="product"  id="space"></div>
</div>
    Login or Signup to reply.
  2. 0

    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.)

    .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{
    position: absolute;
    top: 8px;
    display: flex;
    margin-left: 1.5%;
    margin-right: 1.5%;
    width: 97%;
}

.gaming{
    background-color: blue;
    width: 25%;
    height: 420px;
    border: 1px solid;
}

.fashion{
    background-color: blue;
    width: 25%;
    height: 420px;
    border: 1px solid;
}

.pc{
    background-color: blue;
    width: 25%;
    height: 420px;
    border: 1px solid;
}

.space{
    background-color: blue;
    width: 25%;
    height: 420px;
    border: 1px solid;
}
    <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>

    This second example is a suggestion for reducing the redundant CSS declarations using the rule .products > div to style all of the child containers.

    .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{
    position: absolute;
    top: 8px;
    display: flex;
    margin-left: 1.5%;
    margin-right: 1.5%;
    width: 97%;
}

.products > div {
    background-color: blue;
    width: 25%;
    height: 420px;
    border: 1px solid;
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search