Design comparison
Solution retrospective
I had trouble making the background image (SVG) match the designs, both on mobile and desktop versions.
Community feedback
- @MaximilianoDanielGarciaPosted 11 months ago
Hi Sophia, good job!
The thing with the image is your media query, you should set
@media screen and (max-width: 375px)
instead ofmin-width
. Then you can improve the background image usingbackground-size: contain;
andbackground-position: center -25%;
.Also, I noticed that the card isn't fully centered, you can do it adding this styles:
body { display: grid; place-items: center; min-height: 100vh; }
After you apply this code you need to remove the
.content-container
div, It is no longer necessary.1@terryyufeiPosted 11 months ago@MaximilianoDanielGarcia Thank you so much for your help. :)
0 - @MarcoDV47Posted 11 months ago
Hey!
Here's what I noticed:
HTML
The div tags should have a closing tag, this is VERY important.
GIT
Careful when adding files to git. 3 unrelated projects were uploaded along with this. make sure to use the
cd folder-name
command to navigate to the project you want to update before usinggit add .
.Besides that, this is a great solution!
Hope it helps :)
0@terryyufeiPosted 11 months ago@MarcoDV47 Thank you so much. I fixed the open divs and passed the w3 validator. About having unrelated projects in the repo, I didn't want to make a repo for every single challenge, so I'm doing about 4 different projects per repo.
0 - @danielmrz-devPosted 11 months ago
Hello @terryyufei!
Your solution looks great!
About your issue:
- I had trouble making the background image (SVG) match the designs, both on mobile and desktop versions.
That's happening because your are using the desktop pattern on mobile version and mobile pattern on desktop version. Once you fix that and add
background-size: contain;
, it'll be just like the original design.I hope it helps!
Other than that, great job!
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