Responsive Flexbox

matiasnegro · December 27, 2021

Hello, and good night!

I'm doing a Front End Mentor Challenge and it requires for me to make a responsive flexbox design.

The problem is: when I change the flexbox-direction to columns, the whole page breaks. The content in the main container just overflows the viewport.

Does anybody know why or how to fix it?

Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Frontend Mentor | 3-column preview card component</title>
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&display=swap" rel="stylesheet">

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>

    *
    {margin: 0;
    padding: 0;
    box-sizing: border-box;}

    .attribution
    {font-size: 11px; text-align: center;
    position: absolute;
    bottom: 2px;}

    .attribution a
    {color: hsl(228, 45%, 44%);}

    html
    {height: 100%;}

    body
    {display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: hsl(0, 0%, 95%);}

    .maincontainer
    {display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding-top: 10%;
    padding-bottom: 7%;
    padding-right: 10%;
    padding-left: 10%;
    height: 100%;
    width: 100%;}

    .sedans
    {background-color: hsl(31, 77%, 52%);
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 0%;}

    .suvs
    {background-color: hsl(184, 100%, 22%);
    height: 100%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 0%;}

    .luxury
    {background-color: hsl(179, 100%, 13%);
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 0%;}

    .title
    {font-family: 'Big Shoulders Display', cursive;
    color: hsl(0, 0%, 95%);
    font-size: 30px;
    padding-top: 7%;}
    
    .text
    {color: hsl(0, 0%, 100%, 0.75);
    padding-top: 40px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 15px;
    padding-bottom: 70%;}

    .button
    {font-family: 'Lexend Deca', sans-serif;
    background-color: hsl(0, 0%, 95%);
    width: 120px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    height: 35px;
    bottom: 20%;
    position: fixed;}

    .button a
    {text-decoration: none;}

    .sedans .button:hover
    {background-color: hsl(31, 77%, 52%);
    border-style: solid;
    border-color: white;}

    .suvs .button:hover
    {background-color: hsl(184, 100%, 22%);
    border-style: solid;
    border-color: white;}

    .luxury .button:hover
    {background-color: hsl(179, 100%, 13%);
    border-style: solid;
    border-color: white;}

    .sedans .button a:hover
    {color: white;}

    .suvs .button a:hover
    {color: white;}

    .luxury .button a:hover
    {color: white;}
    
    .sedans .button a
    {color: hsl(31, 77%, 52%);}

    .suvs .button a
    {color: hsl(184, 100%, 22%);}

    .luxury .button a
    {color: hsl(179, 100%, 13%);}

    .image
    {height: 50px;;
    width: auto;}

    @media screen and (max-width: 375px)
    {
    
    .maincontainer
    {flex-direction: column;}


    }

  </style>
</head>
<body>
  <div class="maincontainer">
  
  <div class="sedans">
  <div class="image"><img src="https://i.ibb.co/QC2KfjT/icon-sedans.png"></div>
  <div class="title">SEDANS</div>
  <div class="text">Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city 
  or on your next road trip.</div>
  <div class="button">
  <a href="blank">Learn More</a>
  </div>
  </div>

  <div class="suvs">
  <div class="image"><img src="https://i.ibb.co/P1yyLW5/icon-suvs.png"></div>
  <div class="title">SUVs</div>
  <div class="text">Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation 
  and off-road adventures.</div>
  <div class="button">
  <a href="blank">Learn More</a>
  </div>
  </div>

  <div class="luxury">
  <div class="image"><img src="https://i.ibb.co/1d624Ty/icon-luxury.png"></div>
  <div class="title">LUXURY</div>
  <div class="text">Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury 
  rental and arrive in style.</div>
  <div class="button">
  <a href="blank">Learn More</a>
  </div>
  </div>
  
  </div>
  
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Matías Edgardo Negro</a>.
  </div>
</body>
</html>

Edited December 27, 2021 by matiasnegro

matiasnegro · December 28, 2021

Solution found!

I simply had to change the body height to auto in the media query n.n

Sign In

Responsive Flexbox

Recommended Posts

matiasnegro

Link to comment

Share on other sites

matiasnegro

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity