I am in the process of creating a profile page that takes inspiration from Facebook's layout design, particularly focusing on the banner and profile image combination. While my implementation looks good on desktop screens, I am facing challenges when it comes to resizing the browser window.
Challenge:
As the width of the page decreases, I am encountering two main issues:
Overflow Handling: When the page reaches the <a> boundaries, the banner image starts overflowing.
Responsive Scaling: As I further reduce the width, the banner image begins to shrink, but not as smoothly as intended.
Objective:
My goal is to achieve two specific outcomes:
Maintain the overflow of the banner image within the <a> element, regardless of the page size.
Ensure a seamless and responsive scaling down of the banner image as the page width decreases while keeping the overflow intact.
Attempts Made:
I have experimented with various CSS techniques for responsiveness and overflow management like using max-width, overflow, flex-shrink: 0, but I haven't been able to achieve the desired result. Here is my CSS code:
(CSS code here)And this is the actual HTML code snippet:
(HTML code here)Question:
How can I adjust my CSS to ensure that the banner image stays within its boundaries and scales down appropriately as the page size reduces?