Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3-Column Preview Card with HTML&CSS

Tharun Rajโ€ข 1,130

@Code-Beaker

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • 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,795

@vanzasetia

Posted

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

1

Tharun Rajโ€ข 1,130

@Code-Beaker

Posted

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

Happy Coding!

0
Vanza Setiaโ€ข 27,795

@vanzasetia

Posted

@Code-Beaker Happy to hear that was helpful! ๐Ÿ˜Š

1
Seungwan Kimโ€ข 160

@polzak

Posted

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

1

Tharun Rajโ€ข 1,130

@Code-Beaker

Posted

@polzak Hello! Thanks for helping me out!

Happy Coding!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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