Omar

Latest comments

• 

  Yojan kaphle•70

  @yozan21

  Submitted over 2 years ago

  

  Simple CSS styling and positioning

  #styled-components

  2

  30
  

  Omar•560

  @to-my-learning-path

  Posted over 2 years ago

  Flex will help centering the content. For example in your body class, add this:

  .body {
      width: 21%;
      background-color: hsl(0, 0%, 100%);
      padding: 1rem;
      border-radius: 5%;
  
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  

  Now you can apply the same to body element to center the whole card div.

  0
• 

  dab•10

  @Deibethb

  Submitted over 2 years ago

  

  I used flexbox

  1

  50
  

  Omar•560

  @to-my-learning-path

  Posted over 2 years ago

  Few suggestion:

  • Add descriptive text to the alt attribute of the images. Adding alternative text to images on your site is a principle of web accessibility. Learn More.
  • Use Picture element to display different images for different screen sizes. For example in your code:

  <picture>
      <source media="(max-width: 375px)"srcset="img/image-product-mobile.jpg"/>
      <img src="img/image-product-desktop.jpg" />
  </picture>
  

  0