Skip to content
Submitted 6 months ago

Responsive CSS with flexbox and accessibility design

Paul Olynek•330
@ePaulo
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

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
    @curiousdilipPosted 4 months ago

    This comment was deleted 4 months ago

    0
    Paul Olynek•330
    @ePauloPosted 4 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

    0
    Dilip Kumar•350
    @curiousdilipPosted 4 months ago

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

    0
    Paul Olynek•330
    @ePauloPosted 4 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

    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