After working on practicing grids and getting the basics down, I've encountered an issue with the .wrapper class. Despite attempting overflow hidden to prevent text run-off in the boxes, it still clips outside the border for some reason.
I'm looking for the best way to tackle this problem. Should I consider a JavaScript fix or is there a better solution? Any advice would be greatly appreciated! Thanks!
The CSS property for overflow is not inherited by child elements, meaning that the containing elements do not automatically have overflow: hidden. To achieve this effect, you need to include it in each of your specific .boxN classes:
.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;
overflow: hidden;
}
.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;
overflow: hidden;
}
.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;
overflow: hidden;
}
.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;
overflow: hidden;
}
.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>
...
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>It might be beneficial to include overflow: hidden within your div elements.
.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;
overflow: hidden; /* Consider adding this */
}
.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;
overflow: hidden; /* Consider adding this */
}
Following are the corrected versions:
.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;
overflow: hidden;
}
.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;
overflow: hidden;
}
.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>;
...
...
</body>
</html>the overflow:hidden rule has been applied exclusively to the parent div, not its descendants like #box-N
they won't be affected by the overflow property unless you add a separate .box class or apply overflow:hidden to all the individual divs
.box4{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
Check out this helpful video on the topic! I finally cracked the code after watching it.
Appreciate the input, I'll make sure to give credit where it's due by upvoting the comments.
As a newcomer to VueJS, I am exploring how to make a GET request to the GitHub API. Initially, I made a request to sort users by follower count, resulting in an array ordered in descending order of user logins. Following that, I sent another GET request to ...
Objective: The goal is to organize the list of objects into a nested object structure based on their parent values. Here is the json data provided: "data": [ { "id": "coding-825x500", "source": { "information": { "fileid ...
After setting up a renderer scene in threejs, I encountered an issue when trying to load a model for the second time. I'm looking for a way to clear the previous rendered scene from the canvas. Is there a solution available within threejs? ...
Struggling to create a unique custom button in Twitter Bootstrap 3. I am trying to design a button with a triangle in the right bottom corner like this: https://i.sstatic.net/IZAv0.jpg I have considered using the background of the button and adding text, ...
My website now has AJAX functionality, and you can see a live example at www.mathewhood.com. I am interested in changing the URL format when clicked from To something like , without the /sitefiles/ for security reasons. Below is my code. If anyone is ex ...
Whenever I use ng-repeat to display table rows, the browser becomes unresponsive when loading 1000 rows into that variable. This leads to poor page performance due to the large number of rows in validationRows. To improve performance within ng-repeat, I am ...
I've been experiencing some unusual behavior with web workers in a three.js application. Initially, everything looks fine when loading a new page. However, after about 20 page reloads, and only when web workers are running, this strange phenomenon oc ...
I am working with a react component that utilizes hooks. The structure of my parent component is as follows: const Parent = () => { const [isEnabled, setIsEnabled] = useState(false); return ( <Child isEnabled={isEnabled} setIsEnabled={s ...
I have encountered an issue with chart.js while working on a specific report. Whenever I switch pages to another page that includes chartjs elements and then switch back, the chart displays data labels on the data points like "x: number, y: number". Afte ...
Looking to create an adblocker specifically for a certain website. I have successfully implemented code that removes ads on the homepage, but it is still affecting other pages such as movie pages. This results in the deletion of the information section, i ...
Upon user input in the form on my web application, an scp and ftp process is initiated that takes around 2-3 minutes to complete. The result page consequently experiences a similar delay in loading. To enhance user experience and provide real-time updates ...
Hello, I am encountering some challenges with formatting my form. As a beginner in web coding, I apologize for what may seem like a simple issue - this is the first form I am attempting to code. My objective is as follows: On screens and tablets: have fo ...
This is an example HTML file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>emoji</title> </head> <body> \ud83d\ude00 <script> var string = &apo ...
As a newcomer to an Angular 5 project, I recently executed the command ng build --prod which resulted in the generation of a dist/ folder. To my surprise, the building process took significantly longer than expected. Upon inspecting the contents of the di ...
After reviewing a tutorial, I discovered that the RenderBody method is supposed to display views within the designated placeholder of the layout, as illustrated in this diagram: https://i.sstatic.net/nJLUm.png However, in practice, it did not work exactl ...
Check out this visual representation: [1]: https://i.stack.imgur.com/9yXUJ.png Followed by the corresponding code snippet. export const GlobalStyle = createGlobalStyle` html { height: 100%; } body { background-image: url(${BGImage}); ba ...
Two arrays are at my disposal: First array: ['Tan','Goh','Tio'] Second array: [['Honda','Toyota','Proton'],['Toyota'],['Proton','Lambo']] Is there a way to merge ...
When a word is entered in the textarea, it should be assigned to a specific class within an 'ol' tag. Each subsequent word will be placed in the next class sequentially. If there are no more words, the remaining classes should remain empty. <! ...
Is there a way to ensure that the LeftArea and wuiMainPageNav sections stay side by side regardless of the browser window size? When I resize the window, the layout gets messed up with wuiMainPageNav moving down. Any suggestions on how to address this issu ...
//I have two divs that need to be set as readonly initially. When an edit button is clicked, I want to remove the readonly attribute and make them editable. <div> <input type="text" placeholder="<a href="/cdn-cgi/l/email-protection ...