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

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.