Submitted 4 months ago

Responsive CSS with flexbox and accessibility design

Paul Olynek• 330

@ePaulo

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

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

Learned how to use the tag to setup different images for different view-screen sizes. Coded the HTML based on the desktop design, then coded the CSS mobile before adding a media query to add code changes for the desktop layout.

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

Had to learn how to use different images for different view-screen widths.

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

How (if possible) to force side-scrolling once the mobile view-screen width reaches the min-width setting... or is there no side-scroll bar displayed on mobile screens?

Community feedback

Dilip Kumar• 350

@curiousdilip

Posted about 2 months ago

This comment was deleted about 2 months ago

Paul Olynek• 330

@ePaulo

Posted about 2 months ago

hi @curiousdilip, I used css and my design looks good on my computer running Windows 10 using the latest Firefox and Chrome browsers. What OS and browser type/version were you using to view/test my solution when you decided my "design looks bad"?

Note, I'm using CSS nesting, which looks similar to SCSS. For more information, see MDN Web Docs: Using CSS nesting

Dilip Kumar• 350

@curiousdilip

Posted about 2 months ago

@ePaulo live url - https://epaulo.github.io/product-preview-card-component/ I able to see this https://snipboard.io/SimyZ3.jpg

Paul Olynek• 330

@ePaulo

Posted about 2 months ago

@curiousdilip that's not what I and others see. So, once again, what OS and browser type/version are you using for testing? This might help you better understand why I'm asking... this webpage lists browser type/versions for which CSS Nesting currently works or doesn't: https://caniuse.com/css-nesting

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