https://ecommerce-product-page-main-blond.vercel.app/

Community feedback

• 

  Ngouend raoul Gerard•560

  @BeinRain06Posted 3 months ago

  Hye @kingcoder ! your app looks amazing on desktop, great job !

  You can try to implement as well accessibility for mobile :

  1/ Navbar (apply a class on it )

  • Instead of applying flex on header , apply flex rather on the <nav class="nav_container"></nav> tag

  Example below :

  @media(min-width:180px) {
    .nav_container {
       width:100vw;
       height:50px;
       display: flex;
       justify-content: space-between;
       padding: 0.5rem 1rem ;
       font-size: clamp(0.7rem, 0.85rem, 1rem)
     }
   }
  
  @media(min-width:600px) {
     .nav_container {
         font-size: clamp(1rem, 1.1rem, 1.25rem)
      }
   }
  
  @media(min-width:960px) {
     .nav_container {
          font-size: clamp(1.25rem, 1.5rem, 2rem)
     }
   }
  

  2/ add class:".main_sneakers" to the <main class="main_sneakers"></main> tag and apply flex method

  @media(min-width:180px) {
     .main_sneakers {
        width:100vw;
        padding: 0.5rem 1rem ;
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items:center;
        gap: 1.5rem; 
     }
  }
  
  @media(min-width:960px) {
     .main_sneakers {
        flex-direction:row;
        justify-content: center;
        align-items:center;
        gap: 1rem; 
     }
   }
  

  3/ what @media(min-width:<size>) { //some code}

  • @media(min-width:180px) { // some code} means apply the style in bracket for screen or media devices display of at least 180px(<= 180px)

  • @media(min-width:600px) { // some code} means rewrite the new style in bracket for screen or media devices display of at least 600px(<= 600px) and so on...)

  The way to implement accessibility is to dive into media queries implementation formula

  Using @media(min-width: 180px) { //some code} is one of these formula

  For other formula you could use the term max-width or min-width and max-width instead of using min-width approach.

  Hope This Could give a clue for performing responsiveness.

  Feel free to reach me if you might have to remind me of something i forgot.

  Have an Amazing Day/Night @kingcoder ! Keep going with your project you have become good designing some Desktop Page, Go on , and don't stop your progress.

  Stay safe and healthy.

  0