@DevMedic11Submitted over 1 year ago
When it comes to best practices, i know the roars of "mobile-first" will be echo'd through the industry...but what does that really mean? Any tips for how to start designing small, then making things "big"?
P
Chris Cablish
@ChrisCablishAll comments
- @ChrisCablishPosted over 1 year ago
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
0 - @DzhangoSubmitted over 1 year ago
In my styles.css I have used fixed widths (311px) for the two sections of the component. I was struggling to find a way to keep it the same width on a large screen size. I was wondering what's the best way to go about, since fixed widths are not responsive.
What are your thoughts on web components and in the context of how I used them?
@ChrisCablishPosted over 1 year agoI 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 helpful0 - @ZainA11Submitted almost 2 years ago
Hello so I'm back after a break and did this challenge to revise, do you have any ideas to improve the design (especially with the desktop version)?
@ChrisCablishPosted almost 2 years agoHi 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.
0
