So I've got the snippet down below, running good enough so that you can see the problem. ignoring the blank images and what not, the problem is dedicated to the .wrapper class
I've been practising grids and got the basics down arranging boxes as you can see :) What I'm trying to do is cut off text from these boxes to stop run off. What's the best way achieving this? Obviously here you can see me trying overflow hidden, but as you can see it still clips outside the border of the actual box for some reason. Perhaps this is a javascript fix? i'm not sure. Please help. Thank you!
.box1 {
font-size: 37px;
font-weight: 900;
padding-top: 5px;
padding-bottom: 5px;
align-items: center;
width: 323px;
max-height: 106px;
border-radius: 5px;
min-height: 50px;
grid-column: 1/4;
text-align: center;
color: black;
background: black;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
color: white;
}
.box2 {
grid-column: 1 / 2;
width: 220px;
height: 247px;
border-radius: 4px;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
color: blanchedalmond;
}
.box3 {
font-size: 28px;
width: 86px;
max-height: 247px;
word-wrap: break-word;
grid-column: 2/3 ;
color: rgba(0, 0, 0, 0.397);
background: black;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
border-radius: 5px;
color: white;
padding-left: 10px;
}
.box4 {
font-size: 28px;
width: 314px;
max-height: 108px;
word-wrap: break-word;
grid-column: 1/4;
background: rgb(0, 0, 0);
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
border-radius: 5px;
padding-left: 10px;
}
.wrapper{
display: grid;
width: 325px;
grid-template-columns: repeat(3, auto, auto);
grid-template-rows: repeat(1, 1fr);
gap: 6px;
background: #000000;
padding: 5px;
border-radius: 10px;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1.5px solid rgb(122, 244, 255);
margin: 2.5px;
color: white;
overflow:hidden;
}
.main-content{
color: black;
background-color: rgb(10, 10, 10);
min-height: 500px;
overflow: hidden;
}
.megawrap{
display: grid;
padding:0px;
align-items: center;
justify-content: center;
grid-template-columns: 50% 50%;
width: 95%;
min-height: 300px;
row-gap: 20px;
column-gap: 10px;
padding-top:100px;
margin: 0 auto;
margin-left: 35px;
}
.date-type {
position: absolute;
left: 379px;
top:275px;
max-width: 94px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>III</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock+3D&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="container">
<div class="logobutton">
<img class="smallu" src="images/ulogo-white.jpg">
<a class="homenugget" href="home.html"></a>
</div>
<div class="menu">
<a href="about.html">About</a>
<a href="events.html" class="is-active">Events</a>
<a href="login.html">Login</a>
<a href="#">Dashboard</a>
</div>
<div class="dropdown">
<button class="hamburger">
<span> </span>
<span></span>
<span></span>
</button>
<div class="dropdownMenu">
<a href="events.html" class="link">Events</a>
<a href="about.html" class="link">About</a>
<a href="#" class="link">Login</a>
<a href="#" class="link">Dashboard</a>
</div>
</div>
</div>
</nav>
<div class="main-content">
<div class="megawrap">
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title is too long for the text</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
</div>
</div>
<!-- Footer section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-row">
<div class="Footer-text-left">
<p>Copyright © 2022 Ideas Imprint Inc. All Rights Reserved.</p>
<p> Made with <span class="hearted"> ❤</span></p>
</div>
</div>
</div>
<!-- footer top -->
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
