Skip to content
OverviewSolutions
27
Comments
24

Anar

@anar-sol700 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Anar•700
    @anar-sol

    Hello =)

    You are opening a div element before the body, it's an invalid HTML. body is supposed to be the main element containing all the content of the page.

    You can use the W3C HTML validator to check your HTML.

    Marked as helpful
  • Anar•700
    @anar-sol

    Hello =)

    If you want to include the image as HTML content instead of using CSS background, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful
  • Anar•700
    @anar-sol

    Hello =)

    Instead of using two separate img elements, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

  • Anar•700
    @anar-sol

    Hello =)

    Instead of using CSS background to set the image, you can use picture and source HTML elements to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

  • Anar•700
    @anar-sol

    Hi =)

    Instead of using CSS to change the image, you can use picture and source HTML elements to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful
  • Anar•700
    @anar-sol

    Hello =)

    Instead of using two separate img elements, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful
View more comments