Making bootstrap header with text

Question

On smaller devices, title goes out of the screen. If I reload the page, it looks good for a second then it overflows. Is there something I haven't considered?

I'm trying to make a full screen header with text and a button and this is what I have done so far:

/*body, html {
  height: 100%;
}*/

body {
  margin: 0px 0px;
}

#full {
  background-image:url(https://chrisaam.files.wordpress.com/2015/03/wallpaper-2846361.jpg);
  background-size:cover;
  position: relative;
  height:100vh;
}

.header {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 36px;
  -ms-transform: translate(0,-50%); /* IE 9 */
  -webkit-transform: translate(0,-50%); /* Safari */
  transform: translate(0,-50%);  
}

<div id="full">  
    <div class="header">
        <h1 class="title">ACCENTOMETER</h1>
        <button class="btn btn-default header-scroll">PLAY NOW</button>
    </div>
</div>

I checked it out on mobile ... It works fine bro ! – Majid Nayyeri Jan 01 '17 at 17:37 — Majid Nayyeri, Jan 01 '17 at 17:37
Thanks, it looks weird on Chrome when I use mobile view – Mr. T Jan 01 '17 at 18:00 — Mr. T, Jan 01 '17 at 18:00

score 1 · Answer 1 · edited May 23 '17 at 10:29

CSS3 supports new dimensions that are relative to view port. But this doesn't work in android < 4.4

You can use dimensions in % or em. Just change the base font size everything will change. This way the font size will change with the device.

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}

h5{
    font-size: 1.4em;
}

Look at all the ways at https://stackoverflow.com/a/21981859/406659

You can also use simple media queries for changing the font size respective to various screen sizes. For example:

@media only screen and (max-width: 750px){

  .title{

    font-size: 30px;
  }
}

You can also play around with viewport width and viewport height. You can check Viewport Units for more detail.

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

score 0 · Answer 2 · answered Jan 01 '17 at 17:38

On small device try adding col width for this device

<div id="full">     
   <div class="header col-sm-12  col-xs-12 " >
      <h1 class="title col-xs-12">ACCENTOMETER</h1>
      <button class="btn btn-default header-scroll col-xs-12">PLAY NOW</button>
   </div>
 </div>

score 0 · Answer 3 · answered Jan 01 '17 at 18:44

You can make the title responsive by using javascript along with css style properties.

First you need to get the width of your browser window. Then make some appropriate formula for a responsive_font using window width size.

Using responsive_font you can make your title responsive.

For Example :

function title_fontsize(){

var title=document.getElementById("mytitle");
var win_size=window.innerWidth;  
responsive_font=win_size/(20)+"px";
title.style.fontSize=responsive_font;

}

Making bootstrap header with text

3 Answers3