0

I have different sections like "About me", "Contact", "Photo gallery" etc, and I want that when I open the site, the "About me" container to be displayed on the whole page, to fill the page without any content from the next section to appear. 

<div class="container-fluid bg-2 text-left">
 <div id="About me">
  <h1 class="margin">About me</h1>
  <p> My text here</p>
 </div>
</div>

I have the "container-fluid" class for every container with content in the index file. 

.container-fluid {
  padding-top: 70px;
  padding-bottom: 70px;
}

Any idea would be greatly appreciated!

another
  • 3,440
  • 4
  • 27
  • 34
Philosykos
  • 1
  • 1
  • 1
  • `position:fixed;z-index:1;width:100%;height:100%;top:0;left:0;` make z-index the highest value if youve used it elsewhere. but going to need clearer instructions of what you actually need. – Yusaf Khaliq Dec 15 '16 at 22:32
  • Possible duplicate of [How to make a
    always full screen?](http://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen)
     – Tomas Langkaas Dec 15 '16 at 22:50

4 Answers4

0

That should addapt to the width of the browser at every state.

.container-fluid {
width:100%
padding:70px 0px 70px 0px;
}
Unkn0wn
  • 70
  • 8
0

You could use viewport relative units.

.example {
  min-height: 100vh;
  min-width: 100vw;
}
ryanve
  • 50,076
  • 30
  • 102
  • 137
0

give the about container a height:100vh; width:100%;

Brad
  • 8,044
  • 10
  • 39
  • 50
0
 .container-fluid {
     width:100%
     padding:70px 0px 70px 0px;
     margin :0;
  }

If above code not work write !important as like padding:70px 0px 70px 0px!important; Sometimes old style not override by new style so you make it important by writing above statement.

Hanumant
  • 92
  • 7