Submitted almost 2 years ago

Basic CSS positioning and display tools.

Shun.P• 50

@Shun-planet

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

How do you arrange your elements base on the screen sizes you want (i.e desktop view and mobile view)?
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• 34,090

@AdrianoEscarabote

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

Shalom Quek• 70

@atomz520

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

Fritz• 300

@fritzadelbertus

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

Please log in to post a comment

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