Design comparison
Solution retrospective
This is my 2nd attempt in the Challenges. Every suggestion on how to improve will be valuable to me.
Community feedback
- @UrbanskiDevPosted about 2 years ago
Hello Durga Jaiswal
Congratulation on finishing this challenge while trying to improve it
-
I would recommend you to fix all the HTML issues available in the rapport section above !
-
In your HTML file, you did use a "button" to make the button "Learn more". While it is a good option, you can make your own button by defining it as a "a" tag, and then use css to make it like you want
For example; a very basic way to make it looks like a button :
a { text-decoration:none; background-color:black; color:white; padding:10px; border-radius:10px; }
It will make looks like a black button, and then, you can easily add a link in the "href" of your "a" html tag to redirect.
- You tried to make it responsive, which is a good thing ! However, there's some tips I can give you :
-
When you're in desktop mode, there is a moment where you text start to resize with the design (you can use the browser dev tools to see how responsive your page is) at width 800px, maybe you could add an other media query to make it more natural between 600px and 800px.
-
You could add a min-width, to avoid your content to be resized too much if the size become too small
.section{ padding:35px; max-width: 250px; height: 350px; min-height:300px; }
- And for the margin, I would avoid to use % as an unit, it is better to use px or rem for that purpose, I add a link where you can have the best practices for units, it is a bit old, but it should help you : https://gist.github.com/basham/2175a16ab7c60ce8e001
I hope my comment will be helpful to you !
Marked as helpful1 -
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