Geoff Weber Geoff Weber - 5 months ago 7
CSS Question

Text Stacking Over Itself

I am working on a website from a template, and for some reason the text in the lower left corner stacks on itself when I reduce the window size. I am by no means an expert in HTML/CSS but I can't seem to figure out why exactly it is doing this. I've tried messing with the div properties and the z-index. It looks like this

The problem

My HTML code:

<!-- Site Logo -->
<div id="logo">salem music</div>


CSS:

#logo {
font-family: 'Coustard', serif;
font-size: 49px;
bottom:40px;
height:auto;
left:40px;
position:absolute;
width:20%;
z-index:1000;
color: #fff;
}


I'd like it to look like

This

Answer

The width is set to 20%. If you decrease the window width, then eventually the #logo element will get too small in width and will cause the text to wrap.

Consider setting a larger width value.

.logo {
  background-color: grey;
  margin: 10px;
}
.logo1 {
  width: 5%;
}
.logo2 {
  width: 75%;
}
<div class="logo logo1">This width is too small and will wrap</div>
<div class="logo logo2">This width is better and won't wrap</div>


Or, if you want to keep it that width, and want to allow text to overflow out of the <div>, you can use white-space: nowrap. However, I wouldn't recommend this, as it would probably overlap the links next to it.

.logo {
  background-color: grey;
  margin: 10px;
}
.logo1 {
  width: 5%;
}
.logo2 {
  width: 5%;
  white-space: nowrap;
}
<div class="logo logo1">This width is too small and will wrap</div>
<div class="logo logo2">This will not wrap even though it is too small</div>


@Bálint made a good point in the comments as well: when possible, use the em unit for measurements instead of percentages. ems are based on font size, rather than window size. Therefore, changing the window wouldn't affect it, but changing the font size would (in a desirable way).

Comments