Submitted about 1 year ago

Responsive 3-Column Preview Card using grid-template-areas

#bem

Matthew Millard• 50

@matthew-millard

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Is the correct way to center the component both horizontally and vertically as the contents are overflowing the viewport height? I set the top: 0; applied equal padding on both top and bottom and set translate(-50%, 0).

    position: absolute;
    top: 0;
    left:50%;
    transform: translate(-50%, 0%);
    padding: 2rem 0;
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:
    'sedans'
    'suvs'
    'luxury';
}```

Community feedback

Vanza Setia• 27,855

@vanzasetia

Posted about 1 year ago

Hi, Matthew Millard! 👋

I recommend making the <body> element a flex container of the cards to place the cards in the middle of the page. This modern technique is more robust than absolute positioning and has less code to write.

I notice that there is a hidden <h1> — <h1 class="hidden">3-Column Preview Card Component</h1>. But, it is not a visually hidden <h1>—it is completely a hidden <h1>. It means that the element is not visible to users and assistive technologies. In other words, it is the same as the page not having <h1>.

The reason for that is because visibility: hidden is removing the element from being accessible—removing the element from the accessibility tree.

You should know the correct visually hidden styling. This way, the <h1> would still be accessible.

The anatomy of visually-hidden - TPGi
See visually hidden styling — How-to: Hide content - The A11Y Project
Full accessibility tree in Chrome DevTools

I hope you find this useful. 🙂

Marked as helpful

Matthew Millard• 50

@matthew-millard

Posted about 1 year ago

@vanzasetia Thank you so much for taking the time to give me feedback and providing those resources on accessibility. I have spent a big part of today going down the accessibility rabbit hole :)

Cheers

Matthew

Vanza Setia• 27,855

@vanzasetia

Posted about 1 year ago

@matthew-millard

You are welcome! Good luck with learning web accessibility! 👍

Sameer Singh• 560

@SameerJS6

Posted about 1 year ago

The problem your facing is very basic that anyone can face, but to solve it all you have to do is use the modern solution to align content i.e. css display: grid or css display: flex. But the nonetheless, below is the solution for your problem

Here is the solution,

To center the content in the whole

body {
 display: grid;
 min-height: 100vh;
 place-content: center;
}

Don't hide the h1 title

h1 {
 color: black;
 text-align: center;
 visibility: visible;
}

For the Main Section set the max-width here

main {
 padding: 1rem;
 max-width: 900px;
 margin-inline: auto;
}

Remove all the styling that you did in the cards section, and add this one mentioned below:-

.cards {
 display: grid;
}

For making the 3 columns layout on desktop

@media (min-width: 768px) {
.cards {
 grid-template-columns: repeat(3, 1fr)
}

Then adjust the column's border-radius according to the layout i.e. either for mobile or desktop

Hope it helps you to understand the problem and let me know if this solved your problem

Marked as helpful

Matthew Millard• 50

@matthew-millard

Posted about 1 year ago

@SameerJS6 Huge thanks Sameer for taking the time to give such detailed feedback. I have now rectified the code. I understand why my approach was over-kill and more prone to cause bugs too! :)

Cheers

Matthew

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