Skip to content
Submitted over 1 year ago

Responsive product card with HTML/CSS/JS (interaction with button)

Alina•150
@electr0space
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 amazing community! 👋

I'd like to ask you a question: what are your solution for displaying one image for desktop and another for mobile?

Decided to simply go with :

.mobile-img {
    display: none;
}

@media only screen and (max-width: 745px) {
    .desktop-img {
        display: none;
    }
}

What do you think? 😅

Community feedback

  • Jeremy Helsel•670
    @JIH7Posted over 1 year ago

    This looks great! I really love the touch of the button getting larger on hover and the dialogue window for clicking. Very satisfying.

    I think the way you're swapping the images is perfect, and it's also what I did for this challenge. It's mobile first which is great, and it's probably the simplest way to do that. Sure there'll always be an extra <img> tag in the hierarchy, but nevertheless this is the best way I've found to do this both in terms of performance and complexity.

    Marked as helpful
    1
    Alina•150
    @electr0spacePosted over 1 year ago

    Thank you @JIH7! ☺️

    0
  • Shane Palmer•100
    @CpalmerD20Posted over 1 year ago

    CSS media queries are a great way to accomplish this.

    Another fantastic way is with a picture element in HTML: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    The main upside to the picture tag is the media query and images will stay relevant to where they are in the document (inside HTML). Which also helps keep CSS concise and organized.

    1
    Alina•150
    @electr0spacePosted over 1 year ago

    Hello @CpalmerD20, Thank you for your reply! Interesting solution, will definitely try this one next time.☺️

    0
  • Samarth Goyal•220
    @geekSamarthPosted over 1 year ago

    Hello Alina, your solution looks perfect, instead of using 'display: none' you can use little bit of javascript and change the src attribute of the image according to the screen size.

    Hope it will help you, Happy coding!!.

    1
    Alina•150
    @electr0spacePosted over 1 year ago

    Hi @samarth-bytes , thank you for the advice, I've just started learning JavaScript and will try to implement your solution next time! ☺️

    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