Submitted 8 months ago

Product preview card

Cynthia Agu•110

@cynthiachinenye

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

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

Thomas Dimnet•250

@tdimnetPosted 8 months ago

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.

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