@elaineleung
Posted
Hi Vincent Daniel, great job in putting this together and especially in learning to use pseudo classes! 😊 I think this is a good attempt in positioning elements, and I would say the next thing to work on is how to make this component responsive. There's a lot of fixed widths used and even padding for positioning, which makes it difficult for the browser to resize the component at smaller browser widths. I tried in the inspector just now to see how I change some of these properties, and I still can't make the component responsive. For instance, for the first-span
and second-span
, they are separated by a 4.75em of padding, meaning that gap is fully filled with a fixed padding and cannot be changed. To separate them, I would use flexbox instead and would use justify-content
to keep them separated, as that way, the gap between them is flexible and the component can also be resized.
In short, I recommend using responsive properties such as max-width
and to be less reliant on using fixed widths for positioning. To see what I mean about responsiveness, you can have a look at my solution here and resize the browser width to see how the component responds.
I do think you did well here on the whole in building this, well done!
Marked as helpful
@davinceey
Posted
@elaineleung , thank you so much for your feedback. How well one learns everyday! I've taken note for areas of improvement and I would apply the flex display to my spans. Thank Youuu!