Huddle Project using Mobile-first workflow
Design comparison
Solution retrospective
- I learnt about responsive font-sizes using clamp().
- I have also used, min(), max() and calc() on padding, margins and width.
- I think I have understood when to use em, rem, px and % - please correct me if I'm wrong.
#What would I do differently?
In my next project, I will use Bootstrap.
What challenges did you encounter, and how did you overcome them?- I started working on the project with Desktop screen size and soon realized I should try using Mobile-first workflow, after reading about Bootstrap.
- I learnt about responsive sizing of font, images, padding and margin.
- I used column gap to separate elements, but because the footer elements were not responsive, I realized that gap property does not shrink the gap between elements as we resize the webpage.
- I don't think I have understood correctly the use of min() and max() for responsive design, and whats the best practice.
- At 1200px, footer element .subscribe, shifts to the right edge. I do not understand how I could center the elements, I tried using margin: 0 auto to center the footer elements but did not work.
- My webpage had a horizontal scroll, and I couldn't understand what was causing the overflow. Although, I don't have that scroll on the live url, also, don't know why.
Community feedback
- @cookie-monster01Posted about 1 month ago
Hi @Darionvr, Thank you so much. I knew about 'inspect'. I miscalculated, because I missed the margin on the text element. Could you possibly help me with references on articles that are easy to understand for min() and max().
0@DarionvrPosted about 1 month ago@cookie-monster01 Sure! For me, this video was key to understanding how to use Min, Max, and Clamp. It provides several examples. It might help you understand how it works.
https://www.youtube.com/watch?v=U9VF-4euyRo&t=974s&pp=ygUJbWluKCkgY3Nz
0 - @DarionvrPosted about 1 month ago
Hi! I don’t have much practice giving feedback, I’m quite new at this, but I was looking at your page with the browser’s element inspector. It’s very useful when you want to discover what’s causing your page to have horizontal scroll. To see it yourself, open your page and right-click anywhere; you’ll see the ‘Inspect’ option. There, you’ll see all your code on one side, and as you hover over it, each area will be highlighted in a different color. This way, you can see which part is using more space, margin, padding, etc. In this case, the ‘convo’ section is taking up more than 100% of the page. Hope this helps!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord