CODEWITHSUNDEEP
htmlcss
Chara
Chara

Reputation: 1075

Adjusting text size in sidebar based on screen width

I have a sidebar div that takes up 12% of the total screen width (set as a css property). I also have an <h1> block within this div, with a title. When I switch monitors to a smaller one, the sidebar ends up being skinnier, resulting in the title to extend OUT of the sidebar.

enter image description here

How can I format so that the text will always stay within the line? ("MY TI..." is fine for a result)

Upvotes: 1

Views: 1322

Answers (3)

Stickers
Stickers

Reputation: 78676

If the title text is known, you may be able to using viewport units vw for the font-size either in the original style or in the media queries.

You would also need to set the sidebar width to vw too, or a percentage value to make it all responsive.

html, body {
  height: 100%;
  margin: 0;
}
.sidebar {
  border-right: solid;
  height: 100%;
  float: left;
  width: 15vw;
}
.sidebar h1 {
  font-size: 4vw;
  text-align: center;
}
<div class="sidebar">
  <h1>MyTitle</h1>
</div>

jsFiddle

Another solution would be using CSS ellipses, replace the overflow text with "...".

html, body {
  height: 100%;
  margin: 0;
}
.sidebar {
  border-right: solid;
  height: 100%;
  width: 15%;
  float: left;
}
.sidebar h1 {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="sidebar">
  <h1>MyTitle MyTitle MyTitle</h1>
</div>

jsFiddle

Upvotes: 1

satya
satya

Reputation: 1185

Please try like this:

<div class="sidebar">
<h1>
MY TITLE
</h1>
</div>


.sidebar {
    border-right: 1px solid black;
    height: 600px;
    width: 186px;
}

Upvotes: 0

nathan felix
nathan felix

Reputation: 396

There is no 100% sure way when it comes to CSS but the title should normally go onto two lines which would be better than what its doing in your screen shots. Post your code if you want someone to look at that.

What you should do though is use media queries to make the sidebar wider when its on a smaller screen:

.sidebar
{
  width:12%;
}

@media screen and (max-width: 600px) {
  .sidebar
  {
    width:30%;
  }
}

Here is an example

http://codepen.io/nathanfelix/pen/KzZPGy

Also, here you can read more about media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Upvotes: 1

Related Questions