@ratul0407
Posted
@LaxusWebDev congrats on completing your very first challenge on the site🎉🎉
You've got a little bit problems with it, but you can fix them easily😄😄. So let's start
- first change the
.component-container.
.component-container {
*/ width: 13.5% */
max-width: 400px;
padding: 1rem;
}
- and then on to your questions, You don't need media queries for this challenge. So don't even try to use it 'cause mobile and desktop designs are the same for this challenge. And you can know when to use a breakpoint by seeing when you design breaks or you can use predefined ones that bootstrap or tailwind provide (for example). And finally the 1440px breakpoint is something that frontend mentor advises to use as desktop breakpoint but it is not a standard
I hope you found this helpful👍👍
Have a nice day and best of luck for your journey on this site😄😄
Marked as helpful
@JEWebDev
Posted
@ratul0407 Thanks for your reply! It helps a lot. i tried to not use pixels because i read that as an absolute unit, it's bad for responsive designs. Does that apply here?
@ratul0407
Posted
@LaxusWebDev You should never use pixels for font size. And as far as other properties goes, If you're targeting a fixed size then pixels are fine. But if you want your layout to look good on various resolutions/screen sizes, then you should stick to more relative measures like rems or percentages. The percentage value was a little bit off so I went with width and as the design for the mobile and desktop are the same so using pixels won't be that much of a problem. But if you want to completely remove pixels from your dictionary then use rems. It's not that much of a problem. And by the way I also prefer rems for almost everything.
Marked as helpful
@JEWebDev
Posted
@ratul0407 Yeah, that makes sense. Also rems are easier to calculate than percentages. Thank you very much.
