My website looks great on my laptop, however, when I adjust down to a small screen, the text from my first section is running on into the lower section. Everything else is looking great, just the "run on" onto the next section. I am new to bootstrap so I am not understanding. Ive tried adding new sections tags, new divs, still can't seem to find the problem.
<body>
<nav id="navShadow" class="navbar navbar-expand-md navbar-dark effect">
<a class="navbar-brand" href="#">Test Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#education">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<!--HEAD SECTION -->
<section class="head">
<header id="home-section">
<div class="dark-overlay">
<div class="home-inner">
<div class="container">
<div class="row">
<div class="col-me-3 hidden-sm-down">
<div class="grow">
<img class="profile-pic" src="./img/portrait.jpg" alt="" />
</div>
</div>
<div class="col-md-9 main-col">
<h1 class="mb-2">About Me</h1>
<p class="mt-4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium,
totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
</p>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
</ul>
</div>
</div>
</div> <!-- end row -->
</div>
</div>
</div>
</header>
</section>
<!-- Education -->
<section id="education">
<div class="education">
<div class="container">
<div class="row education justify-content-center">
<h1><span>Education</span></h1>
</div>
<div class="row">
<div class="col-9">
<h3>University of Life</h3>
<p class="info">Master in Field <span>•</span> <em class="date">April 2017</em></p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Nullam dictum felis eu pede
mollis pretium.
</p>
<br>
<br>
<h3>University of Life</h3>
<p class="info">Master in Test <span>•</span> <em class="date">march 2007</em></p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Nullam dictum felis eu pede
mollis pretium.
</p>
</div>
<div class="col-3">
<img src="./img/educationimg.jpg" alt="" class="eduimg">
</div>
</div>
</div>
</div>
</div> <!-- End Education -->
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer class="page-footer font-small blue pt-3">
Aucun commentaire:
Enregistrer un commentaire