Submitted over 2 years ago

3 Column Mobile and Desktop CSS HTML BEM

BerlinWebDev•40

@BerlinWebDev

Preview site View code

This is a solution for...3-column preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Used my Feedbacks in the previous projects. Thanks!

Community feedback

PhoenixDev22•16,950
@PhoenixDev22Posted over 2 years ago
Hello @BerlinWebDev ,

I have some suggestions regarding your solution:

Images must have alt text.

For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in this challenge , all the images are decorative.

About<h1>it is recommended not to have more than one h1 on the page . You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

.sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }

Each card might look :

<div class="card sedans ">/*another class for special styles for each card */ <img class="card__img" src="images/icon-sedans.svg" alt="" aria-hidden="true "/>* remove **/** to get the right path to the foldrr images as they are on the same directory. <h2 class="card__title">Sedans </h2> /*- Don't capitalise in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalised text as they will often read them letter by letter thinking they are acronyms. */ <p class="card__desc">Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p> <a href="#" class="card__more card__more__sedan">Learn More</a>/*Clicking those ``"learn more"`` would trigger navigation */ </div>

To center the component on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>.

width: 220px;an explicit width is not a good way . consider using max-width to the container that wraps the three cards.

height: 230px;It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

border-radius and overflow hidden to the container that wraps the three cards.

You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

Hopefully this feedback helps.
Marked as helpful
0
BerlinWebDev•40
@BerlinWebDevPosted over 2 years ago
@PhoenixDev22 hi thanks for the feedback! I still have some questions: (1) Should the h1 tag came between body and main? Like this:<body><h1></h1><main> (2) "consider using max-width to the container that wraps the three cards." Should I give the container a specific width? (3) still dont understand the followeing points height: 230px;It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

border-radius and overflow hidden to the container that wraps the three cards.

Maybe you could give some examples to both of them.. would be great ! thanks!
0

PhoenixDev22•16,950

@PhoenixDev22Posted over 2 years ago

hello @BerlinWebDev , you are welcome.

for your questions:

<body>
     <main>
            <h1 class=sr-only"></h1>
     <main>
</body>

CSS:


/*To center the component on the middle of the page*/

body {
    font-family: 'Lexend Deca', sans-serif;
    /* margin: 0 auto; */
    font-size: 0;
    /*text-align: center;*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
}

/*for the desktop layout */

main{
    max-width: 57.5rem ;
    width: 100%;
    margin: 1rem;
    overflow: hidden;
    border-radius: 0.25rem ;
    display: flex;
}

.card {
    text-align: left;
    /* margin: 0 auto; */
    /* height: 230px; */
    /* width: 220px; */
    flex-basis: 33.33%;
    padding: 30px;
    
}

If you make each card into a flex column you can set everything inside the card to have some margin in one direction(margin-bottom: ; ) and on the link `learn more ` margin top: auto to make sure the button always sits at the bottom.
The fixed width makes it difficult to have a responsive site. Most of the time , you won't set an explicit width.
here is an article about The difference between CSS width, min-width, and max-width property

Hopefully this feedback helps.

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