CODEWITHSUNDEEP
css
lemonsevens15
lemonsevens15

Reputation: 91

H1 larger than viewport - how?

Trying to make an H1 larger than the viewport so it partially sits hidden off the screen horizontally without prompting x-axis scroll. The body and container width is set to 100% so currently the H1 just breaks to the next line when it gets wider than the viewport. Any idea's?

Upvotes: 0

Views: 888

Answers (3)

David Thomas
David Thomas

Reputation: 253308

One way (of presumably, many) is:

h1 {
  /* width of the parent element: */
  width: 100%;
  /* not particularly relevant */
  padding: 0;
  margin: 0;
  /* large font-size to increase the chance of the text
     extending out of the view-port: */
  font-size: 600%;
  /* again, to increase the chance of the text exceeding
     the view-port: */
  letter-spacing: 400%;
  /* to prevent scroll-bars: */
  overflow: hidden;
  /* preventing line-breaks, to stop wrapping: */
  white-space: nowrap;
}
<h1>This is the header</h1>

Unless you meant, literally, to have the <h1> element larger than the view-port, in which case:

html, body {
  margin: 0;
  padding: 0;
  /* to prevent the user scrolling to see the extent of the text
     'below the fold': */
  overflow-y: hidden;
}

h1 {
  /* vh: 1% of the viewport's height,
     this sets font-size to 150% of the viewport's height: */
  font-size: 150vh;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}
<h1>This is the header</h1>

References:

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49188

This was my interpretation of your question, the use of vh units makes the font-size size to the viewport.:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#biggee {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    font-size: 50vh;
    line-height: 15vh;
    white-space: nowrap;
}
<div id="biggee">
    <h1>This is HUGE</h1>
</div>

Upvotes: 1

Marcel
Marcel

Reputation: 1288

A possible solution is to set a height equal to a single line of your h1 on the container. Example:

.container {
  width: 100%;
  overflow:hidden;
  height: 690px;
}

Fiddle: http://jsfiddle.net/7pyxtjah/

So if a single line of your h1 is 60px in height, make the height 60px.

Upvotes: 0

Related Questions