Skip to content
OverviewSolutions
10
Comments
4
Alexandre JOLIET
@alexandre-joliet

All comments

  • Alexandre JOLIET•170
    @alexandre-jolietSubmitted over 1 year ago

    Hello 👋!

    Another project finished and this one was quite challenging for me! It's not perfect but I'm happy with the outcome without using any JS!

    The main difficulties were:

    • How to trigger elements and change their current state using CSS only (> input)
    • Trigger elements by the same input but with different hierarchy levels (> siblings combinators)
    • How to position correctly the pictures and layer them (> position + z-index + overflow)

    I still have one question though: how could I make my main container grow with its content? For intance, here if I deploy all the accordions, the text will go outside the container... Or maybe I could block the opening to only one tab at once somehow?

    Thank you for your feedbacks 🙏 !

    FAQ accordion card (💬 HTML & CSS only)

    1
    Alexandre JOLIET•170
    @alexandre-jolietPosted over 1 year ago

    I think I have found the answer of my "grow issue"!

    Very simple actually: I didn't pay attention in the first place but I have put an max-height to my main container. By replacing it by a min-height, problem solved!

    Always good to review your code after a good night of sleep 😅 !

    I just need to find a way to fix the position of the floating box now though...

    0
  • Alexandre JOLIET•170
    @alexandre-jolietPosted over 1 year ago

    Hello Gabriel 👋!

    Here is my proposal:

    • Try to think the main as the backgound container of the two sections
    • I have put then a min-height of 100vh for the body
    • Removed both height settings in your main
    • Add the same border-radius and box-shadow as in your sections
    • Remove the box-shadow in your media to avoid the overlap

    Maybe there are better options so I let more experts people correct me if necessary;

    Happy coding!

    Marked as helpful
    1
  • Joel Leon•100
    @iJoel23Submitted over 1 year ago

    Hey everyone!

    I have an inquiry because I think it looks good, but when I'm hovering first all the components jump a little bit, then I tried setting a height, but it seems to work in half, now when I over the button, it sort of goes down a little bit and I'm not very sure how to fix that.

    Every comment to fix it would be appreciated 😁

    Column preview component

    1
    Alexandre JOLIET•170
    @alexandre-jolietPosted over 1 year ago

    Hello Joel 👋!

    I have found your "issue": just add a 2px solid white border to your card_btn and the movement is no longer here.

    Happy coding!

    Marked as helpful
    0
  • Alexandre JOLIET•170
    @alexandre-jolietPosted over 1 year ago

    Hello Romina 👋!

    Congratulations for finishing this challenge!

    Additionnaly to what have been said above, here are some others tips:

    • Try to not specify a max-width to your body. By doing so, you will always have your element centered in the screen, no matter its dimension. You can test it very easily by using the Inspect mode (F12 key on Chrome) and unticking the max-width box in the body part.

    • Avoid to use multiple h1elements in the same page for this challenge. I'm not an expert yet on Accessibility, but what I understood is that screen readers will look in priority to these elements when loading a page to enumerate these titles. Having multiples ones and/or using them for non "real" titles elements can cause confusion for the user at the end. Maybe others elements will be more relevant to use here.

    • I'm not sure the align-self in your left_container has a particular use here (no effect when I've removed it in my test).

    Happy coding!

    Marked as helpful
    1