Skip to content
Submitted about 2 years ago

Responsive Product Preview Card Component

Jinet Onyango•160
@Jonyango
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

This is my 4th challenge here. I didn't have much difficulty working through this project. However, I had some issues when working on responsiveness on iPad screen sizes especially working with images. I would appreciate feedback on how to work with responsive images. I learned a couple of new HTML tags such as sup and s and did my best to ensure the use of semantic HTML.

Community feedback

  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi,

    To make things easier rather than width use max-width swap out the percentage for pixels like the following example:

    .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 800px;
    border-radius: 10px;
    margin: 4rem auto;
    padding: 2rem;
}

    The above code would result in website being more responsive.

    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