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

Product preview card

@cynthiachinenye

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am proud of how comfortable I can make use of bootstrap although I know that I still have a lots to learn

What challenges did you encounter, and how did you overcome them?

nothing much, just don't know why @ media queries the screen is not responding

What specific areas of your project would you like help with?

the media query

Community feedback

P

@tdimnet

Posted

Hi Cynthia,

Nice job so far!

Since you're using Bootstrap, you shouldn't have to use your own style:

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.main{
    background-color: #f4dff5;
}
.card{
    max-width:450px;
      
}
.price{
color:var(--bs-green);
font-size:larger;
font-weight:800;

}
.fw-lighter{
  font-size:10px;
}
.card-title{
  font-size:20px;
}
@media screen  and(max-width:425px){
  .card-title{
    font-size:50px !important;
  }
}

Nowadays one of the best and easiest way to use Bootstrap is with Sass, you can read the document on how to set up it here: https://getbootstrap.com/docs/5.3/customize/sass/.

You can update the Bootstrap's color variables here: https://getbootstrap.com/docs/5.3/customize/color/#using-the-new-colors

By the way, you don't need to use a reboot

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

Bootstrap includes a reboot by default: https://getbootstrap.com/docs/5.3/content/reboot/

Let me know if you need any resources :).

Have a nice day, Tom.

0

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