Responsive Huddle Landing Page With Curved Sections
Design comparison
Solution retrospective
Hello, everyone. Doing this challenge was quite a big task for me, but I absolutely loved it. But I had some issues I couldn't resolve. Here:
- What is the best solution to adding the background image to the sections?
- How do you make the image fill the entire width of the figure element?
Thanks for the help.
Community feedback
- @DavidMorgadePosted about 2 years ago
Hello Gabriel, congrats on finishing the challenge! pretty good job in my opinion!
Let me try to answer your question:
-
In this type of challenges is better just use flexbox, use them as a column for lower size devices and rows for desktop sizes.
-
You need to do a little "hacky" trick, change the
vertical-align
from baseline tovergical-align: top
on yourimg
tag!
Apart from those questions, regarding your project I would like too se some little transitions on your
buttons
instead of just the hover effect, you can usetransition: background 0.5s ease
and the will look much more smoother!Hope my feedback helps you, if you have any questions, don't hesitate to ask!
Marked as helpful0@TzienomPosted about 2 years ago@DavidMorgade Thank you for helping out. Again, I'm now having accessibility issue with my form. It says I should have my labels, but my input elements do have labels on them. Is there something I'm missing?
0@DavidMorgadePosted about 2 years ago@Tzienom Hey man! to pass that validation you need to wrap the input inside the label like this
<label> <input /* your input props */> </label>
0 -
Please log in to post a comment
Log in with GitHubJoin 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