Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Johnny 470

    @johnnysedh3lllo

    Submitted

    #what-i-found-difficult

    • i found making the site fully responsive on all viewports and orientations a bit difficult to do.
    • i found it hard to efficiently use css units and values
    • i also found it hard to interchange the between desktop image and the mobile image properly.

    #area-of-uncertainty

    • the scalability of my code
    • proper code formatting

    #questions-on-best-practices

    • how can i write better semantic Html?
    • how can i utilize css properties properly especially in regards to the interchanging of the images?
    • what are the best practices in case of accessibility here?
    P

    @cyberic67

    Posted

    Hello Johnny

    For different imgage source based on screen size, you can use the "srcset" attribute in a picture element:

    <picture> <source media="(min-width:660px)" srcset="images/image-product-desktop.jpg"> <img class="card__pic" src="images/image-product-mobile.jpg" alt="Product picture"> </picture>

    reference: https://www.w3schools.com/tags/att_source_srcset.asp

    Marked as helpful

    1