Submitted over 2 years ago

Product-view-card-component with just CSS and HTML

cube-css, materialize-css, tailwind-css

Om Jha•20

@blzee-maker

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

How can make a site be more Responsive to multiple devices? what is a must to know for Responsive sites?
I think the code I have provided is a little complex. what can be a much simpler option that satisfies all the required needs?
What else can be done to cross the perfume's MRP value(169.99)? Aside from using the hr tag.

Code

Please log in to post a comment

Community feedback

P
Atif Iqbal•3,320
@atif-dev
Posted over 2 years ago
Hi, for responsiveness you need to learn CSS flexbox or CSS Grid. Or you can learn responsiveness in this short course that is completely free(https://courses.kevinpowell.co/conquering-responsive-layouts) For crossing text, you can use s tag like <s>$169.99</s> or you can use text-decoration: line-through in your CSS code. If you don't know about responsiveness, it will take time to learn and make things simple.😇👍
Marked as helpful
Tomek•240
@qntek
Posted over 2 years ago
To make your page more responsive for all devices read about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

To style your page, good practice is to have separate file for css styling with you can import in head tag section, for example: <link rel="stylesheet" href="./papth-to-your-css-file.css">

To corss the perfume's value You shall use: text-decoration: line-through;
Marked as helpful
Adriano•42,890
@AdrianoEscarabote
Posted over 2 years ago
Hi Om Jha, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

Example:
```
body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}
```
avoid using px, If your web content font sizes are set to absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. if you want to keep using px for development and then format the whole code to rem, you can use this vscode extension: px to rem

The rest is great!

I hope it helps... 👍
CyPhEr420•400
@CyPhEr420
Posted over 2 years ago
use flexbox it will make your code simple you will not have to use margin so much. Try looking at other people's code and try to figure out what they r doing

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