Skip to content
Submitted over 1 year ago

Responsive image for desktop and mobile

Kari5745•150
@Kari5745
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone. I really enjoyed this second challenge.

To make the image responsive and change according to screen size I used the <picture> tag. Did you use a different technique?

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted over 1 year ago

    Hi Kari5745

    It's good to hear that you are enjoying the challenges . Here is a few things to consider:

    • while there is nothing wrong in using a div, consideration should be put into elements that make your site accessible. A div does not convey any meaningful message to assistive technology users. In this challenge I would perhaps expect to see an element such as the main element . According to MDN and I quorte The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
    • The picture element is perfect to use , but I see that the image element does not have an alt value. The alt value should be present in all img elements, if the image is decorative then the alt value should be empty, otherwise the value should be short and descriptive for assistive technology.
    • For best practice , there should be only one h1 element in a site. A heading element should be able to convey a message to users (like an introduction to the content to follow), hence a heading such as a number <h1 id="finalPrice">$149.99</h1> , I think does not seem suitable to me.
    • Look into using a Modern css reset stylesheet, one popular one is by Andy Bell. It is important to reset your styles so that the site can behave the same between various browsers
    • using explicit values in elements can cause some issues , here is a snippet of your code
    .box {
background-color: hsl(0, 0%, 100%);
width: 550px;
height: 420px;
display: flex;
margin: 80px auto;
border-radius: 10px;
}

    The width will cause an overflow when the site is viewed on devices that are less than 550px, using max-width can be a better choice as that will allow the .box to scale down if the element does not fit in the container. As for the height , in general , let the element and its children decide the suitable height without restrictions.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord