Design comparison
Solution retrospective
Please give me advice to adjust bg-pattern top and bottom in the right position!
Community feedback
- @danielmrz-devPosted 12 months ago
Hello @GrayTechFun!
Your project looks great!
I had quite a hard time placing that
background
correctly ๐ But I had help from people in the community and that's how I did it:background-color: var(--Dark-cyan); background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg"); background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 35vh, left 48vw top 52vh;
I hope it helps!
0 - @MelvinAguilarPosted 12 months ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
Firstly, remove the defined width from the <article> tag (e.g.:
width: 1440px;
) since it should take up 100% of the screen width and adapt to any device.Next, use the following code to position the elements:
background-position: right 52vw bottom 35vh, left 48vw top 52vh;
This positions the two elements separated by a comma, and using vw and vh ensures they resize appropriately regardless of the device.
- Additionally, I recommend swapping the
<main>
and<article>
tags. The<main>
tag should represent the main content of the document and should not be nested inside an <article> tag.
I hope you find it useful! ๐
Happy coding!
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