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

Community feedback

• 

  Atif Iqbal•3,200

  @atif-devPosted almost 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

  0

  ---

  

  Om Jha•20

  @blzee-makerPosted almost 2 years ago

  @atif-dev Thank you for your response. It cleared out many things and was of great help

  0
• 

  Tomek•240

  @qntekPosted almost 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

  0

  ---

  

  Om Jha•20

  @blzee-makerPosted almost 2 years ago

  @qntek Thank you for your response. will try and keep these things in mind

  1
• 

  Adriano•38,060

  @AdrianoEscarabotePosted almost 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... 👍

  0
• 

  CyPhEr420•400

  @CyPhEr420Posted almost 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

  0

  ---

  

  Om Jha•20

  @blzee-makerPosted almost 2 years ago

  @CyPhEr420 Thank you for your response. I will start learning flexbox mind recommending me some good resource

  0

  

  CyPhEr420•400

  @CyPhEr420Posted almost 2 years ago

  @blzee-maker https://flexboxfroggy.com/ this one is good to learn basic and try to use in ur own project and it will become second nature for you

  1