Design comparison
Solution retrospective
Hello everyone,
This is my first try at html /css so be please gentle. I think the design looks okay over all. Its okay for big screen, horrible for 500px but when you reach the breakpoint 375px, looks ok again.
I have troubles centering the card to the middle. Please feel free to give any help and directions.
Thank you very much,
Jan
Community feedback
- @CarolinaCballosPosted about 3 years ago
Hola, buen trabajo! Ademas de las anteriores observaciones agregaría detalles como el color mas claro en aquello textos que no son principales, margenes y en los enlaces y botones un hover con cursor pointer.
0 - @victorraguinPosted about 3 years ago
Hey! Nice Job !
Maybe you can try with a flexbox on your .card (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ? If you can master this, it will be great for you later!
And you can replace your max-width : 400px with a width : 400px for more space.
Good continuation :)
0@JanBlahoutPosted about 3 years ago@victorraguin Hi,
thank you for your feedback. Already did the second part, and put fixed width there. I will have to look into the flexbox :)
Cheers!
0 - Account deleted
Hi,
- You should remove
.background from the css
and add thebackground-image
on the body instead;
body { background-image: url(/images/pattern-background-desktop.svg); background-size: cover; background-repeat: no-repeat; }
- Do that ^^^ and take things from there.
The card seems to be tall and thin, thus the content inside it looks squashed and have no space, and as you resize it get even smaller in width.
- I think you'd rather give the card suitable dimensions for desktop than not doing it, and take things from there.
Keep coding👍.
0@JanBlahoutPosted about 3 years ago@thulanigamtee Thank you so much, you are awesome ! :)
0 - You should remove
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