Single Price Grid Component

Solution retrospective
How do you make the the 2 divs align besides each other? That's where the part Im getting trouble at but it is okay in mobile version but in desktop version not so much.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @yazanMhussein
hi there first thing is you are using flex layout but this design require a grid layout. so here is the code that I use to fix your problem with
body{ /add display: grid and grid-template-columns: repeat(1,2fr);/ display: grid; grid-template-columns: repeat(1,2fr); } .container{ /remove display: flex; and flex-direction: column/ display: grid; align-items: center; justify-content: center; } .card{ /* added display: grid; grid-column: span 1; */ display: grid; grid-column: span 1; } .third-card h1{ /*change margin-top to padding-top */ padding-top: 20px;}
inside the media query .container{ /add display: grid and grid-template-columns: repeat(2,2fr);/ display: grid; grid-template-columns: repeat(2,2fr); } .card{ /* added display: grid; and grid-column: span 2; / display: grid; grid-column: span 2; } .seccard-title{ /remove margin-top and margin-left/ margin-top: 0px; margin-left: 0px; } .third-card{ / change values of width: 21.5%; margin-left: 380px; margin-top: -274px; padding-left: 20px; background: contain; to new values that is down / width: 20%; margin-left: 25%; margin-top: -24.3%; padding-left: 20px; } .container{ / add container and inside put the display to block*/ display: block; }
Join 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