Responsive Order Summary Component

Solution retrospective
As always, would greatly appreciate any feedback.
Also, how do you guys center vertically when you have .main-container { position: absolute }
I was able to center horizontally because I had a set width for the container, but my height was auto.
Tried display flex and align-items but it didn't work.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @b-a-merritt
Hey!
I think your intuition to use flex-box is spot on, but it of course cannot be used with a
position: absolute
item. (An absolute-positioned item is removed from the flow, and flex-box items need to be in the flow).One way you could accomplish this is to put your
main-container
div in another container, position that container absolute with a set height of 100vh and a width of 100vw, then use flex-box on themain-container
inside of the new container.Whew! That seems to me like too much work.
What might be better is if you used the "background-image" CSS property on
main
rather than displaying an HTML<img/>
element. This way, you could just immediately set main to 100vh and 100vw while positioningmain-container
with flex-box right away.I think you did not do this because you wanted to display two different images - one for mobile and one for desktop. Sorry for explaining this if you already knew it, but you can use a media query to display a different image at a different screen with by using the following code in your stylesheet:
main { background-image: url('RELATIVE_PATH_FOR_MOBILE_HERE'); } @media only screen and (min-width: WIDTH_AT_WHICH_YOU_WANT_TO_CHANGE_HERE) { background-image: url('RELATIVE_PATH_FOR_DESKTOP_HERE'); }
If that wasn't the reason or that's not helpful, I'd be interested to know!
Happy coding!
Marked as helpful - @D3press3dd
I like the shadow in the plan part, really cools, btw where did you learn css?, i want to learn the
:root
part and the variables that you declared, i was looking in udemy bussines account but i couldnt find a good css course updated :c hope you have a great day and happy coding💻
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