Working within a CSS Grid setup, I have an image on the left and a block of text on the right. As I reduce the page width, both the image and text resize accordingly to fit the page width. However, once the width goes below 475px, the layout breaks and the image and text overflow the page.
I have attempted using media queries to fix this issue to no avail. It's puzzling to me why the text in my skills section below flows smoothly down the page as the width decreases, while the section above does not.
Original image size: 3024px × 4032px
* {
padding: 0;
margin: 0;
}
:root {
--main--color: #2E64C6;
--main--hover--color: rgb(27, 62, 126);
}
/* Rest of the CSS code... */
@media only screen and (max-width: 430px) {
.skills-list {
padding: 0 30px
}
.item {
background-color: rgba(145, 255, 0, 0.164);
}
.item>.body {
max-width: 95%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<meta http-equiv="X-UA-Compatible" content="ie=edge>
<link href="https://fonts.googleapis.com/css?family=Hind:700|Montserrat:400,700&display=swap" rel="stylesheet>
<script src="https://kit.fontawesome.com/34a50a5364.js></script>
<link rel="stylesheet" href="styles.css>
<link rel="stylesheet" href="mediaQueries.css>
<title>Tyler Morales – Front End Developer</title>
</head>
<body id="top>
/* Body content... */
</body>