Skip to content
Submitted over 2 years ago

/ Mock-up-responsive-challenge

Pedro Beltran•70
@Alex-Beltran97
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  1. I didn't want to create 2 html files to show both desktop and mobile views, so I created a JS script to calculate the resize in the browser to know which image is the right one depending on my browser resolution.

  2. The JS script to listen de resize event

  3. Yes, but I am not sure about a specific question, but I would like to get some information about it.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Vicktor•920
    @Victor-Nyagudi

    Hi, Pedro.

    You only need to have one HTML file, and that's index.html.

    If you want to style the HTML differently for different screen sizes, you can use media queries.

    These let you add breakpoints e.g. 992px and up, so you can add styling only for a certain screen size and smaller/bigger.

    If you want to use different images on different screen sizes e.g. mobile and desktop, you can use the <picture> element.

    It lets you determine at what breakpoint you want to change the current image to a different one.

    Read more about the picture element here.

    Hope this helps.

    Good luck with your other solutions.

    Marked as helpful
  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

    Hi @Alex-Beltran97 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

    I have some suggestions you might consider to improve your code:

    • This solution seems overly complicated to me. To know the dimensions of the device, it is enough to use media queries in CSS or <picture> in HTML and give styles. If there are things that can be done with CSS instead of Javascript, use CSS directly and leave Javascript last.
    • You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, and prevents you from having two html file

    Example:

    <picture>
   <source media="(max-width: 460px)" srcset="./images/image-product-mobile.jpg">
   <img src="./images/image-product-desktop.jpg" alt="your alt text">
</picture>
    • The footer element should be outside the main content (<main>).
    • The <span> element is an inline container to group text, this element does not admit other elements like <div> or <p> inside it

    I hope those tips will help you! 👍

    Good job, and happy coding! 😁

    Marked as helpful
  • DHEERAJ PUJYAM•200
    @dheeraj-90040

    Hi, nice to meet you, The image size is too big and everything is good I think this is your 1st project. so keep learning and practicing. Use flexbox instead for a good look.

    Thank you

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