Skip to content
Submitted about 2 years ago

Basic CSS positioning and display tools.

Shun.P•50
@Shun-planet
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

  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.

Community feedback

  • Adriano•38,120
    @AdrianoEscarabotePosted about 2 years ago

    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
    1
  • Shalom Quek•70
    @atomz520Posted about 2 years ago

    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
    1
  • Fritz•300
    @fritzadelbertusPosted about 2 years ago

    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
    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