I am currently making a website, and have created a set of complex div elements. They look great on my browser’s native size, but resizing the browser caused weird wrapping issues, and made the elements fall out of place.
Here’s what my looks like right now…
<body id='table'>
<div class="input-wrapper">
<div class="search-wrapper">
<label for="search"></label>
<input type="search" id="search" placeholder="Search for a level..." data-search>
<select id="searchBy">
<option value="levelName">Name</option>
<option value="creator">Creator</option>
<option value="song">Song</option>
</select>
</div>
<div class="page-wrapper">
<div class="resultNum"></div>
<div class="pageSelector">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="l-arrow">◀</button>
<input type="number" class="page" min="1" value="1">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" id="r-arrow">▶</button>
</div>
</div>
</div>
<div id="data-output"></div>
</body>
I insert the elements using a JS script, which inserts them like this…
out += `
<div id="wrap"><div class='row'>
<div class='innerRow' style='background-image: linear-gradient(to right, rgba(33, 37, 41, 0.75), rgba(255, 255, 255, 0.1)), url(images/${level.levelId}.png), url(images/default.png)'>
<div class='row1'>
<div class='row1a'>
<div class='levelName'>${level.levelName}</div>
<div class='levelId'>${level.levelId}</div>
</div>
<div class='creator'>${level.creator}</div>
</div>
<div class='levelInfo'>
<div class='row2'>
<div class='row2a'>Difficulty</div>
<div class='row2b'>
<div class='difficulty'>${level.difficulty + " " + rewardNum}</div>
<div class='reward'><img src = 'difficulties/${reward}.png'></div>
</div>
</div>
<div class='row3'>
<div class='row3a'>Coins</div>
<div class='coins'><img src = 'difficulties/${coin}.png'></div>
</div>
<div class='row4'>
<div class='row4a'>Song</div>
<div class='song'><span>${level.song}</span></div>
</div>
</div>
<div class='face'>
<img src = 'difficulties/${difficultyFace}.png'
</div>`;
For reference, this is what the page looks like…
Ideally, I want these ‘cards’ to resize cleanly when the window is made smaller.
At first, I had tried to combat this by making all of the margins and padding of the divs within my outer div reliant on vw. However, this is proving to be incredibly tedious, and the elements do not align with each other right, and still cause text wrapping issues, just different ones.
Eventually, I decided to just try using transform: scale(). This obviously worked for constant numbers, and resized the entire element without any weird positioning issues. However, I need to be able to use transform: scale() based on vw. Here’s what that looked like…
/* This is the CSS for the wrapper. */
.innerRow {
transition: all 0.2s ease-in-out;
padding-left: 20px;
padding-top: 30px;
padding-bottom: 20px;
margin-left: 18.65vw;
margin-right: 18.65vw;
margin-top: 10px;
background-size: 100%;
background-position: 40% 50%;
vertical-align: middle;
border-radius: 5px;
display: flex;
}
/* This doesn't work. */
.row {
transform: scale(calc(100% * calc(18 / 100vw)));
}
I tried doing this to no avail. Is that not a property I can use? I had seen in some other similar posts that people found success using it, but I have not.
