@amina-refik
Posted
Hello Dylan,
I hope you're having a great learning experience.
Overall, your solution looks quite similar, but it seems to have issues with responsiveness.
As you can observe from this screenshot, when I adjusted the window size, the layout broke. This could be attributed to two main reasons you should consider:
-
Absolute Positioning: Using position: absolute disrupts the flow of your document. Typically, you would use absolute positioning if you don't need to worry about elements overlapping.
-
Percentage vs. Fixed Dimensions: When a parent element uses a percentage for sizing and its children use fixed dimensions, overflow issues can arise as the screen size decreases. You can address this by either hiding the overflow or adding a scrollbar if you prefer not to alter the dimensions of the child elements.
The simplest fix I suggest (although you could explore alternative approaches) is to change the height of the card to a fixed dimension. This adjustment should resolve the overlap issue, as demonstrated in this screenshot:
.sec-1 {
height: 620px;
}
Regarding spacing, I recommend using the design image as a background and reducing the opacity of your main element and try to align them as closely as possible.
Lastly, don't forget to include the page icon.
I apologize if my feedback seems lengthy, but I hope it proves helpful. Happy coding!
Marked as helpful
@dmolthu
Posted
@amina-refik Hello! Thank you so much for the response.
I will definitely start working on making certain elements stay in their sections as the screen sizes change, because that is something that I have been having some trouble with and been putting off a little bit, so I am definitely glad you brought this back to my attention.
It also makes sense that you said that the reason could be because I made the parent element a percentage and the children using fixed. I will try to mess around with your suggestions and testing them to see if the children stay within their container.
Thank you so much for the response and no need to apologize for the feedback being lengthy because the longer it is the more it helps! Thank you again happy coding!
