Design comparison
Solution retrospective
I’ve met a few problems while doing this.
- I’ve tried watching yt , searching on the internet but couldn’t find a method for wrapping the grid that wont mess with the aspect of things.
- The quotes svg has the position absolute and when typing for example “top: 0;” it will move the quotes to the top of the page not the top of the article. Any idea of a fix?
- The review paragraphs wont fit the entire article height, and there is space left that is unused. Any idea for a fix?
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
BODY MEASUREMENTS 📐:
- Use
min-height: 100vh
forbody
instead ofheight: 100vh
. Setting theheight: 100vh
may result in the component being cut off on smaller screens.
- For example; if we set
height: 100vh
then thebody
will have100vh
height no matter what. Even if the content spans more than100vh
of viewport.
- But if we set
min-height: 100vh
then thebody
will start at100vh
, if the content pushes thebody
beyond100vh
it will continue growing. However if you have content that takes less than100vh
it will still take100vh
in space.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1 - @Lo-DeckPosted over 1 year ago
Ok, i've tried with your website and that is my solution I don't know if it's the best but maybe help you.
for the question 2: '''article { border-radius: 15px; padding: 2rem; box-shadow: 5px 10px 50px hsl(0, 0%, 81%); position: relative; }
.quotes { position: absolute; z-index: 0; top: 0; left: 22rem; } '''
and for the third i've just changed this: '''main { display: grid; padding: 0 0px; gap: 2rem; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; }'''
padding to zero.
and for the first I'm not sure what you want. If it's when you want to reduce the page or to turn into web mobile , uses the media queries.
Last thing the only YTchannel I know in English is slayingthedragon it was helpful for me Youtube slayingthedragon
Marked as helpful1 - @00013519Posted over 1 year ago
To the second question: I have put it as background image inside the daniel clifford section, and set the background-position-x value to 90%, so it is not going to the left completely
Marked as helpful1 - @Lo-DeckPosted over 1 year ago
Hi, for the 'position : absolute', you need to declare 'position: relative' in the article where you want to use it. Otherwise the 'position : absolute' uses the farthest ancestor.
Hope to be useful.
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