Tyler Silberman
Reputation: 59
How to make divs not shrink when window is resized?
I am making a notes page for my classmates as we return to school, and I have this flashcard-type UI that I'm using. I currently have 4 of the cards on the page, but I need to fit 7, and I would like it to scroll horizontally. I have already tried x-overflow: scroll; in CSS on the body, but it didn't seem to work. My code is attached to the fiddle below, please let me know how I can fix the horizontal scrolling problem.
In a general sense, I have 4 divs in a row that shrink the div size when the window resolution is changed. Changing the x-overflow property in css doesn't work, so is there a way so these divs will not shrink and will make the page scroll instead?
var UID = {
_current: 0,
getNew: function(){
this._current++;
return this._current;
}
};
HTMLElement.prototype.pseudoStyle = function(element,prop,value){
var _this = this;
var _sheetId = "pseudoStyles";
var _head = document.head || document.getElementsByTagName('head')[0];
var _sheet = document.getElementById(_sheetId) || document.createElement('style');
_sheet.id = _sheetId;
var className = "pseudoStyle" + UID.getNew();
_this.className += " "+className;
_sheet.innerHTML += " ."+className+":"+element+"{"+prop+":"+value+"}";
_head.appendChild(_sheet);
return this;
};
var open = false;
function enlarge(box, header) {
if (open) {
open = false;
header.style.top = "35%";
header.style.fontSize = '4.5em';
box.pseudoStyle("before","top","-50%");
box.pseudoStyle("before", "transform", "skewY(345deg)");
box.style.position = 'relative';
box.style.width = '320px';
box.style.height = '420px';
box.style.zIndex = '1';
document.getElementById("greything").style.background = "rgba(0, 0, 0, 0)";
document.getElementById("greything").style.zIndex = '-1';
} else {
open = true;
box.pseudoStyle("before","top","-70%");
box.pseudoStyle("before", "transform", "skewY(390deg)");
box.style.width = '640px';
box.style.height = '840px';
box.style.background = '#122936';
box.style.overflow = 'hidden';
box.style.zIndex = '4';
document.getElementById("greything").style.background = "rgba(0, 0, 0, 0.7)";
document.getElementById("greything").style.zIndex = '2';
header.style.top = "10px";
header.style.fontSize = '6em';
}
}@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap');
.header {
color: whitesmoke;
position: relative;
z-index: 5;
text-align: center;
font-size: 4.5em;
top: 35%;
transition: .5s;
}
#greything {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
transition: 1s;
}
.card::before {
z-index: 3;
content: '';
position: absolute;
top: -50%;
width: 100%;
height: 100%;
background: #2196f3;
transform: skewY(345deg);
transition: 1s;
}
.card {
z-index: 1;
position: relative;
width: 320px;
height: 420px;
background: #122936;
border-radius: 20px;
overflow: hidden;
transition: .5s;
margin: 50px
}
* {
margin: 0;
padding: 0;
font-family: Poppins;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #09161d;
overflow-x: scroll;
}
#notes {
flex-wrap: nowrap;
word-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0);
border-radius: 10px;
transition: 1s;
}
::-webkit-scrollbar-thumb:hover {
background: #2196f3;
transition: 1s;
}<!doctype html>
<html>
<head>
<title>StudySmart Theme</title>
<link rel="stylesheet" type="text/css" href="theme.css">
<script src="script.js"></script>
</head>
<body>
<div class="card" id="science" onclick="enlarge(this, document.getElementById('hS'))">
<h1 class="header" id="hS">Science</h1>
</div>
<div class="card" id="math" onclick="enlarge(this, document.getElementById('hM'))">
<h1 class="header" id="hM">Math</h1>
</div>
<div class="card" id="history" onclick="enlarge(this, document.getElementById('hH'))">
<h1 class="header" id="hH">History</h1>
</div>
<div class="card" id="english" onclick="enlarge(this, document.getElementById('hE'))">
<h1 class="header" id="hE">English</h1>
</div>
<div id="greything"></div>
</body>Upvotes: 0
Views: 74
Answers (1)
Champion
Reputation: 774
Just add container. Look at this:
html
<body>
<div class="container">
//your body code
</div>
CSS
.container {
display:flex;
flex-direction: row;
}
Working example:
var UID = {
_current: 0,
getNew: function(){
this._current++;
return this._current;
}
};
HTMLElement.prototype.pseudoStyle = function(element,prop,value){
var _this = this;
var _sheetId = "pseudoStyles";
var _head = document.head || document.getElementsByTagName('head')[0];
var _sheet = document.getElementById(_sheetId) || document.createElement('style');
_sheet.id = _sheetId;
var className = "pseudoStyle" + UID.getNew();
_this.className += " "+className;
_sheet.innerHTML += " ."+className+":"+element+"{"+prop+":"+value+"}";
_head.appendChild(_sheet);
return this;
};
var open = false;
function enlarge(box, header) {
if (open) {
open = false;
header.style.top = "35%";
header.style.fontSize = '4.5em';
box.pseudoStyle("before","top","-50%");
box.pseudoStyle("before", "transform", "skewY(345deg)");
box.style.position = 'relative';
box.style.width = '320px';
box.style.height = '420px';
box.style.zIndex = '1';
document.getElementById("greything").style.background = "rgba(0, 0, 0, 0)";
document.getElementById("greything").style.zIndex = '-1';
} else {
open = true;
box.pseudoStyle("before","top","-70%");
box.pseudoStyle("before", "transform", "skewY(390deg)");
box.style.width = '640px';
box.style.height = '840px';
box.style.background = '#122936';
box.style.overflow = 'hidden';
box.style.zIndex = '4';
document.getElementById("greything").style.background = "rgba(0, 0, 0, 0.7)";
document.getElementById("greything").style.zIndex = '2';
header.style.top = "10px";
header.style.fontSize = '6em';
}
}@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap');
.container {
display:flex;
flex-direction: row;
}
.header {
color: whitesmoke;
position: relative;
z-index: 5;
text-align: center;
font-size: 4.5em;
top: 35%;
transition: .5s;
}
#greything {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
transition: 1s;
}
.card::before {
z-index: 3;
content: '';
position: absolute;
top: -50%;
width: 100%;
height: 100%;
background: #2196f3;
transform: skewY(345deg);
transition: 1s;
}
.card {
z-index: 1;
position: relative;
width: 320px;
height: 420px;
background: #122936;
border-radius: 20px;
overflow: hidden;
transition: .5s;
margin: 50px
}
* {
margin: 0;
padding: 0;
font-family: Poppins;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #09161d;
overflow-x: scroll;
}
#notes {
flex-wrap: nowrap;
word-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0);
border-radius: 10px;
transition: 1s;
}
::-webkit-scrollbar-thumb:hover {
background: #2196f3;
transition: 1s;
}<!doctype html>
<html>
<head>
<title>StudySmart Theme</title>
<link rel="stylesheet" type="text/css" href="theme.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="card" id="science" onclick="enlarge(this, document.getElementById('hS'))">
<h1 class="header" id="hS">Science</h1>
</div>
<div class="card" id="math" onclick="enlarge(this, document.getElementById('hM'))">
<h1 class="header" id="hM">Math</h1>
</div>
<div class="card" id="history" onclick="enlarge(this, document.getElementById('hH'))">
<h1 class="header" id="hH">History</h1>
</div>
<div class="card" id="english" onclick="enlarge(this, document.getElementById('hE'))">
<h1 class="header" id="hE">English</h1>
</div>
<div class="card" id="math" onclick="enlarge(this, document.getElementById('hM'))">
<h1 class="header" id="hM">Math</h1>
</div>
<div class="card" id="math" onclick="enlarge(this, document.getElementById('hM'))">
<h1 class="header" id="hM">Math</h1>
</div>
<div class="card" id="math" onclick="enlarge(this, document.getElementById('hM'))">
<h1 class="header" id="hM">Math</h1>
</div>
<div id="greything"></div>
</div>
</body>Upvotes: 3
Related Questions
- Resize div on resizing window
- how to prevent resizing div when resizing my web browser?
- fix div when window resize
- how to resize div when browser resize using javascript
- Change div size to scale when window resized
- How to make point where divs stop shrinking with browser size
- Div resize on window resize
- Div Resize when Window Resize
- Shrink div as window shrinks
- trying to get a div to shrink width on window resize