Flexbox Responsive Payment Card

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Burak Durmuşoğlu, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

  1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

  2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

  Feel free to choose one of the two!

  Consider using rem for font size .If your web content font sizes are set in 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. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Burak Durmuşoğlu•160

  @burak2482Posted almost 2 years ago

  @AdrianoEscarabote Thank you so much, your tips are so helpful for my journey!

  1
• Account deleted

  I have some suggestion for you to improve your solution

  • if ever you want to center the content using the flex and by declaring it into the body always never forget to used the height

  body {
  display: flex;
  align-items: center;
  justify-content: center;
  
  // without this the vertical align center it will not be applied
  // always don't forget this if you want a vertical align center
  height: 100vh;
  }
  

  • never used h1 for the title of the card because h1 are only used for the main title of the website once and cards are not related to the main title of the website basically they're components. so replaced the h1 into <h3></h3> this is the most suited element when it comes to the cards title

  • product-text replace the div you used to that text into <p></p> because this is an sentence also known as description to the card so basically they're supposed to be <p>description etc...</p> not <div class="product-text">description etc... </div>

  Marked as helpful

  1

  ---

  

  Burak Durmuşoğlu•160

  @burak2482Posted almost 2 years ago

  @okayda I generally used div rather than ''p or h'' like you mention it , i will take attention from now on and for your other tips too. Thank you so much for your tips!

  0