Rooxie Rooxie - 1 month ago 12
CSS Question

Block occupies white space when on a new line

I have this HTML



.h1 {
text-transform: uppercase;
max-width: 50%;
font-size: 24px;
font-weight: 700;
line-height: 24px;
}
.scada {
font-family: Scada, sans-serif;
}
.left {
float: left;
}

<h1 class="h1 scada left">Laptop Lenovo IdeaPad 100 (80MJ003YUA)</h1>
<div class="code left">code: U0140224</div>





On big resolution it works just fine.
enter image description here

But when the resolution gets smaller, and the text in this h1 tag (by the way I tried swapping it with a div tag, no difference) goes on a new line, the tag still occupies space on it's right.
enter image description here

It's not margin/padding/border for sure. I've also tried changing the max-width. Nothing helped so far. Any ideas?

UPDATE
Sorry, I didn't ask the question properly. I need to be just like it is, on a new line, but not to occupy the whitespace on it's right.

Answer

.h1 {
  text-transform: uppercase;
  max-width: 79%;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  word-break: break-all;
}
.scada {
  font-family: Scada, sans-serif;
}
.left {
  float: left;
}
<h1 class="h1 scada left">Laptop Lenovo IdeaPad 100 (80MJ003YUA)</h1>
<div class="code left">code: U0140224</div>

Comments