Issue
I'm creating a portfolio I cannot seem to get the big space out in between the "email me" link and the paragraph starting with "As an employee".
I used a template for this but I've tried removing margins, padding, ext and still cant get that space out. I'm sure I'm missing something so a second look would be great.
<!DOCTYPE html>
<html>
<title> Portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-wide w3-padding w3-card">
<a href="#home" class="w3-bar-item w3-button"><b>Andrew Shults'</b> Portfolio</a>
<!-- Float links to the right. Hide them on small screens -->
<div class="w3-right w3-hide-small">
<a href="#projects" class="w3-bar-item w3-button">Projects</a>
<a href="#about" class="w3-bar-item w3-button">About</a>
<a href="#contact" class="w3-bar-item w3-button">Contact</a>
</div>
</div>
</div>
<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image" src="architect.jpg " alt="Architecture" width="1500" height="800">
<div class="w3-display-middle w3-margin-top w3-center">
<h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>A</b></span> <span class="w3-hide-small w3-text-light-grey">S</span></h1>
</div>
</header>
<!-- Page content -->
<div class="w3-content w3-padding" style="max-width:1564px">
<!--My pic and contact section-->
<div class="w3-container w3-padding-32" id="about">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">About</h3>
</div>
<div class="w3-row-padding">
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="%" alt="Blank" style="width:65%">
<h3>%</h3>
<p class="w3-opacity">Software Engineer</p>
<p></p>
<p></p>
</div>
</div>
<!-- About Section -->
<div class="w3-container w3-padding-32" id="about">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16"> </h3>
<p>Lorum ipsum yada yada</p>
</div>
<!-- Project Section -->
<div class="w3-container w3-padding-32" id="projects">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Projects</h3>
</div>
<div class="w3-row-padding">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding"><a href="%">Alien Shooter Game</a></div>
<img src="Mortyinvaderpic.png" alt="House" style="width:100%">
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding"><a href="%">Horse Betting Game</a></div>
<img src="Dayattheraces.png" alt="House" style="width:100%">
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="w3-container w3-padding-32" id="contact">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Contact</h3>
<p>Lets get in touch and talk about your project.</p>
<form action="/action_page.php" target="_blank">
<input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">
<input class="w3-input w3-section w3-border" type="text" placeholder="Email" required name="Email">
<input class="w3-input w3-section w3-border" type="text" placeholder="Subject" required name="Subject">
<input class="w3-input w3-section w3-border" type="text" placeholder="Comment" required name="Comment">
<button class="w3-button w3-black w3-section" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</form>
</div>
<!-- Image of location/map -->
<div class="w3-container">
<img src="map.jpg" class="w3-image" style="width:100%">
</div>
<!-- End page content -->
</div>
<!-- Footer -->
<footer class="w3-center w3-black w3-padding-16">
<p>%</p>
</footer>
</body>
</html>
Solution
Your h3
element is taking up the space.
Removing it will certainly help to reduce the gap.
Use Google chrome dev tool to help you to inspect and visualise the blocks, if you haven't used this tool before.
Answered By - Anthony Kong
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.