Skip to content
Submitted about 2 years ago

3-Column Preview Card with HTML&CSS

Tharun Raj•1,330
@Code-Beaker
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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;
}
Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    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
  • Seungwan Kim•160
    @polzak

    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

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