Skip to content
OverviewSolutions
9
Comments
6
Galdino
@GaldinoMat

All comments

  • Muhammad Hisham•675
    @mohamedhesham221Submitted over 3 years ago

    here is my FAQ with HTML & CSS without javascript, I used a radio box to show and hide answers any feedback and suggestions are very appreciated Thanks

    HTML & CSS (No Javascript)

    2
    Galdino•215
    @GaldinoMatPosted over 3 years ago

    Hey man, good job! But I think your solution has some issues. Regarding the box image, try putting the container in position:relative, so the box doesn't move when we try to check for responsiveness. This can also be checked for the mobile image, since it gets on the text's way when the device is 760 - 500px wide. Also, check the container's size for lower resolution devices, since it gets too big. My tips is: try to design the solution using a mobile first approach, and limit yourself to 2 media queries, since too many rules can cause conflicts and weird behaviours. But good job with the radio-buttons. I used a similar approach on my own solution and was quite happy with it. Be proud of yourself!

    2
  • Galdino•215
    @GaldinoMatPosted over 3 years ago

    Hey man, great job! But I think you forgot to specify the font-family.

    1
  • Galdino•215
    @GaldinoMatPosted over 3 years ago

    Hey man. Good job! But, like you said, the responsiveness is a bit strange, since the cards do not move until a certain point where they are already well hidden by the screen. My suggestion is to research on how to improve you grid and its responsiveness, since, in my opinion, it is the issue here.

    0
  • dhakobja•85
    @dhakobjaSubmitted over 3 years ago

    First of all, thanks for looking at my code ^^. I had some problems figuring out, how to change both the mobile and desktop design without interfering with each other.I tried to use one media query, but it somehow didnt work. Then i came to the solution to use two media querys. Therefore my css code got way too long(?). Is it practical to do it this way or is there an better alternative. I also want to know, if used "display: flex" too often? Is it bad to do it and why? If there is anything that is worth mentioning, pls do so. I appreciate every comment !

    HTML and CSS solution using lots of Flexbox

    1
    Galdino•215
    @GaldinoMatPosted over 3 years ago

    Hey man, nice solution! Maybe on next ones try to use a mobile first approach, so the code looks a bit less repetitive and the desktop version comes in a little more naturally. And while I'm still on the same boat as you (newbie projects), I don't think there is any problem in using flexbox that much. I've tried to use css grid but I end up coming back to flexbox lol. The only thing that I would tell you to watch out is the boxes' sizes and font-weight, since they have a lot of impact on the solutions. Cheers!

    1
  • Ashley Chatman•40
    @amchatmanSubmitted over 3 years ago

    The Javascript is not the best just a temporally solutions until I learn a bit more how to code using javascript. Any feedback welcome.

    FAQ Accordion Card

    1
    Galdino•215
    @GaldinoMatPosted over 3 years ago

    You did very well on the responsiveness, but remember that when it comes to frontend, it is the details that get our attention. When we are beggining we tend to forget about padding, margin, font-size, line-height and many things like that. Try to review those things in your code. They make a huge difference. Also, try to put both images in one single div, so it is easier to position and change them. Specially the box image, that is a little bit weird in my opinion. Instead of using it as a background image, try using it as a rendered image using the <img/> tag. Hope it helps!

    1
  • Galdino•215
    @GaldinoMatPosted over 3 years ago

    Hey Kevin. You did a nice job, but try to use media queries to change the image depending on the resolution, i think this will help you a lot in the future.

    1