Simple website using basic HTML, CSS

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  PiCTURE TAG 📸:

  • Looks like you're currently using single image for both Desktop & Mobile devices,

  ---

  <img src="images/image-product-desktop.jpg" alt="Product image" draggable="false">
  
  .left-container img {
    width: 100%;
    height: 100%;
    user-select: none;
    object-fit: cover;
  }
  
  @media screen and (max-width: 375px) {
    .left-container img {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
  }
  

  • But we want to swap images according to their screen sizes. Luckily there's a native html element which may help us to achieve this method without need of css, So let me introduce the picture element.

  ---

  • The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts.

  ---

  • Example:

  <picture>
     <source media="(max-width: 768px)" srcset="small-image.jpg">
     <source media="(min-width: 769px)" srcset="large-image.jpg">
     <img src="fallback-image.jpg" alt="Example image">
  </picture>
  

  ---

  • In this example, the <picture> tag contains three child elements: two <source> elements and an <img> element. The <source> elements specifies different image sources and the conditions under which they should be used.

  ---

  • Using this approach allows you to provide different images for different screen sizes without relying on CSS, and it also helps to improve page load times by reducing the size of the images that are served to the user

  ---

  • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello again James, and again congrats, your project is very close to the proposed design.

  About the padding, I don't think that this is the problem in 375px, I think the real problem is in the div.container, I change it to width: 92% and seems it's helped a little bit. And I changed div.right-container width to widht: auto, now it's seems way better, please give a try and say what you think.

  Edit: Yeah, there was a problem with padding too, I changed padding-left and padding-right to 30px, now it's seems better.

  Again congrats on conclude another project, you are doing good, and I don't know when you started this project, but again, be cautious with Inline CSS. If somethind that I said was unclear, you know, fell free to comment bellow and I will try to help in the best possible way.

  Marked as helpful

  0

  ---

  

  Lê Hoàng Long•290

  @JamesWallison1Posted 7 months ago

  @R3ygoski Seeming that you are really active at this time, I have read through all your comment and concluded that: You are really awesome. By the way, thank you really much for the advices, I will fix that as soon as possible!

  1
• 

  Sivaprasath•2,520

  @sivaprasath2004Posted 7 months ago

  Hello i`ll wishing for your completion project solution.

  • I will give some suggestion i believe its used for improve your skill.
  • In CSS You will use

  .right-container {
      padding: 30px;
  }
  

  • I will recomand for Using rem values for padding provides a scalable and flexible approach, especially when considering accessibility and responsive design.

  .right-container {
      padding: 3rem;
  }
  

  Marked as helpful

  0