Product preview card component

Hi Osama, I'll try to offer some help here! 😊 Here are some things you can try:

1. You'll first need to change your image from a background-image to an img in the HTML. I suggest using a responsive image that has srcset, which allows you to store more than one image at a different size, and then the browser can choose which one to display at the breakpoint. Since you do not have a breakpoint yet, I will choose 550px for you. Also, I will change your .left container to an .image-container. Everything looks like this:

   // CSS
   // put this under the * rule at the top
   img {
     max-width:100%;
     display: block;
   }
   
   .image-container img {
     border-radius: 15px 0 0 15px;
     object-fit: cover;
     height: 100%;
   }
   
   // HTML
   <div class="image-container">
      <img alt="Glass perfume bottle placed against a leafy background" 
           srcset="images/image-product-desktop.jpg 600w, images/image-product-mobile.jpg 686w"     
           sizes="(max-width: 550px) 686px, 600px" 
           src="images/image-product-desktop.jpg">
   </div>
   

2. For .container, change the width: 600px to max-width: 600px. Next, add margin: 1rem to give it some spacing all around, and remove height here.

3. Go to the bottom of the stylesheet and add a media query with a breakpoint of 650px:

   @media (max-width: 550px) {
      .container {
         grid-template-columns: 1fr;
      }
      .image-container img {
         border-radius: 15px 15px 0 0;
      }
   }
   

That should make it responsive! To recap: (1) Use an image, not background image, and (2) add a media query to change the layout. For the next project, I suggest that you start building the mobile layout first and then the desktop. This is called the mobile-first approach, and it will make your code easier to write. Good luck!

• favicon doesn't work because of spelling mistakes. It should belike this 👇

< link rel="icon" type="image/png" sizes="32x32" href="./images/favicon.png" />

• You could use media queries to make the website responsive.

Ex:-

@media screen and (min-width: 768px){
    .selector{
        width: 30vw;
    }
}

hope this was helpful. Happy Coding🦸‍♂️

You can style your main for mobile

display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;

and for tablet and desktop just change it from

grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;

I hope it helps checkout My Solution that may be helpful

I hope it helps and best of luck