Submitted 11 months ago

3-Column Preview Card with HTML&CSS

Tharun Raj• 520

@Code-Beaker

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello, I have a doubt on centering the .wrapper on the screen for that, I used

The .container is the parent of .wrapper

<div class="container">
<div class="wrapper">
</div>
</div>

.container {
position: relative;
height: 100vh;
}

.wrapper {
display: flex;
flex-direction: row;
max-width: 800px;
max-height: 400px;
padding: 30px;
position: absolute;
inset: 0;
margin: auto;
}

Community feedback

Vanza Setia• 27,835

@vanzasetia

Posted 11 months ago

Hi, CodeBeaker! 👋

Before getting into the styling to put the cards in the middle of the page, I recommend fixing the HTML markup first.

No extra elements: You only need one <div> which is to wrap all the cards. You can remove the <div class="container">. You can use the <body> element instead.
Landmark element: You should swap the <div class="wrapper"> with <main>. Users of assistive technology can navigate through landmark elements. This will help them quickly navigate a website or application.
Replace all the <h1> with <h2>: There should not be more than one h1 on a page. Many <h1> elements mean many titles which can confuse the users, especially the screen reader users.

Then, to put all the card in the middle of the page, you can make the body element a flex or grid container of the element that wraps all the cards—<main>.

Another suggestion for styling, you do not need to use absolute positioning on the wrapper.

I hope this helps. Happy coding!

Marked as helpful

Tharun Raj• 520

@Code-Beaker

Posted 11 months ago

@vanzasetia Hi there! Thank you for solving my doubts. It will be helpful in my next projects.

Happy Coding!

Vanza Setia• 27,835

@vanzasetia

Posted 11 months ago

@Code-Beaker Happy to hear that was helpful! 😊

Seungwan Kim• 160

@polzak

Posted 11 months ago

Hello,

You've done a great job and it's a very impressive design you made!

Please let me just add another option to center the wrapper.

I downloaded your code and found that you centered it with position: absolute. The inset: 0 means left: 0; right: 0; top: 0; bottom: 0. That would not center the wrapper in its own, but it does when it combines with margin: auto. You will find the wrapper will not sit on the center if you remove either of them. In summary, position: absolute, inset: 0, and margin: auto are making the wrapper sit on the center now.

That's fine, but you can use a simpler way to center it: flex. You can center the wrapper with flexbox, without using positioning.

.container {
display: flex;
align-items: center;
/* position: relative; */
height: 100vh;
}

.wrapper {
display: flex;
flex-direction: row;
max-width: 800px;
max-height: 400px;
padding: 30px;
/* position: absolute; */
/* inset: 0;   */
margin: auto;
transition: 200ms ease;
}

Now the .container is a flex-container for a single flex-item: .wrapper. flex-direction is row, the default value, and align-items: center makes the wrapper sit at the middle on the vertical dimension. (so you will need height: 100vh for this.) In addition, margin: auto in the .wrapper style makes the wrapper sit at the center on the horizontal dimension. If you like, you can add justify-content: center in the .container style and remove margin: auto in the .wrapper style, which will create the same result.

.container {
display: flex;
align-items: center;
justify-content: center;
/* position: relative; */
height: 100vh;
}

.wrapper {
display: flex;
flex-direction: row;
max-width: 800px;
max-height: 400px;
padding: 30px;
/* position: absolute; */
/* inset: 0;   */
/* margin: auto; */
transition: 200ms ease;
}

I hope this helps a little bit.

Marked as helpful

Tharun Raj• 520

@Code-Beaker

Posted 11 months ago

@polzak Hello! Thanks for helping me out!

Happy Coding!

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