When you hover over an image in a grid, text and a button appear. However, when the window is resized, the content ends up overflowing out of the div.
This issue is part of my first project that I am working on during a bootcamp. I have decided to keep the pictures at a fixed 33% width instead of making them more responsive and wrapping them to 50% or 100% with @media queries. This decision is primarily for practice purposes before diving into the real responsive web design section.
Although I am aware that there might be something wrong with my approach, I can't seem to pinpoint the exact problem. Is there a way to prevent the text from overflowing?
Here is the HTML code snippet:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<!-- Rest of the HTML code goes here -->
And here is a part of SCSS code:
$color-main: #fa8231;
$color-light: #f1f2f6;
*, *::before, *::after {
box-sizing: border-box;
}
<!-- rest of the SCSS code goes here -->
For full code view and testing, you can visit this jsFiddle link: https://jsfiddle.net/Evenclan/0qh7pawk/15/