Skip to content
OverviewSolutions
8
Comments
7
Anmol Singh Tuteja
@anmolthedeveloper

All comments

  • Anmol Singh Tuteja•190
    @anmolthedeveloperPosted over 1 year ago

    Hello, Congratulations on completing this challenge

    I suspect that you're using 2 image tags, here a small tip that might interest you.

    You can use the <picture> tag which 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">
<img src="fallback-image.jpg" alt="Example image">
</picture>

    Here's a detailed reference: here

    Marked as helpful
    1
  • Anmol Singh Tuteja•190
    @anmolthedeveloperPosted over 1 year ago

    Hello, Congratulations on completing this challenge

    I observed you're using css Media Query for the image section, there's another way to achieve the same.

    Using 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">
<img src="fallback-image.jpg" alt="Example image">
</picture>

    Here's a detailed reference: here

    0
  • Nathan Lowe•450
    @NathLoweSubmitted over 1 year ago

    This is the second website of the challenge 1 day 1 website. I post a recap video of how I coded every single design with some detailed explanation, errors I encountered, and how I overcame them. Please consider connect with me on LinkedIn if you want to follow me in this journey. If there is anything wrong or not good enough, let me know. Thank you!

    Product Preview Component Card using HTML and SCSS

    2
    Anmol Singh Tuteja•190
    @anmolthedeveloperPosted over 1 year ago

    Hello, Congratulations on completing this challenge

    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">
<img src="fallback-image.jpg" alt="Example image">
</picture>

    Here's a detailed reference: here

    0
  • Anmol Singh Tuteja•190
    @anmolthedeveloperPosted over 1 year ago

    Hello, Congratulations on completing this challenge

    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">
<img src="fallback-image.jpg" alt="Example image">
</picture>

    Here's a detailed reference: here

    0
  • Dale Torres•50
    @daletorresSubmitted over 1 year ago

    On my first challenge, I only used <divs> in my HTML while in this challenge I tried using semantics such as <main>, <section>, etc. although I believe I could have used a different semantic for <section>?

    Also, I tried doing the mobile-first workflow unfortunately I was unable to stick to it and ended up doing the desktop version first again like how I did on my first challenge. Does anyone have any tips on their workflow regarding this?

    Responsive Product Preview using HTML and CSS

    2
    Anmol Singh Tuteja•190
    @anmolthedeveloperPosted over 1 year ago

    Hello, Congratulations on completing this challenge

    I suspect that the image is not response, you're using the desktop image only so, here a small tip to help you make it responsive

    You can use the <picture> tag which 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>

    Here's a detailed reference: here

    Marked as helpful
    2
  • Fatih•30
    @mFatihGorhanSubmitted over 1 year ago

    1) Mobile design width

    I struggled with the mobile design width. I noticed that the design with a width of 375 pixels does not display properly on my Xiaomi Mi 9T phone. I found that using a media query with a width of 425 pixels provides better compatibility for the mobile design. However, do you have any other suggestions for a different solution?

    2) "image-area" section and hiding images

    I have some concerns with the "image-area" section. I used the "display: none" style to hide the image in the mobile view. However, this solution may have limitations in terms of content accessibility. Is there a better alternative? Do you have any other suggestions for organizing the content in a better way?

    Product preview card component

    1
    Anmol Singh Tuteja•190
    @anmolthedeveloperPosted over 1 year ago

    Hello, Congratulations on completing this challenge

    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>

    Here's a detailed reference: here

    Marked as helpful
    1
  • Anmol Singh Tuteja•190
    @anmolthedeveloperPosted over 1 year ago

    Impressive! I think card shadow is less than the original one

    0