0
188
VisualizaçõesText created by innerHTML does not shrink responsively
The elements created by innerHTML do not shrink with other elements within the flex container.
My goal is to make it shrink together with the .titleBar.
.nums seems to exceed its container #display even though flex-wrap: wrap; and flex-basis: 0; is set.
score.innerHTML = `${p1score.toString().padStart(2, "0")} - ${p2score.toString().padStart(2, "0")}`;
stopWatch.innerHTML = hr.toString().padStart(2, "0") + ":" + min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0");#display {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-evenly;
justify-self: center;
padding: 0px;
flex-basis: 0;
flex-shrink: 10;
}
.titlebar {
font-size: 5vh;
font-weight: 550;
margin: auto;
}
.nums {
font-size: 8vw;
font-family: Oswald;
margin-top: auto;
}
#score {
margin: auto;
}<section id="display">
<p class="titlebar" id="topTitle"> ROUND TIME</p>
<p id="time" class="nums">00:00:00</p>
<button id="start" class="ctrlBtn">START</button>
<p id="scoreLabel" class="titlebar"> PLAYER SCORES </p>
<p id="score" class="nums"> 00 - 00</p>
</section>Stretched:
Shrinked:
1 Respostas
Responde à pergunta0
Do not use flex-basis, flex-grow, or flex-shrink on the flex container (.display) they are assigned to the flex container's direct descendants (child elements). Moreover, it's recommended that you use the shorthand property flex instead. I personally avoid those properties because I use other means to gain responsiveness.
Default font-size is set on <html> which means any text that doesn't have an explicit or inherited font-size will have the default font-size.
Try setting default font-size in vmax units. vmax units alternate between vh and vw units -- which of the two that it is at any given time is dependent upon which length of the viewport is bigger. If the viewport is wider (most likely on desktops, laptops, etc) then vmax is vw and if the viewport is taller (mobile portrait mode) then vmax is vh. So if there are any changes to the viewport, the default font-size changes. Although the default font-size will shrink and grow some text, there are elements that set a default font-size of their own (like h1-h6) -- so you could have bigger text in a <p> than in a <h4>.
To avoid lopsided scaling, use rem for everything except small lengths like border width. rem units are directly proportional to the default font-size. So, if you have...
Figure I
html {
font: 3vmax/1.5 Oswald
}
...each rem would equal 3vh or 3vw. See if this technique facilitates responsiveness by reviewing the example below. Review in full page mode, not in the iframe window and use dev tools to shrink it (see Figure II)
Figure II
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Raleway:wght@500&display=swap');
html {
font: 3vmax/1.5 Oswald
}
.display * {
display: block;
}
.display {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-evenly;
justify-self: center;
padding: 0px;
}
.titlebar {
margin: auto;
font: 500 3rem/1.5 Raleway;
text-align: center;
}
.number {
font-size: 4rem;
font-family: Consolas;
text-align: center;
}
button {
margin: 1.5rem 0 2rem;
font: inherit;
font-size: 3rem;
cursor: pointer;
}<section class="display">
<h1 class="titlebar">ROUND TIME</h1>
<time class="time number">00:00:00</time>
<button class="start">START</button>
<h2 class="titlebar">PLAYER SCORES </h2>
<output class="score number">00 - 00</output>
</section>