'Problems with a responsive Layout

I was using the @media in the CSS style file. then I've determined to make two max-width of 1648px and 944px, for the border-radius of the grid

display:flex;
flex-direction:column;
  1. in border-radius of 1648px I made it like this
@media(max-width:1648px){
        .sedan{
            background: $bright-orange;
            border-radius: 10px 0 0 10px;
        }

I was trying to make it when it reaches the width of 944 to make the border radius of the third card be

@media(max-width:944px){
        .sedan{
            background: $bright-orange;
            border-radius: 10px 10px 0 0;
}

but when it comes to overwriting the border radius in 944px, it only uses the 1648px and doesn't use the 944px radius. why is that? // the thing is that I have 3 cards that in 1648px query its displayed flex with row direction, but the class of the card won't make the border-radius that I want so I made it one by one on the 3 cards with a column direction on 944px so the border-radius changes.

htmlcssresponsive-designfrontendmedia-queries


Solution 1:[1]

MAKE SURE YOUR CSS FOR MAX WIDTH:944px COMES AFTER MAX WIDTH:1648px Here is solution.

.main {
  display: flex;
  gap: 15px;
}

.main .sedan {
  flex: 1;
  height: 450px;
  background-color: red;
}

@media (max-width: 1648px) {
  .main .sedan {
    border-radius: 10px 0 0 10px;
  }
}

@media (max-width: 944px) {
  .main .sedan {
    border-radius: 10px 10px 0 0;
  }
}
<div class="main">
  <div class="sedan"></div>
  <div class="sedan"></div>
  <div class="sedan"></div>
</div>

Solution 2:[2]

Here's my code in scss.

@import 'settings';
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
@media screen and (max-width:1648px){
    .cards{
        display: flex;
        flex-direction: row;
        .col{
            width: 30vh;
            height: 50vh;
        }
        .sedan{
            background: $bright-orange;
            border-radius: 10px 0 0 10px;
        }
        .suvs{
            background: $dark-cyan;
        }
        .luxury{
            background: $very-dark-cyan;
            border-radius: 0 10px 10px 0;
        }
        .icon{
            margin: 25px 25px;
        }
        .paragrapgh{
            font-size: 14px;
            font-family: 'Lexend Deca',sans-serif;
            max-width: 210px;
            margin: 30px 25px;
            color: $transparent-white;
            font-weight: 300;
            line-height: 25px;
    
        }
        .header{
            padding: 5px 25px;
            font-family: 'Big Shoulders Display',sans-serif;
            font-size: 2rem;
            color: $light-grey;
            text-transform: uppercase;
        }
        .btn{
            padding: 10px 20px;
            margin: 40px 30px;
            border-radius: 2vh;
            border-style: none;
            font-family: 'Lexend Deca',sans-serif;
            cursor: pointer;
        }
        .btn:hover{
        }
        .btn-orange{
            color: $bright-orange;
        }
        .btn-orange:hover{
            color: $light-grey;
            background: transparent;
            border: 3px solid $light-grey;
            border-radius: 3vh;
            padding: 8px 17px;
    
        }
        .btn-light{
            color: $dark-cyan;
        }
        .btn-light:hover{
            color: $light-grey;
            background: transparent;
            border: 3px solid $light-grey;
            border-radius: 3vh;
            padding: 8px 17px;
    
        }
        .btn-dark{
            color: $very-dark-cyan;
        }
        .btn-dark:hover{
            color: $light-grey;
            background: transparent;
            border: 3px solid $light-grey;
            border-radius: 3vh;
            padding: 8px 17px;
        }
    }
}

@media screen and (max-width:944px){
    .cards{
        display: grid;
        flex-direction: column;
    }
    .sedan{
        border-radius: 10px 10px 0 0;
    }
    .luxury{
        border-radius: 0 0 10px 10px;
    }
}

And, Here's the HTML code.

<!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.0">
    <link rel="shortcut icon" href="images/favicon-32x32.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <title>3-column preview card component</title>
</head>
<body>
    <main class="container">
        <section class="cards">
            <section class="col sedan">
                <img src="images/icon-sedans.svg" alt="" class="icon">
                <h1 class="header">Sedans</h1>
                <p class="paragrapgh">Choose a Sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip</p>
            <button class="btn btn-orange">Learn More</button>
            </section>
            <section class="col suvs">
                <img src="images/icon-suvs.svg" alt="" class="icon">
                <h1 class="header">Suvs</h1>
                <p class="paragrapgh">Take an SUV for its spacious interior,power, and <br> versatility. Perfect for your next family vacation and off-road adventures.</p>
            <button class="btn btn-light">Learn More</button>
            </section>
            <section class="col luxury">
                <img src="images/icon-luxury.svg" alt="" class="icon">
                <h1 class="header">Luxury</h1>
                <p class="paragrapgh">Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style</p>
            <button class="btn btn-dark">Learn More</button>
            </section>
        </section>
    </main>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nikkkshit
Solution 2 Ahmed Zaki

Related Questions