Submitted about 2 months ago

responsive landing using display flex

Ashutosh-Neupane• 80

@Ashutosh-Neupane

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

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I The QR code component is well-designed with a clear layout. The use of Flexbox for centering and spacing ensures that the component looks good on various screen sizes. Implement media queries to ensure the component looks great on all screen sizes, especially on mobile devices. Adjust padding, margins, and font sizes to adapt to different screen widths.

What challenges did you encounter, and how did you overcome them?

Aligning and centering the content within the card and ensuring it looked good on different screen sizes. Solution:

Flexbox: Used Flexbox to center and align the content. Ensured that the .Card container had appropriate margins and padding. Media Queries: Implemented media queries to adjust the layout for different screen sizes and ensure responsiveness.

What specific areas of your project would you like help with?

Responsive Design: Issue: Ensuring the component adapts well to different screen sizes and devices. Help Needed: Guidance on media queries, flexible layouts, and best practices for responsive design.

Community feedback

Boris• 2,870

@mkboris

Posted about 2 months ago

Hi Ashutosh-Neupane nice work, a good start on learning how to build responsive designs and flexible layouts is by using responsive units like rem, em, and % for layout dimensions. Also, you shouldn't set fixed heights and widths on elements, the element's content and padding should determine it's size. Use max-width or min-height if you absolutely have to and the units should be defined with relative units like rem.

Other things to look at

All content should be wrapped within landmarks. Wrap a main tag around card. and a footer for the attribution. Also the footer should be the last element. More on semantic elements here
Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset.

Hope this helps

Marked as helpful

PauloHorn• 50

@PauloHorn

Posted about 2 months ago

I'm not good in english, sorry if my text is wrong. I'm learning english and programing.

I think that you should clean the text before the image, maybe start from zero. There is too much information unecessary, in my opinion, on the css. Could be more clean.

Thanks for your answer and to help me.

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