3 column challenge using the basics

Community feedback

• 

  imad•3,330

  @imadvvPosted over 2 years ago

  Hi Joaquin !! Congratulations on completing this challenge! , I see that you have a problem with responsive design so I take some time to look trough your code, some ways that can help you, first you don't have to use "n%" to calculate Box Modul (margin and padding), it's add mush more complexity to the layout, alternatively you can use flex and grid to make things simple and easy, so the changes that I make to your code to make it more responsive,

  /* (Mobile fist)*/
  body {
    box-sizing: border-box;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding-block: 2rem;
  }
  main {
   /* max-width: 1440px; */ 
  max-width: 25rem; /* we will change this later*/
    padding-inline: 1rem;
    margin-inline: auto;
    color: white;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
  }
  article.column {
    background-color: aquamarine;
    /* height: 500px;  remove hard coded height*/ 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem 1.5rem;
    gap: 1rem;
  /*
   margin-top: 5%;
   float: left;
  */
  }
  article.column:first-of-type {
  /*
   margin-left: 15%;
  */
  
    background-color: hsl(31, 77%, 52%);
    color: hsl(31, 77%, 52%);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  article.column:nth-of-type(2) {
    background-color: hsl(184, 100%, 22%);
    color: hsl(184, 100%, 22%);
  }
  
  article.column:last-of-type {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: hsl(179, 100%, 13%);
    color: hsl(179, 100%, 13%);
  }
  /*
  article.column > * {
      margin-left: 10%;
      margin-right: 30%;
      margin-top: 10%;
  }
  
  article.column img.icon{
      margin-left: 10%;
      margin-top: 10%;
  }
  */
  article.column h2.title {
    font-family: Big Shoulders Display;
    font-weight: 700;
    font-size: 2rem;
    color: white;
    text-transform: uppercase;
  }
  article.column p.paragraph {
    font-family: Lexend Deca;
    color: hsla(0, 0%, 100%, 0.75);
    font-weight: 400;
    max-width: 50ch;
  /*
  margin-bottom: 30%;
  */
  }
  
  article.column a.link {
    width: 100px;
    text-decoration: none;
    text-align: center;
    font-family: Lexend Deca;
    color: inherit;
    background-color: white;
    border: 3px white solid;
    border-radius: 40px;
    padding: 0.9rem 2rem;
    align-self: flex-start;
    justify-self: flex-end;
  /*
    padding-top: 5%;
      padding-right: 10%;
      padding-left: 10%;
      padding-bottom: 5%;
  */
  
  }
  
  /* ( Desktop Version) */
  
  
  @media (min-width: 45rem) {
    main {
      max-width: 65rem;
      grid-template-columns: repeat(3, 1fr);
      padding-inline: 2rem;
    }
    article.column:last-of-type {
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 0px;
      border-top-right-radius: 10px;
    }
  
    article.column:first-of-type {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }
  
  

  Hope this help!! Happy coding and keep up the good work 👍

  Marked as helpful

  0
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Joaquin, looks like this is the first challenge you completed, well done! To make the mobile version, what I would do is use flexbox on the <main> element, and then later in the CSS I would add a media query that would change it to the desktop version when the screen size is changed:

  main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  

  This just means the cards would all stack together in a column and they are aligned to the center.

  I would also remove all the margin-top and margin-left you have for now and then add that back to the media query. To add a media query, add these lines to the bottom of your CSS file (the min-width is up to you, this is just what I'm using as an example here):

  @media (min-width: 980px) {
    main {
      flex-direction: row;
    }
    article.column:first-of-type{
      margin-left: 15%;
    }
  }
  

  While I do have some other suggestions (such as using classes), I think this is a good enough start, and perhaps the biggest suggestion I would give here is to start your projects with a "mobile first" approach, meaning that you work on the mobile design and then later use media queries to change it to the desktop version instead of starting desktop first. Also, if you don't know much about flexbox yet, I also suggest learning that as that would help you out a lot in responsive design.

  Hope this helps a bit!

  Marked as helpful

  0

  ---

  

  Joaquin•70

  @joaquinrftechPosted over 2 years ago

  @elaineleung Thank you very much for the aid! I´ll try to improve everything you told me.

  0

  

  Joaquin•70

  @joaquinrftechPosted over 2 years ago

  @elaineleung Thank you very much for the aid! I´ll try to improve everything you told me.

  0