Responsive single price grid component

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello Raz, congrats on finishing the challenge!

  Normally on a real project, you need to structure you CSS for 3 different type of sizes, mobile (375px to 768px), tablets (768px 1440px) and desktop (1440px+).

  You can either take a mobile first approach, and build your site from a mobile device size, starting with no media querie usage, and then adapt it to tablet using @media (min-width: 768px), and then adapting to desktop using @media(min-width: 1440px). Or you could take the desktop first approach and start building your project from a desktop sizes, then adapt it to the other sizes using @media (max-width: 1440px) for your tablet size styles and @media(max-width: 768px) for your mobile size styles.

  Hope my answer helps you! if you have any question don't hesitate to ask!

  Marked as helpful

  1

  ---

  

  Raz Israeli•50

  @PishoToPosted over 2 years ago

  @DavidMorgade Thanks so much, David! So, this means that for each page I am going to build this way, I will have 3 "versions" of it in the CSS file, right? There is no way around it.

  Also, this doesn't necessarily guarantee that all the dimensions within each category (for example somewhere between the desktop size and the tablet size) will look great, correct?

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Raz, congratulations for your new solution!

  I've checked your live site and the code and I've some considerations for you:

  To improve your solution alignment the best thing you can do is use flex to give the alignment and min-height: 100vh to make the child element align to the body knowing that the container will be ever aligned to the screen center now that the body display 100% of the screen height.

  body {
      min-height: 100vh;
      font-family: "Karla", sans-serif;
      font-size: 16px;
      background-color: hsl(204, 43%, 93%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  
  REMOVE THE MARGINS
  
  .container {
      /* margin: 12rem 25rem; */
      /* height: 40rem; */
  }
  

  The second most important thing is to create container and responsive cards using max-width to allow the container contract to fit the screen before the media query.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Raz Israeli•50

  @PishoToPosted over 2 years ago

  @correlucas thank you so much! I will try to improve it right away! appreciate the feedback :)

  1
• 

  Patrick•800

  @PPechmannPosted over 2 years ago

  Hey Raz!

  Congrats on the solution, it is very close to the initial design!

  Regarding the responsiveness, with the way you structure it, you would need to use quite some media queries and restructure a lot of the code for each size.

  The easiest way would be to use flexbox or css grid, to position everything. This way you would require substantially less media queries.

  I hope it helps!

  Happy Coding :)

  Marked as helpful

  0

  ---

  

  Raz Israeli•50

  @PishoToPosted over 2 years ago

  @PPechmann Thanks so much for the feedback, Patrick! I will try this now.

  Much appreciated :)

  1