Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Stephen, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!
Here's some tips to improve your solution:
You need to include the title for you PAGE. Do that inserting in the <head> the tag <title> → `<title>Product preview - Front End Mentor</title>
To make the container aligned vertically, a better choice is to use
flexbox
instead of margins.I saw that you've usedmargins
andposition relative
to give the container its alignment, this works but is really tricky to control all the content. My suggestion for your is to useflexbox
to create this alignment. For example, first of all add to thebody
min-height: 100vh
to make the body display 100% of the browser screen size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.} body { min-height: 100vh; background-color: var(--accent200); display: flex; justify-content: center; align-items: center; font-family: var(--font-text); font-size: calc(8px + 0.390625vw); /* position: relative; */ } .container { display: flex; border-radius: 0.5rem; /* position: absolute; */ top: 50%; left: 50%; /* transform: translate(-50%, 0); */ width: 100%; }
👋 I hope this helps you and happy coding!
Marked as helpful1@StephenAlcantaraPosted about 2 years ago@correlucas I really appreciate this beg help! This will help me a lot in the future!
1 - @fmanimashaunPosted over 2 years ago
Nice work. I like your coding approach. But I feel you should remove the flex on the body to prevent breaking your layout as you move from desktop to mobile view.
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