Responsive Landing page using display flex and grid.
Design comparison
Solution retrospective
Could someone help me so that the images do not overflow from their parent container?
Community feedback
- @Luis15HerrPosted over 3 years ago
Ok, I did it in the following way:
-
Create a parent container that contains the box.svg and then create another container inside of the parent container that contains ilustration-woman.svg
-
To the container that contains (woman.svg) you use overflow:hidden; and position: relative and that's it: D
You can see the same challenge in my profile so you can cook a bit: D
Marked as helpful2@CarlosRubio9827Posted over 3 years ago@Luis15Herr, thank you very much for the advice, I will keep it in mind for the next iteration: D.
1 -
- @MarlonPassos-gitPosted over 3 years ago
I really liked the :hover effect and the smoothness that is when you click to see more information, good job. But I have to talk about some points
-
you could define the triangle image in the background-image of the <body>, and use the tags background-size, background-position to put it in the corner without going through your card, try to do some research on the backgroud tags, you can help a lot
-
In the text that when clicked shows a content, use the <details> tag which will be much easier and more semantic. In other words, your JS code could be unnecessary
-
"FAQ" could be inside a <h1> tag
-
It could resize the image on smaller screens, on screens with 300px widths the image breaks.
-
In the mobile version there is a lot of unnecessary white space on the card at the bottom
Marked as helpful1@CarlosRubio9827Posted over 3 years ago@MarlonPassos-git, thank you very much for the tips, I will keep them in mind..
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