Design comparison
Solution retrospective
I am proud that I was able to make the design adjustments as the page shifts from desktop to tablet and to mobile.
What challenges did you encounter, and how did you overcome them?I had some issues with getting the correct images to show up on the correct layouts. I was able to hide the images using media queries so that I only got the images needed based on the layout size.
What specific areas of your project would you like help with?I would love to know if there is a different way to lay out the images and have them swap at the different size breakpoints. (I used media queries and hid images at different breakpoints). Any suggestions for other ways to do this would be appreciated!
Community feedback
- @hectorlil48Posted 3 months ago
Great work on this project. I encountered some difficulties with the images when trying to hide them. I noticed that the dividers expand based on the screen size in your solution. I suggest putting step one and two in a div that wraps both the number and the bar. After making this change, I set the circle's height and width to ensure it stays the same size.
Marked as helpful0@Stephanie-DennehyPosted 3 months ago@hectorlil48
Thank you. I had a hard time with the step numbers and getting them to look right. I will go back and try your suggestion to clean that up a bit.
1@hectorlil48Posted 2 months ago@Stephanie-Dennehy I had difficulty with it as well. I placed them in a container and specified the circle's height and width to prevent it from stretching with the screen size.
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