Submitted 5 months ago

Responsive landing page using html css

sheikhhaseeb559• 80

@sheikhhaseeb559

Preview site View code

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Product Preview card template feel free to check and comment my mistakes

Community feedback

Tesla_Ambassador• 2,980

@tesla-ambassador

Posted 5 months ago

Hey sheikhhaseeb559, It's good to see that you have uploaded another solution. I like that you have integrated media queries into your css now! Kudos 🥳! Anyways, I looked at your css and noticed that there's a few things you could add to enable your container to be placed in the middle of the viewport. Here's some code you can add to your <body></body> tag:

body {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

Then you can make these changes to your container element so that the previous changes can be effective... Remove the following styles from your <div class="container"></div>:

.container {
    position: absolute;
    left: 300px;
    top: 90px;
}

Congrats on completing the challenge, happy coding!

Marked as helpful

sheikhhaseeb559• 80

@sheikhhaseeb559

Posted 5 months ago

@tesla-ambassador thanks for this is very helpful for me

Tesla_Ambassador• 2,980

@tesla-ambassador

Posted 5 months ago

@sheikhhaseeb559 I'm glad I could help 😁

Marked as helpful

Daniel 🛸• 37,650

@danielmrz-dev

Posted 5 months ago

Hello @sheikhhaseeb559!

Your project looks great!

I have a few suggestions for you to improve it:

I noticed that you used position to place your card to the middle of the page. Here are two ways to do it (one of them is kinda similar to what you did):

1- You can apply this to the body (in order to work properly, you can't use position or margins):

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

2 - or you can apply this to the element you wanna center (almost like you did):

.element {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}

I also noticed that you wrapped the main content in a div.container and used 2 h1 tags. For semantic purposes, the main content should be wrapped in a main tag. And using more that 1 h1 per page is not recommended. You can use one h1 for the main title and h2, h3, h4 and so on. This is not just about the size, it makes your HTML more semantic.

Other than those little details, you did a great job!

I hope it 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