Skip to content
Submitted almost 4 years ago

Vanilla HTML and CSS, no JS

Jane•1,040
@janegca
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This was a bit of a challenge. Tried to use the img srcset/size HTML tag to load the alternate file for the mobile 375px size but without any luck. Managed to get the hover, icon, and box animation effects working with CSS but cannot get the box to scale correctly. Any suggestions/hints appreciated.

Community feedback

  • tediko•6,680
    @tedikoPosted almost 4 years ago

    Hello, Jane! 👋

    Well done! Your solution looks good and responds quite well! What i would suggest is:

    • Take a look at <picture> tag. The <picture> tag gives web developers more flexibility in specifying image resources.

    • There is no need to add flexbox for your .panel. U can continue using grid for that container while resizing to mobile. Just make your grid one column and position bg-image with position: absolute. Also you need to break your design to mobile sooner, the 375px is expected to be final width of design, and you add your media-quries for that width.

    This is my approach to this challenge. Like most people here, I also learn but maybe you will find something good for yourself.

    Good luck with that, have fun coding! 💪

    2
  • Jane•1,040
    @janegcaPosted almost 4 years ago

    Hi tediko, thank you for your comments; I will check out the picture tag and review the media breakpoint.

    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