Responsive landing page using CSS

Community feedback

• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Hey @introvertedailurophile🙂. Good work, but there are some issues.

  You are given 2 images (for desktop & mobile). But you only used the desktop image.

         <img
            class="left"
            src="images/image-product-desktop.jpg"
            alt="Perfume bottle"
          />
  

  You can use both using picture based on screen size. as an example:

       <picture>
              <source
                media="(min-width: 800px)"
                srcset="./images/image-product-desktop.jpg"
              />
              <img
                src="./images/image-product-mobile.jpg"
                alt="A image of perfume"
                class="product-image"
              />
         </picture>
  

  This code will change the image when the screen will be 800px or bigger.

  Marked as helpful

  1

  ---

  

  Ruqayya Dadarkar•20

  @introvertedailurophilePosted over 2 years ago

  Hey @prantiknoor, I had no idea how to do that so I figured out something on my own. Thanks a lot for your tip!! Is this a part of semantic HTML markup? I read about it only when I was editing the READme file. So didn't use it in any of my projects yet.

  0

  

  Prantik•660

  @prantiknoorPosted over 2 years ago

  @introvertedailurophile Yes, it is a part of semantic HTML markup. It's very cool. 😊

  0
• 

  Shams Wali Sowmo•130

  @Sowmo0509Posted over 2 years ago

  Heyy Ruqayya! Nicely done! I understand it's been a while you haven't worked with plain CSS, but there's something you should look at. Check the button on desktop preview. The texts are breaking, that's a problem, and the gaps between h1 and p seems too much on mobile devices. Other that these, awesome!

  Marked as helpful

  1

  ---

  

  Ruqayya Dadarkar•20

  @introvertedailurophilePosted over 2 years ago

  Hello! Thanks a lot for your feedback! I will look into those issues and fix them :)

  1
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @introvertedailurophile,

  • Replace width:40%; with width:40rem; in the center class.

  1

  ---

  

  Ruqayya Dadarkar•20

  @introvertedailurophilePosted over 2 years ago

  Hey, thanks for the tip. Could you please tell me what the difference is? I am fairly new to coding so I get confused when it comes to using units. Appreciate the help!

  0