Product preview card component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  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!

  Marked as helpful

  2

  ---

  

  osama•270

  @osamanazakatPosted about 2 years ago

  @elaineleung Thank You so much for the solution 😊

  1
• 

  Naleeka•470

  @NaleekaPosted about 2 years ago

  • 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🦸‍♂️

  Marked as helpful

  1

  ---

  

  osama•270

  @osamanazakatPosted about 2 years ago

  @Naleeka Thanks bro 👍

  1

  

  Naleeka•470

  @NaleekaPosted about 2 years ago

  @osamanazakat It's an honor to help you itachi 😄🖤

  1
• 

  Abdul Raouf•410

  @raoufrofiPosted about 2 years ago

  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

  1

  ---

  

  osama•270

  @osamanazakatPosted about 2 years ago

  @Abdul-Raouf-33 Thanks bro for help 👍

  0