Skip to content
Submitted over 2 years ago

Basic CSS positioning and display tools.

Shun.P•50
@Shun-planet
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  1. How do you arrange your elements base on the screen sizes you want (i.e desktop view and mobile view)?

  2. why is my web page responding to the browser zoom on desktop but not on mobile?

Thanks for the feedbacks and advice. They helped a lot to make this correction. More feedback to improve my work will be appreciated. Thanks and happy coding.

Code

Please log in to post a comment

Log in

Community feedback

  • Adriano•42,870
    @AdrianoEscarabote

    Hi Shun.P, how are you?

    Welcome to the front-end mentor community!

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • <html> element must have a lang attribute

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
  • P
    Shalom Quek•70
    @atomz520

    Hi @Shun-planet, it's great that you have completed the challenge.

    For your question about arranging elements based on screen sizes, do check out @media queries, that will allow you to have certain CSS styles targeted at different screen sizes.

    Happy coding!

    Marked as helpful
  • Fritz•300
    @fritzadelbertus

    Hello @Shun-planet. First of all, congratulations on finishing this challenge!

    Here are some few suggestion I can give:

    • Using <picture> tag is a better practice in this challenge where the image source change according to the screen width.
    • Learn how to use flexbox or grid or both. These two provide simple ways to arrange your elements. Here is a link that will help you understand how to arrange elements properly. After learning it, you can easily apply different arrangements based on the media queries.

    A Complete Guide to Flexbox

    I hope it's helpful and happy coding!

    Marked as helpful

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