Design comparison
Solution retrospective
Feel free to leave any feedbacks. All feedbacks are welcome and appreciated!
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hi Brian, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:
-
Add a
background-repeat: repeat-x;
, the image will repeat on the horizontal axis, preventing it from breaking. -
Add a
background-size: 100% 50vmin;
, the50vmin
will set its height as the page target, and100%
will make it stretch on the horizontal axis.
Feel free to choose one of the two!
I noticed that you used relative units of measurement in higher resolutions, prefer to use absolute units so that the content does not vary in size depending on the resolution, leave the relative units for lower resolutions!
The rest is great!
I hope it helps... 👍
Marked as helpful1@briangestebanPosted almost 2 years agoHi @AdrianoEscarabote! I'm doing fine and currently learning more. I really appreciate the feedback. It fix the breaking of the background image. Also noted on use of units of measurement for bigger displays. These tips really help me a lot, thank you so much!
P.S. Just a question, I've noticed the text gets blurry on the Plan/Pricing part when the horizontal scroll bar is visible. Do you know a fix for it? I can't seem to find an answer, the only thing I found is the cause which is the border-radius.
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