@DevMedic11
Latest solutions
Latest comments
- @ChrisCablish
Hey there,
Most (if not all) of the challenges on this website provide multiple designs for the same challenge. Navigate to the provided mobile design and flesh that one out first. Once you have completed it, move on to the tablet (if applicable), and finally the desktop design. My understanding of the rationale is that it is fundamentally easier to expand a compact design than it is to shrink down a larger (desktop) design. Also, internet connections tend to be less stable on mobile, so having the compiler encounter the mobile design first helps with performance on mobile devices. Be sure to check into media queries for CSS responsive design if you haven't already done so. Hope this helps.
-Chris
- @Dzhango@ChrisCablish
I think the fact that the solution you provided includes breakpoints where the design changes after the screen reaches a certain width (from mobile to desktop) means that technically your design is responsive. If you wanted the width to change along with the width of the screen you could look into using width as a percentage. For instance, if you wanted your component to take up 80% of the width of the body of your desktop design at all times you could set that element to width: 80%. That way the component will always take up 80% of its container (probably <body>) no matter if the screen is 1000px wide or 1440px wide or anywhere in between. Not sure if this is what you are asking exactly but figured i would give it a go.
Marked as helpful - @ZainA11@ChrisCablish
Hi Zain, I'm pretty new to front-end, but it looks to me like if you wanted to get the spacing between your elements closer to what is depicted in the desktop challenge design, you could use the following on your div.preview selector:
display:flex; flex-direction: column; justify-content: space-between or space around.
This should cause the elements to space out evenly, filling out the entirety of the available horizontal space.
