I've been developing my personal portfolio using only pure HTML and CSS, aiming to create a responsive site with media queries. The code below showcases two sections of my portfolio.
The issue I'm facing is with the div class "worked-dash." When resizing the window below the width of the worked-dash section, it overflows outside its parent div instead of adjusting automatically.
Interestingly, the other div, about-dash, behaves perfectly fine. To illustrate this discrepancy, I have provided links to both the working About-dash and the problematic Worked-dash on CodePen. Be sure to change the orientation and resize the viewport to see the difference below 420px.
Screenshot demonstrating the About-dash in action:
https://i.sstatic.net/hgzgi.png
:root {
--background:#f8f9fa;
... (CSS code goes here)
}
/* Responsive Design */
@media (min-width: 320px) and (max-width:420px) {
html {
background-color: red; /* Example style changes for smaller screens */
}
.sec-about {
... (Responsive styles for About section)
}
}
Screenshot illustrating the issue with the Worked-dash section:
https://i.sstatic.net/UefHH.png
:root {
--background:#f8f9fa;
... (CSS code goes here)
}
/* Responsive Design */
@media (min-width: 320px) and (max-width:420px) {
html {
background-color:red; /* Example style changes for smaller screens */
}
.sec-worked {
... (Responsive styles for Worked section)
}
}
Your advice or assistance on resolving this matter would be greatly appreciated!