Submitted over 2 years ago

Order Summary Component using CSS flexbox and mobile first workflow

Clara Wen•320

@clarafuwen

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello! I just started to learn HTML & CSS basics, and this is my first HTML & CSS project.

I was wondering if there's a better way to position 'attribution' div under the 'container' div. There're only two main divs inside the body -- 'container' and 'attribution.' I managed to doing it by setting

'position: absolute' 'bottom: 8vh'

The problem of this setup is when resizing the web page, when the height is shortened, the attribution will touch and overlap the screen since its position is set according to the bottom. However, what I wanted to do is to set 'attribution' position below the 'container'/screen , relative to the container not to the web page.

Also, I feel that I used too many divs in the index.html, not sure if this is the best practice in terms of HTML semantics. Same goes for class selectors in styles.css.

I'm in the process of picking up the HTML&CSS basics from online tutorials, so any feedback will be appreciated.

Community feedback

Grog the Frog•480
@GregLyonsPosted over 2 years ago
Good solution! I don't actually think you're overusing <div>s, and your HTML is pretty semantic (using <p>s and headings). It looks like you have a few HTML warning/errors according to the report. You can read those and take them into consideration, but the two that stood at the most to me were

1) You have an <h2> and an <h4> but no <h3> in between ("Heading levels should only increase by one"). The differences in numbers aren't so much for styles but rather for indicating sub-sections/logical organization of the document. In this case, you using an <h4> is saying that it belongs to a "sub-sub-section" of the Order Summary (the <h2>), when really it's a sub-section.

2) You're nesting an <a> in a <button> ("Interactive controls must not be nested"). I can see where you're coming from with this since it's a button on the form, but they also take the user to new content. I think the "Change" button should just be a <button> (no <a>), as I imagine it just popping up a modal for the user to select a different plan. That's up to interpretation though, maybe it would just be an <a>... For the submit button, there are a few different options, which you can see in Sean Vieira's answer here.

As for your positioning issue, I don't think you'll be able to make the attribution not go over the main card using position: absolute, as that removes the attribution from the flow of the document. This means that it won't be affected by any margins you put on the main card. I see that you're also using absolute positioning to center the card on the page. You didn't mention that as an issue, but I think understanding this will make it easier to position your attribution, so bear with me here.

You can easily center the card horizontally by styling the <body>/<div> containing it with

display: flex; justify-content: center;

but using align-items: center; probably won't get it just right for you. The issue is that the height of the <body> depends on its content. Right now on your web page it's actually 0 if you inspect it, since you absolutely positioned your content. Were you to remove position: absolute; from your elements, the height of the <body> would increase to contain them, but it still wouldn't be the full height of the page. Thus, if you were to use align-items: center;, then it would center the content relative to the height of the <body> (i.e. not the viewport height). You would want a min-height: 100vh on your body to make its height take up the entire screen. You can read more about this here. The articles on that website are a bit more intermediate level, but you could probably still learn a lot from reading it.

That gives you another way to center your card, but how does it help with your attribution issue? Well, now your card is part of the flow of the document, so elements can be positioned around it (you should've taken off position: absolute from the card if you're using the method above). If you take position: absolute off the attribution, then it can be pushed down by the margin-bottom of the card. So, if you do something like

.container { margin-bottom: 40px }

and remove position: absolute from both elements, then the attribution should be pushed away from the card, as you like.

Hope this helps! If so, feel free to mark this post as helpful. Best of luck in your learning!
Marked as helpful
0
Clara Wen•320
@clarafuwenPosted over 2 years ago
@GregLyons Thanks for taking time to look into the errors and warning for me, and I fixed most of them. Yeah, I like your solution of centering content in <body> element. That looks much elegant than my previous solution, which aims to horizontally and vertically position the card at the center of the background... As for the 'attribution', I eventually changed it to <footer> which fits in the flow more naturally.
1
Grog the Frog•480
@GregLyonsPosted over 2 years ago
@clarafuwen Putting your attribution in a <footer> makes sense. Happy I could help!
0

Please log in to post a comment

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