CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Blank
Blank

Reputation: 155

Bootstrap 4 - Responsive caption

I'm making a new page, where I need block of text in the left down corner. The problem is that every time I try to make it, it's not responsive at all and it's running away from 'section' or it's getting over to the 'nav'. Is there any option to make hold it's place?

I tried "position absolute", "margins", "padings", "Bootstrap 4 utilities", but I can't get it work. Do you have any ideas? 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="stylesheet/stylesheet.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
        <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
    </head>
    <body>
        <main class="container-fluid p-0">
            <section class="pr-5 pl-5" style="background-image: url('https://picsum.photos/1920/1080/?random');">
                <header> 
                    <img class="logo d-block img-fluid mx-auto" width="200px" src="http://brandmark.io/logo-rank/random/pepsi.png" alt="Logo" />                     
                </header>
                <nav class="navbar navbar-expand-lg sticky-top">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
                    </button>
                    <div class="collapse navbar-collapse" id="Toogle">
                        <ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
                            <li class="nav-item">
                               <a class="nav-link" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                               <a class="nav-link" href="#">Repliky</a>
                            </li>
                            <li class="nav-item">
                               <a class="nav-link" href="#">Unikáty</a>
                            </li>
                            <li class="nav-item">
                               <a class="nav-link" href="#">Instalace</a>
                            </li>
                            <li class="nav-item">
                               <a class="nav-link" href="#">Kontakt</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <div class="row Text no-gutters ">
                    <div class="col-xs-12 col-md-4 offset-md-2 mr-3">
                        <h2>I need this block of text to be responsive</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p>
                        <a href="#" class="button white">Watch video</a>
                    </div>
                </div>
            </section>
            <section class="test" style="background-image: url('https://picsum.photos/1920/1080/?random');">
                nofun   
            </section>
        </main>
   </body>
</html>

And the CSS: 

/*INSERT*/
@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
@import url('https://fonts.googleapis.com/css?family=Cinzel');
/*ALL*/
html, body {width: 100% !important;}

body {background: grey !important;}



/*Header*/
.logo {
    display: inline-block;
    padding: 1rem 0 .5rem 0 !important;
}

/* NavBar */
nav {
    font-size: 13pt;
    font-family: 'Cinzel', sans-serif;
    padding: .3rem 0 .3rem 0 !important;
    text-transform: capitalize;
}

.nav-link {
    color: #fff !important;
    margin: 0 25% 0 25%;
}

.nav-link:hover {
    font-style: underline;
}

section {
    height: 100vh;
    min-height: 650px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.Text {
    margin-top: 200px;
    margin-bottom: 50px;
}

Final Solution - Thanks Lakindu Gunasekara

    section{
  height: 100vh;
  min-height: 900px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Text {margin-top: 20%;}

Upvotes: 2

Views: 793

Answers (1)

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

Remove height:100vh in the section tag. And to avoid the gap between two sections, I have used a margin-top:-3.2rem in the test class. Try the snippet below.

section {
  height: 100vh;
  min-height: 650px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="stylesheet/stylesheet.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</head>

<body>
  <main class="container-fluid p-0">
    <section class="pr-5 pl-5" style="background-image: url('https://picsum.photos/1920/1080/?random');">
      <header>
        <img class="logo d-block img-fluid mx-auto" width="200px" src="http://brandmark.io/logo-rank/random/pepsi.png" alt="Logo" />
      </header>
      <nav class="navbar navbar-expand-lg sticky-top">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
                    </button>
        <div class="collapse navbar-collapse" id="Toogle">
          <ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Repliky</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Unikáty</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Instalace</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Kontakt</a>
            </li>
          </ul>
        </div>
      </nav>
      <div class="row Text no-gutters ">
        <div class="col-xs-12 col-md-4 offset-md-2 mr-3">
          <h2>I need this block of text to be responsive</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p>
          <a href="#" class="button white">Watch video</a>
        </div>
      </div>
    </section>

    <section class="test" style="background-image: url('https://picsum.photos/1920/1080/?random');">

      <p>nofun</p>

    </section>
  </main>
</body>

</html>

Upvotes: 1

Related Questions