Submitted over 1 year ago

React + Vite with plain css solution

prchristie• 50

@prchristie

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

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Prior to this I have done 5 frontend mentor problems using pure css and html with some javascript when needed. I am now transitioning to React. Theres 0% chance I do 5.

This one was a real challenge. The accordion was hard, I tried my own way of doing and... it worked! It doesn't have fancy animations, but its mine and it works so I'm happy. I hoped to learn some animations for it, but it never came to fruition. In addition, getting the mobile image to be placed on top was very difficult for me, but I got there. I was really proud of when I got that to work :). But it has a problem with the way Im doing something else :( To center the card, I am using flex with justify-content and align-items. All well and good. Except, the accordions expand and add more content, meaning that to remain centered the card expands vertically in both directions. I tried very hard to make it only expand downwards and didn't get anywhere. The only thing I found I could do was set a padding top on the main - essentially give it a fixed position but then the card is no longer centered. I tried a large padding top then centering but it centers only on the body of the container, meaning it was too low. But then because it expands upwards as well, when you open enough accordions the image goes off screen. You win some and you lose some :P I got some good practice getting the image aligned anyway.

I listed out some of the challenges I face while I was coding. This is an incomplete list, but here it is

Getting the shadow underneath the card to look correct
- Immediate thought was box-shadow, but that doesn't seem to quite work. I believe it would be doable by having another object there as the border radius appears to be different as well.
Overuse of flexbox
- I used flexbox pretty much everytime to try and center things. Centering things is unreasonably difficult without it tbh.
React adding a <div id="root"> to wrap all my content had so many unintended consequences. I think this will become more natural with practice though.
Managing media queries.
- I want multiple components in multiple files to react to media queries, but;
  - I dont want to have multiple sources of the size to change at
  - Then media queries are riddled throughout the code
- Is it better to have a completely separate file for the media query?
  - But then we get a super css file :/
  - Using a var in media queries doesn't seem to work
Im not sure how to make the card only expand downwards when I expand one of the accordions. In current state, when enough content is open it goes off screen (due to the image being positioned absolute and relative to the top of the card)
- It would be better to keep the top in a fixed position

Now this is not a complete solution. The desktop version's images are not working correctly. Everything else works except that. The boiling point that made me decide to shelve this challenge for now and just submit it was that I do not understand position relative vs absolute vs the others YET, and so getting those images to display correctly just doesn't seem feasible until I have a strong grasp on those concepts. Especially as one image needs to be hidden on overflow and the other needs to not. I intend to come back to do the following.

Fix those damn images
Animate the accordions
Make the card expand downwards only

My next step is to learn grid and position better. They seem very important

Community feedback

Bartosz Skrzydelski• 20

@BrtSkr

Posted over 1 year ago

You have no idea how cute it sounds and looks, when you see someone else trying to learn new things and experiencing similiar stuff.

Here are some advices from me: -Box shadow thing, I think what they did was they used either filter: box-shadow() or box-shadow with higher number of spread that gives this a bit blurred and scattered shadow.

Honestly, I would say that using flexbox often isn't a bad thing. It's probably the easiest and most consistent way to layout your elements. Maybe in larger projects it might increase loading time.

Media queries, my answer might be a bit controversial, but the best way to use media queries is not to use them. We have many other ways to create a responsive, good looking layout without them. For layouts grid, flexbox, for sizes we have calc functions, clamps which are awesome to use if you get a grasp on them, and media queries for me personally just add not wanted complexity to everything you apply them to. Only use media queries when it's necessary. When I used media queries depending on how large project it is I kept them in the same file as css/sass.

Few informations about positions: When you move element with relative position it doesn't fill the gap that you left after moving the element. When you move element with absolute position it stays relative to it's parent, so for ex. if you have a position relative div.main that contains another div.pos-abs with position absolute and you change the margin of div.pos-abs it will move around inside div.main not affecting other elements inside div.main. (If you don't have position relative in div.main, div.pos-abs will be relative to body/document).

Here you can use few solutions: To keep the elements from overflowing you can prevent it by closing other elements that are opened, by clicking on a new one (I would say that's more a workaround rather than a solution). You can add to the whole card a min-height: val, it will make sure that it won't overflow, because it will expand the card itself when it notices that the elements are about to overflow. I think the actual answer to that would be to find a way that doesn't affect layout so that there is no layout shifting, 1st solution would do that if you will use max-height or height.

I hope I might have somehow helped you.

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