@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using
marginorpadding.
- We don't need to use
marginandpaddingto center the component both horizontally & vertically. Because usingmarginorpaddingwill not dynamical centers our component at all states
- To properly center the component in the page, you should use
FlexboxorGridlayout. You can read more about centering in CSS here 📚.
- For this demonstration we use css
Gridto center the component.
body {
min-height: 100vh;
display: grid;
place-items: center;
}
- Now remove these styles, after removing you can able to see the changes
.card-container {
margin: 200px auto;
}
- Now your component has been properly centered
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
@BT453567
Posted
Hello @0xabdulkhalid
Thank-you for the feedback.
I presume that would just be for the desktop view? Would you say the mobile view remains the same with margin on top and auto margin at the sides?
Regards
@BT453567
Posted
Hello @0xabdulkhalid
I have found that the main tag, as it is directly within the body, is directly affected by the place-items center, and therefore this affects the alignment of my main div.
If i remove the main tags it works fine. Is there a way to mitigate the issue with the main tags?
Thanks
@0xabdulkhaliq
Posted
@BT453567,
- "I presume that would just be for the desktop view? Would you say the mobile view remains the same with margin on top and auto margin at the sides?", Actually we can smartly utilize Margin property along with Grid.
- You need to remove all margins and paddings from the component, in your case for mobile view you can remove the margin on top and auto margin on sides and then you need to apply vertical padding for
bodylikepadding: 1rem 0along withmarginof0 1remandmax-widthof36remor somethings due this changes you don't need to write styles seperately inside media queries.
- "If i remove the main tags it works fine. Is there a way to mitigate the issue with the main tags?", The issue is actually lies on unwanted nesting of
divinside ofmain. You need to directly add.left-column&.right-columnas direct child tomain.
- Like this,
<main>
<div class="left-column"></div>
<div class="right-column"></div>
</main>
- Removing
mainfrom markup will only results in accessibility issues, instead we can purge unwanted elements.
Hope this feedback helpful to you!
Marked as helpful
@BT453567
Posted
Thanks Abdul @0xabdulkhalid, some useful information there.
