Design comparison
Solution retrospective
Here is my solution to this challenge.
Any feedback or suggestion is more than appreciated :)
Community feedback
- @elaineleungPosted about 2 years ago
Hi Marko, I think you did well on the whole! The only three suggestions I have are as follows:
-
The ratings and the testimonials are stretching out quite a bit before the browser width reaches the breakpoint. You can either try a smaller breakpoint, or better yet, use a
max-width
for the cards and ratings. I see that you have a max-width on the ratings but it's in a percentage, which means it will still continue to stretch. What I would suggest is to use a relative unit here, like rem. For starters, trymax-width: 25rem
and then adjust accordingly. -
At desktop view, the site main heading has quite a large line height. I tried changing it via the inspector but I was not able to for some reason. In any case, it would be great if that spacing is a bit smaller!
-
Instead of using the
picture
element for the SVGs, try having them asbackground-image
instead because they are merely functioning as decor elements, and they aren't really there to enhance the site content in any meaningful way.
Hope this could help you out!
Marked as helpful1@FrozennnPosted about 2 years ago@elaineleung Hello Elaine,
Thank you for your wonderful suggestions,
I will implement them and the max-width with rems is a really good idea.
The reason I used the picture element is that I find it to be the easiest solution when changing the images depending on the screen size because of the media attribute.
How would I achieve the same thing if I used a background image? Would media queries be necessary? And if so could you please give me an example of how I could do that?
0 -
- @IDev11Posted about 2 years ago
Hey @Frozennn, I hope you are doing great!
Congrats on finishing another challenge! I saw the preview of the site and I liked it a lot, everything was in its place, good job.
I just want to give you some tips that might help you :) , I saw you using only div and section tags, you can improve it using semantics tags to describe what is inside each block of content. You can replace the <div> that wraps each card with <article>, you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention, that <div> is only a block element without meaning. The rest is great!! I hope this will help you, and happy coding.
Marked as helpful0@FrozennnPosted about 2 years ago@IDev11 Hey,
Yes, you are right I totally forgot about the article and blockquote tags. I Will pay more attention to it.
Thanks for the feedback I appreciate it.
1
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