CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mr. T
Mr. T

Reputation: 151

Making bootstrap header with text

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>

Upvotes: 1

Views: 1146

Answers (3)

Sukhmeet Singh
Sukhmeet Singh

Reputation: 130

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;
}

Upvotes: 1

Syed Aun
Syed Aun

Reputation: 89

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;

}

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133360

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>

Upvotes: 0

Related Questions