Single price grid component

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello barney, congrats on finishing the challenge! nice job!

  I will try to answer all the questions you have:

  1. I go to the device toolbar in dev tools to get the mobile view and put in 375px as width, try to nail the padding on the body the design has by eye, then do typography, and when I'm at the layout, I always seem to get in trouble regarding the size of the card / component vs font-size vs line-break...

  • If you are using a mobile first approach the normal thing to do is this, set your width to 375px and start building the project from a mobile point of view, the size of the card is something you have to try and try all over again until you get the desired result, same goes with the other sizes that the styledguide.md doesn't provide you, having the Figma of course gets you advantange on this, you can also try this chrome extension to help you out a bit.

  2. What's best practice here? Are we supposed to give a definitive width of like 300px to the mobile view card, or are we supposed to go max/min-width?

  • When you are using a mobile first workflow, I would prefer setting a max-width so my box doesn't overflow out of the screen, fixed width are not a bad idea if the box is gonna hold the size on resizing, normally when you are at 375px you don't need to resize the card smaller, so using a fixed width it's not a bad option at all.

  3. What's the logic behind 375px and 1440px in the designs? Because if my mobile view's card is 375px then the whole design is going to be bigger because of the body padding that comes on top. If I put in 375px in dev tools' mobile view, I guess the card's width based on the temporary font-size I have set and checking where the line break is supposed to happen.

  This is some kind of convention, well not a convention, is the reality, the smallest mobile screen right now is the iphone SE 2020 with 375px, this means that if your site brokes at less than 375px, it doesn't matter at all. The next breakpoint is 768px, that is the standart width for a tablet device, and then, the next one is 1440px wich is the starting width for desktop / laptop sizes. To fix sizes between diferent sizes on a mobile first workflow, start from no-media queries, then use 768px and adapt to tablet sizes (sizes, grid layouts, flex layouts) and at the end, adapt to desktop sizes at 1440px.

  If you use your media queries properly, they are not going to change things back, starting on a mobile screen and then using @media(min-width: 768px) {} means that all the styles inside that media querie are going to ignore 0 to 767px, the same goes with the desktop size.

  You can also use this chrome extension that will help a lot to get the correct values on sizes.

  Hope my feedback helps you, if you have any questions, don't hesitate to ask, we are here to help!

  0