html - Whitespace between divs -


i know there million questions div gaps, can't seem of solutions work me. webpage looks this:

enter image description here

there noticeable gap between image banner , text. want shorten looks more this:

enter image description here

i pretty sure issue css 1 of divs, i'm not sure what. here inspector looks like, if helps:

enter image description here

i have tried making new class in bootstrap.min.css has no top padding both col-lg-12 div , row div, didn't change anything. i'm not sure go here.

here code (and here website in action on jsfiddle). (i copy/pasted relevant parts of it, since whole code long. apologize if of code wrong or confusing!)

<div class="intro-header-homepage">         <div class="container">             <div class="row">                 <div class="col-lg-12">                     <div class="intro-message">                         <h1>website homepage</h1>                     </div>                 </div>             </div>          </div>     </div>      <div class="row">         <div class = "col-lg-6 col-lg-offset-3" text-align="center">             <p class="p-homepage">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>         </div>     </div>  </body>

css:

.p-homepage {     padding: 0px 0px 30px 0px;     font-weight: normal;     font-size: 18px;      }    .intro-header-homepage {     text-align: center;     color: #f8f8f8;     background: url(http://imgur.com/20qy3eh.jpg) no-repeat;     background-size: 100% 80%; }  .intro-message {     padding-top: 20%;     padding-bottom: 20%; }

the padding on .intro-message pushing text down. there few ways of fixing this, simplest give text (p.homepage) negative margin-top of 10% counter padding. thing change position of text.

body,  html {    width: 100%;    height: 100%;  }    body,  h1,  h2,  h3,  h4,  h5,  h6 {    font-family: "lato", "helvetica neue", helvetica, arial, sans-serif;    font-weight: 700;  }    .p-homepage {    padding: 0px 0px 30px 0px;    font-weight: normal;    font-size: 18px;    margin-top: -10%;  }    .navbar-sticky-top {    /* add navbar */    background-color: #0d1721;    border-color: #0d1721;    margin-bottom: 0;  }    .topnav {    font-size: 14px;  }    .lead {    font-size: 18px;    font-weight: 400;  }    .intro-header-homepage {    text-align: center;    color: #f8f8f8;    background: url(http://imgur.com/20qy3eh.jpg) no-repeat;    background-size: 100% 80%;  }    .intro-message {    padding-top: 20%;    padding-bottom: 20%;  }    .intro-message>h1 {    margin: 0;    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);    font-size: 5em;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>  <!doctype html>  <html>    <head>    <title></title>  </head>    <body>    <!-- navigation -->    <nav class="navbar navbar-default navbar-sticky-top topnav" role="navigation">      <div class="container topnav">        <div class="navbar-header">          <a class="navbar-brand topnav" href="#">home</a>        </div>        <!-- collect nav links, forms, , other content toggling -->        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">          <ul class="nav navbar-nav navbar-right">            <li>              <a href="#">imagery</a>            </li>            <li>              <a href="#">education , outreach</a>            </li>            <li>              <a href="index.html">data resources</a>            </li>          </ul>        </div>      </div>    </nav>    <div class="intro-header-homepage">      <div class="container">        <div class="row">          <div class="col-lg-12">            <div class="intro-message">              <h1>website homepage</h1>            </div>          </div>        </div>      </div>    </div>    <div class="row">      <div class="col-lg-6 col-lg-offset-3">        <p class="p-homepage">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>      </div>    </div>  </body>    </html>

jsfiddle


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more