Muhammad Hisham• 625
@mohamedhesham221
Submitted
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
Galdino
@GaldinoMat
All comments
- Galdino• 215
@GaldinoMat
Posted
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 - IlamaaranRamakrishnan• 10
@IlamaaranRamakrishnan
Submitted
Hi guys is my media query ok? Not really sure as this is my first website. Thanks.
Galdino• 215@GaldinoMat
Posted
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
@dhakobja
Submitted
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 !
Galdino• 215@GaldinoMat
Posted
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
@amchatman
Submitted
The Javascript is not the best just a temporally solutions until I learn a bit more how to code using javascript. Any feedback welcome.
Galdino• 215@GaldinoMat
Posted
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 - Kevin Persaud• 140
@Kpersaud-Dev
Submitted
Is there a way to change the image based on the device used? I saw that there is are separate images stored in the images folder for mobile and desktop. Thanks!
Galdino• 215@GaldinoMat
Posted
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
