Why does the #testimonial / #testimonial-placeholder section not appear? I feel like I've tried everything. I have a background image that is supposed to display and no matter how I do it won't. The nav link doesn't even go to it. It's like it just doesn't exist no matter what configuration. I was wondering if there was a problem elsewhere in the page affecting it, but can't figure that either.
#import url('https://fonts.googleapis.com/css?family=Anton|Droid+Sans|Raleway|Ubuntu|Cairo|Julius+Sans+One|Poiret+One');
body {
color: #fff;
font-size: 16px;
}
a:link, a:visited {
color: #ba9077;
text-decoration: none;
font-family: Ubuntu;
}
a:hover, a:active {
text-decoration: none;
}
blockquote {
color: #000;
padding: 0;
border: none;
font-style: italic;
text-align: left;
}
blockquote cite {
display: block;
color: #777;
margin: 15px 0 0 0;
}
blockquote:before {
display: none;
}
/* LISTS */
ul {
list-style-type: none;
}
nav li {
border: 1px solid #bcd5d1;
padding: 5px;
margin: 5px;
text-align: center;
font-size: 1.5em;
}
header a:link {
color: #ba9077;
}
header a:visited {
color: #ba9077;
}
header a:hover, a:active {
color: #da5d61;
}
/* FLEXBOX */
.flexbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.box {
padding: 5px;
}
/* Table and Cell for Vertical Alignment */
.table {
display: table;
}
.cell {
display: table-cell;
vertical-align: middle;
}
/* SHOWCASE */
#showcase {
background-color: #1d2120;
height: 100vh;
width: 100%;
display: table;
}
#showcase h1 {
padding-top: 0px;
font-family: Ubuntu;
font-size: 4em;
color: #da5d61;
}
#showcase h2 {
color: #bcd5d1;
font-family: Cairo;
font-size: 2em;
margin: 0 0 20px;
}
#showcase h3 {
color: #ba9077;
font-family: Cairo;
font-size: 1em;
}
#inline {
font-size: 3em;
}
#inline li{
font-size: 1.5em;
padding: 0 10px 0 10px;
}
/* SERVICES */
#services {
width: 100%;
padding: 8vh 0 8vh;
background: #5a5c51;
background: -webkit-gradient(linear, left top, right bottom, from(#5a5c51), to(#9c9d96));
background: linear-gradient(to bottom right, #5a5c51, #9c9d96);
}
#services i {
color: #ba9077;
font-size: 5em;
text-align: center;
margin: 0 0 20px;
}
#services h2 {
color: #bcd5d1;
font-size: 1.75em;
text-align: center;
margin: 0 0 20px;
}
#services p {
font-size: 1em;
padding-top: 2em;
color: #1d2120;
font-family: Raleway;
font-weight: bold;
}
/* TESTINONIALS */
#testimonials {
background-color: #fff;
padding: 3% 0;
color: #000;
font-family: Raleway;
text-align: center;
}
.testimonial {
margin-bottom: 30px;
}
.testimonial img {
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#testimonials h2 {
margin: 0 0 30px;
}
#testimonials-placeholder {
height: 500px;
background: url("img/pen.jpg") top center no-repeat;
background-position: cover;
background-size: 100%;
}
/* CONTACT */
#contact {
background: #bcd5d1;
padding: 1em;
align: center;
color: #000;
font-size: 1em;
font-weight: bold;
}
#contact h2 {
margin: 20px;
}
#contact .container {
width: 40%;
}
#contact button {
margin: 20px;
}
/* FOOTER */
#footer {
background-color: #1d2120;
padding: 5% 0 5%;
}
#footer a:link, a:visited {
color: #da5d61;
text-decoration: none;
font-size: 1.5em;
}
#footer-icons {
font-size: .75em;
margin: 30px 0;
}
/* MEDIA QUERIES */
#media screen and (max-width: 600px){
.flexbox {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
#inline {
padding-top: 0px;
}
#contact .container {
width: 60%;
}
}
#media screen and (max-width: 400px){
#services h1 {
font-size: 2em;
}
#contact .container {
width: 80%;
}
}
<body>
<!-- SHOWCASE -->
<header id="showcase">
<div class="cell">
<div class="flexbox">
<div class="box text-center">
<h1 class="text animated pulse">Ellis Smith</h1>
<h2>Copywriter <i class="fa fa-pencil" aria-hidden="true"></i></h2>
<h3>Quality copy, never copied.</h3>
</div><!-- /box -->
<nav class="box">
<ul>
<li>
Services</li>
<li>
Testimonials
<li>
Contact</li>
</ul>
</nav><!-- /box -->
</div><!-- /flexbox -->
</div><!-- /cell -->
</header><!-- /showcase -->
<!--/END SHOWCASE -->
<!--SERVICES -->
<section id="services">
<div class="container">
<div class="row text-center">
<div class="col-sm-3">
<i class="fa fa-search" aria-hidden="true"></i>
<h2>SEO Copywriting</h2>
<p>Get more eyes on your work.</p>
</div><!-- /col -->
<div class="col-sm-3">
<i class="fa fa-video-camera" aria-hidden="true"></i>
<h2>Video Scripts</h2>
<p>When words aren’t enough.</p>
</div><!-- /col -->
<div class="col-sm-3">
<i class="fa fa-rss" aria-hidden="true"></i>
<h2>Blog Entries</h2>
<p>Pick a subject, any subject.</p>
</div><!-- /col -->
<div class="col-sm-3">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<h2>Copy Editing & Proofreading</h2>
<p>Take your work that extra mile.</p>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</section><!-- /services -->
<!--/END SERVICES -->
<!-- TESTIMONIALS -->
<section id="#testimonials-placeholder">
<h1>Leave a comment below.</h1>
</section>
<!--/END TESTIMONIALS -->
<!-- CONTACT -->
<section id="contact">
<div class="container">
<h2 class="text-center">Contact Ellis Smith</h2>
<form action="php/contact.php" method="post">
<div class="form-group">
<input placeholder="Name" name="yourname" type="text" class="form-control" id="name">
</div>
<div class="form-group">
<input placeholder="Email address" name="email" type="text" class="form-control" id="email">
</div>
<div class="form-group">
<input placeholder="Subject" name="subject" type="text" class="form-control" id="email">
</div>
<div class="form-group">
<textarea placeholder="Comment" class="form-control" rows="5" id="message" name="comments"></textarea>
</div>
<div class="text-center">
<button type="submit" value="Send" class="btn btn-dark">Submit</button>
</div>
</form>
</div><!-- /container -->
</section><!-- /contact -->
<!--/END CONTACT -->
<!--/FOOTER -->
<section id="footer">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#" target="_blank">
<i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a>
</li>
</ul>
<div id="footer-icons" class="text-center">
<i class="fa fa-copyright" aria-hidden="true"></i> , January 2018
</div>
</section><!-- /footer -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<!--/END FOOTER -->
</body>
<section id="testimonials-placeholder">
<h1>Leave a comment below.</h1>
</section>
Remove # tag in id="testimonial-placeholder"
Related
So, i am doing this frontend mentor challenge. I have done the mobile first design. My problem is how do i get my navbar to be like this . I have tried using display flex with flex direction row but the mobile design navbar is not changing its shape and size.
My code is producing the navbar like this
Can anyone please tell me what i am doing wrong in the media query that i am not getting the output i desire.
My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<script src="https://kit.fontawesome.com/572b4fce3c.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Shortly URL shortening API Challenge</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
<body>
<main>
<section class="header">
<!-------- Header Section -------->
<nav>
<img src="/images/logo.svg" alt="logo"></a>
<div class="nav-links" id="navLinks">
<!-- <i class="fa fa-solid fa-xmark"></i> -->
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Resources</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showHideMenu()"></i>
</nav>
<img class='illustration' src="/images/illustration-working.svg" alt="illustration">
<div class="first-section-content">
<h1>More than just <span class="short">shorter links</span></h1>
<p>Build your brand's recognition and get detailed insights on how your links are
performing.</p>
<button class="get-started">Get Started</button>
</div>
</section>
<!-- URL shortening -->
<article class="shorten-details">
<section class="shorten">
<div class="shorten-link">
<input type="text" placeholder="Shorten a link here....">
</div>
<span class="error-msg">Please add a link</span>
<button class="short-it">Shorten It!</button>
</section>
</article>
<!-- URL Copy -->
<article class="url-copy">
<div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section>
<!-- <div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section>
<div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section> -->
<section class="advanced-stats">
<h2>Advanced Statistics</h2>
<p class="perform">Track how your links are performing across the web with our advanced statistics
dashboard.</p>
<div class="stats">
<div class="stat">
<img class="brand-img" src="/images/icon-brand-recognition.svg" alt="brand-recognition">
<h3>Brand Recognition</h3>
<p class="stat-desc">Boost your brand recognition with each click. Generic links don’t mean a thing.
Branded links help instil confidence in your content.</ class="boost">
</div>
<div class="stat-1">
<img class="brand-img" src="/images/icon-detailed-records.svg" alt="detailed-records">
<h3>Detailed Records</h3>
<p class="stat-desc">Gain insights into who is clicking your links. Knowing when and where people
engage with your content helps inform better decisions.</p>
</div>
<div class="stat-2">
<img class="brand-img" src="/images/icon-fully-customizable.svg" alt="fully-customizable">
<h3>Fully Customizable</h3>
<p class="stat-desc">Improve brand awareness and content discoverability through customizable
links, supercharging audience engagement.</p>
</div>
</div>
</section>
</article>
<article class="boost-links">
<section class="boost">
<h2>Boost your links today</h2>
<button class="get-started-2">Get Started</button>
</section>
</article>
<article class="last-footer">
<section class="footer">
<div class="footer-links">
<div class="footer-link">
<h2>Shortly</h2>
<h3>Features</h3>
<ul>
<li>Link Shortening</li>
<li>Branded Links</li>
<li>Analytics</li>
</ul>
</div>
<div class="footer-link">
<h3>Resources</h3>
<ul>
<li>Blog</li>
<li>Developers</li>
<li>Support</li>
</ul>
</div>
<div class="footer-link">
<h3>Company</h3>
<ul>
<li>About</li>
<li>Our Team</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="socials">
<div class="social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-instagram"></i>
</div>
</div>
</section>
</article>
</main>
<script src="script.js"></script>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Nelson Uprety.
</div>
</body>
</html>
CSS code for the header / navbar part:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500;700&display=swap');
#import url('css-reset.css');
:root {
--color-cyan: hsl(180, 66%, 49%);
--color-dark-violet: hsl(257, 27%, 26%);
--color-red: hsl(0, 87%, 67%);
--color-gray: hsl(0, 0%, 75%);
--color-grayish-violet: hsl(257, 7%, 63%);
--color-grayish-violet-op: hsl(257, 7%, 63%, 0.3);
--color-very-dark-blue: hsl(255, 11%, 22%);
--color-very-dark-violet: hsl(260, 8%, 14%);
--color-second-bg: hsl(230, 25%, 95%);
--color-white: hsl(0, 0%, 100%);
--font-weight-five: 500;
--font-weight-seven: 700;
}
body {
font-family: 'Poppins',
sans-serif;
}
main {
overflow: hidden;
/* border: 1px solid green; */
max-width: 390px;
height: auto;
margin: 0 auto;
}
/* -------Header Section--------- */
.header {
display: flex;
flex-direction: column;
padding: 30px;
max-width: 350px;
}
.nav {
display: flex;
position: relative;
}
.nav-links {
background-color: var(--color-dark-violet);
width: 330px;
height: 370px;
border-radius: 10px;
position: absolute;
z-index: 2;
transition: 0.3s;
top: 100px;
right: 63px;
visibility: hidden;
}
nav .fa {
display: block;
color: var(--color-grayish-violet);
font-size: 30px;
cursor: pointer;
right: 63px;
top: 30px;
position: absolute;
}
.nav-links ul li {
list-style: none;
padding: 14px;
text-align: center;
display: block;
}
.nav-links ul li a {
text-decoration: none;
color: var(--color-white);
font-weight: var(--font-weight-seven);
font-size: 1.2rem;
padding: 10px 100px;
border-radius: 25px;
}
.nav-links ul li a:hover {
background-color: var(--color-cyan);
color: var(--color-white);
}
.nav-links ul li:nth-child(3) {
border-bottom: 1px solid var(--color-grayish-violet-op);
padding-bottom: 10px;
margin-right: 20px;
margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
}
.illustration {
position: relative;
right: -50px;
transform: scale(1.6);
margin-top: 100px;
right: -90px;
z-index: 1;
display: block;
}
.first-section-content {
margin-top: 100px;
transition: 0.3s;
}
.first-section-content.menu-open {
margin-top: 130px;
transition: 0.3s;
}
.first-section-content h1 {
font-size: 2.67rem;
font-weight: var(--font-weight-seven);
color: var(--color-very-dark-blue);
margin-bottom: 20px;
margin-left: 9px;
width: 350px;
line-height: 1.2;
}
.short {
margin-left: 15px;
}
.first-section-content p {
font-size: 1rem;
color: var(--color-grayish-violet);
font-weight: var(--font-weight-five);
margin-bottom: 35px;
margin-left: 6px;
width: 350px;
line-height: 2;
letter-spacing: 0.7px;
overflow: hidden;
}
.get-started {
background-color: var(--color-cyan);
color: var(--color-white);
border: none;
padding: 14px;
font-weight: var(--font-weight-seven);
width: 190px;
border-radius: 30px;
cursor: pointer;
margin-left: 70px;
}
#media (min-width:768px) {
body {
overflow-y: scroll;
min-height: 100vh;
overflow-x: hidden;
}
main {
height: 100vh;
max-width: 100%;
overflow: scroll;
}
.header {
display: flex;
/* align-items: center; */
/* flex-direction: row; */
width: 100%;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
gap: 2.3rem;
padding: 2.9rem 9.2rem;
position: relative;
}
.nav-links {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.nav-links ul li {}
.nav-links ul li a {
display: flex;
display: inline;
flex-direction: row;
background-color: transparent;
visibility: visible;
color: var(--color-gray);
}
nav .fa {
display: none;
}
}
display: flex; needs to be on the ul inside the .nav-links div - that ul is the element which contains the navigation items.
I am creating a Twitter clone but the sidebar moves down when I create the main page contents. I tried using Position - fixed and relative but still the same issue. Before I added the main page content, the sidebar was correctly positioned (please see screenshot) but as soon as its added, the sidebar moves down(please see screenshot).
I'm using Grid to create the three columns to give the Twitter aesthetics.
What am I doing wrong?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.twitter-logo {
height: 28px;
filter: invert(52%) sepia(50%) saturate(2964%) hue-rotate(179deg) brightness(95%) contrast(97%);
margin-left: 25px;
}
.left-sidebar {
/* position: fixed; */
position: relative;
}
.navbar-brand:hover {
background: rgba(29, 161, 242, 0.1);
border-radius: 50%;
color: #1da0f2;
margin-right: 23px;
/* padding: 20px; */
}
.left-sidebar-menu {
font-size: 20px;
cursor: pointer;
font-weight: 700;
display: flex;
color: rgb(15, 20, 25);
font-family: 'Times New Roman', Times, serif;
}
.left-sidebar-menu-icon {
align-items: flex-start;
height: 26px;
margin-right: 20px;
}
.nav-item {
padding: 10px;
margin: 2px 2px;
}
.nav-item:hover {
background: rgba(29, 161, 242, 0.1);
border-radius: 20px;
color: #1da0f2;
}
/* --------------------------------MAIN PAGE------ */
.main-page-header {
font-size: 18px;
height: 48px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
}
.main-page-header-profile-picture {
border-radius: 50%;
height: 48px;
}
.main-page-input {
border: 0 solid black;
}
.main-page-input-box {
padding-top: 10px;
border-bottom: 1px solid #e6e6e6;
}
.main-page-tweet-box {
margin-top: -5px;
word-wrap: break-word;
word-break: break-all;
outline: none;
}
.main-page-tweet-box:focus main-page-tweet-box:hover {
outline: none !important;
box-shadow: none;
border: 0;
}
.main-page-tweet-box {
height: 130px;
border: 0;
margin-top: -10px;
}
::placeholder {
font-family: 'Open Sans', sans-serif;
opacity: 1;
font-size: 18px;
/* position: absolute;
margin-top: 10px; */
}
.main-page-input-privacy {
/* display: flex;
align-items: flex-start; */
display: inline-block;
color: #1da1f2;
cursor: pointer;
}
.main-page-input-privacy-icon,
main-page-input-privacy-text {
display: inline;
}
/* .main-page-input-privacy i{
float: left;
} */
.main-page-input-icons {
display: flex;
justify-content: space-between;
margin-left: -35PX;
}
.main-page-input-icons-ul {
list-style-type: none;
margin-left: 5px;
}
.main-page-input-icons li {
display: inline;
/* width: 300px; */
list-style: none;
color: #1da1f2;
font-size: 20px;
margin: 0 2px;
height: 38px;
width: 38px;
cursor: pointer;
}
.main-page-tweet-button {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
color: white;
background-color: #1da1f2;
text-align: center;
cursor: pointer;
/* width: 75px; */
/* height: 30px; */
border: none;
outline: none;
opacity: 0.5;
}
/* .main-page-input form {
} */
/* .left-sidebar-menu-icon-active using js {
filter: invert(52%) sepia(50%) saturate(2964%) hue-rotate(179deg) brightness(95%) contrast(97%);
} */
/* .left-sidebar-menu-btn {
} */
.tweetbox__input img {
border-radius: 50%;
height: 40px;
}
.tweetBox {
padding-bottom: 10px;
border-bottom: 8px solid var(--twitter-background);
padding-right: 10px;
}
.tweetBox form {
display: flex;
flex-direction: column;
}
.tweetbox__input {
display: flex;
padding: 20px;
}
.tweetbox__input input {
flex: 1;
margin-left: 20px;
font-size: 20px;
border: none;
outline: none;
}
.tweetBox__tweetButton {
background-color: var(--twitter-color);
border: none;
color: white;
font-weight: 900;
border-radius: 30px;
width: 80px;
height: 40px;
margin-top: 20px;
margin-left: auto;
}
.tweet {
display: flex;
margin-bottom: 4px;
border-bottom: 1px solid rgb(47, 51, 54);
cursor: pointer;
}
.tweet-author-image {
border-radius: 50%;
height: 48px;
width: 48px;
margin-right: 12px;
}
.tweet-feed-content {
margin-bottom: 15px;
padding-bottom: 12px;
}
.tweet-header {
display: flex;
font-size: 15px;
font-weight: 400;
}
.tweet-author-username {
font-family: 'Times New Roman', Times, serif;
/* color: rgb(231, 233, 234); */
}
.tweet-author-handle {
color: rgb(113, 118, 123);
}
.tweeted-time {
color: rgb(113, 118, 123);
}
.engagement-icons-ul {
display: flex;
list-style-type: none;
justify-content: space-between;
margin-left: -30px;
width: 400px;
}
<div class="container">
<div class="row">
<div class="col-3 navbar">
<nav>
<div class="left-sidebar">
<a class="navbar-brand" href="#">
<img src={ % static 'network/images/brand.svg' %} alt="Twitter logo" class="twitter-logo">
</a>
<ul class="nav flex-column left-sidebar-menu mb-4 mt-2">
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/all-post.svg' %} alt="All post" class="left-sidebar-menu-icon"> All Post
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/following.svg' %} alt="Following" class="left-sidebar-menu-icon"> Following
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/notifications.svg' %} alt="Notifications" class="left-sidebar-menu-icon"> Notifications
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/messages.svg' %} alt="Messages" class="left-sidebar-menu-icon"> Messages
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/profile.svg' %} alt="Profile" class="left-sidebar-menu-icon"> Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/more.svg' %} alt="More" class="left-sidebar-menu-icon"> More
</a>
</li>
<button class="btn btn-primary rounded-pill my-2 py-3">Tweet</button>
</ul>
</div>
</nav>
</div>
<div class="col-5">
<div class="main-page-header mt-3 sticky-top">Home</div>
<div class="main-page-input">
<!-- <form class="d-flex flex-column"> -->
<div class="row">
<div class="col-2 main-page-header-profile-picture">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" class="main-page-header-profile-picture" alt="profile-picture" />
</div>
<div class="col-10">
<div class="main-page-input-box">
<div>
<textarea name="tweet-box" id="" class="form-control main-page-tweet-box text-wrap" cols="30" rows="10" placeholder="What's happening"></textarea>
<!-- <input type="text" class="form-control main-page-tweet-box text-wrap" id="exampleFormControlInput1" placeholder="What's happening"> -->
</div>
<div class="main-page-input-privacy pb-2 mt-3">
<i class="fas fa-globe-americas main-page-input-privacy-icon"></i>
<span class="ain-page-input-privacy-text ml-2">Everyone can reply</span>
</div>
</div>
<div class="main-page-input-icons mt-3">
<ul class="main-page-input-icons-ul">
<li><i class="fa-solid fa-image"></i></li>
<li><i class="fa-solid fa-square-poll-horizontal"></i></li>
<li><i class="fa-solid fa-face-grin"></i></li>
<li><i class="fa-regular fa-calendar"></i></li>
<li><i class="fa-solid fa-location-dot"></i></li>
</ul>
<button type="submit" class="btn btn-primary rounded-pill px-4 main-page-tweet-button"><strong>Tweet</strong></button>
</div>
</div>
</div>
<!-- </form> -->
</div>
<div class="tweet-feed">
<div class="tweet">
<img src="http://placeimg.com/140/140/people" alt="author profile picture" class="tweet-author-image" />
<div class="tweet-feed-content">
<div class="tweet-header">
Nick Huber
<div class="tweet-author-handle">#sweatystartup</div>
<div class="tweeted-time">8h</div>
</div>
<div class="tweet-content">
<div class="tweet-created-content">It is a wonderful day</div>
</div>
<div class="engagement-icons">
<ul class="engagement-icons-ul">
<li><i class="fa-regular fa-comment"></i></li>
<li><i class="fa-solid fa-retweet"></i></li>
<li><i class="fa-regular fa-heart"></i></li>
<li><i class="fa-solid fa-arrow-up-from-bracket"></i></li>
</ul>
</div>
</div>
</div>
<div class="tweet">
<img src="http://placeimg.com/140/140/animals" alt="author profile picture" class="tweet-author-image" />
<div class="tweet-feed-content">
<div class="tweet-header">
Randall
<div class="tweet-author-handle">#RandallKanna</div>
<div class="tweeted-time">18h</div>
</div>
<div class="tweet-content">
<div class="tweet-created-content">Hey friends</div>
<img src="http://placeimg.com/300/300/tech" alt="tweeter feed" />
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
TODO
</div>
</div>
</div>
I'm developing my portfolio with Bootstrap 4 and I'm having problems with the works section. When testing in mobile size, the works section overlaps the contact section.
What's the reason? What's the solution? I know it has something to do with Bootstrap's flex behavior, but I've done my research and can't quite find the problem.
Thanks in advance.
/*
* Pablo Herrero's portfolio | Made with love by Pablo Herrero | pabloherrero.me
* Copyright 2020 Pablo Herrero | MIT License
*/
/* Fonts */
#font-face {
font-family: 'fira_coderegular';
src: url('fonts/firacode-regular-webfont.woff2') format('woff2'), url('fonts/firacode-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codebold';
src: url('fonts/firacode-bold-webfont.woff2') format('woff2'), url('fonts/firacode-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codemedium';
src: url('fonts/firacode-medium-webfont.woff2') format('woff2'), url('fonts/firacode-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* General */
body {
position: relative;
font-family: 'fira_coderegular';
letter-spacing: normal;
overflow-y: scroll;
background-color: #ffffff;
}
body::-webkit-scrollbar {
display: none;
}
/* Navbar */
#navbar {
min-height: 56px;
background-color: transparent;
border-bottom: none;
}
#navbar .navbar-toggler {
color: #000000;
}
#navbar .navbar-toggler:focus {
outline: none;
}
#h {
font-size: 28px;
font-family: 'fira_codebold';
text-align: center;
color: #000000;
outline: none;
}
#navbar .nav-link {
font-size: 14px;
font-family: 'fira_codemedium';
padding: 1rem 1.5rem;
text-align: center;
color: #ffffff;
background-color: #000000;
outline: none;
}
#navbar .nav-link:hover {
color: #bd93f9;
outline: none;
}
#navbar .nav-link.active {
color: #50fa7b;
outline: none;
}
#navbar #h:hover {
color: #bd93f9;
outline: none;
}
#navbar #h:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
#h {
font-size: 32px;
}
#navbar .nav-link {
font-size: 16px;
padding: 0.5rem 0rem 0.5rem 3rem;
color: #000000;
background-color: transparent;
}
}
/* Header */
#header {
width: 100%;
height: 100vh;
}
#header .container {
min-height: 100%;
min-height: 100vh;
align-items: center;
}
#header .col-sm-12 {
text-align: center;
}
#header #headerPhoto {
text-align: center;
max-width: 100%;
}
#header h1 {
margin: 50px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codebold';
font-size: 64px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
#header h2 {
margin: 15px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codemedium';
font-size: 32px;
letter-spacing: 0.05rem;
}
#media (min-width: 992px) {
#header #headerPhoto {
max-width: 35%;
}
#header h1 {
margin: 25px 0px 0px 0px;
font-size: 72px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
#header h2 {
margin: 15px 0px 0px 0px;
font-size: 36px;
letter-spacing: 0.05rem;
}
}
/* About */
#about {
width: 100%;
height: 100vh;
}
#about .container {
min-height: 100%;
min-height: 100vh;
align-items: center;
}
#about .row {
background-color: #000000;
padding: 5vh 0vh 5vh 0vh;
margin: 1vh 0vh 1vh 0vh;
}
#about h2 {
width: 100%;
text-align: left;
margin-bottom: 30px;
font-family: 'fira_codemedium';
font-size: 32px;
color: #ffffff;
letter-spacing: 0.05rem;
}
#about p {
width: 100%;
text-align: left;
font-family: 'fira_coderegular';
font-size: 16px;
color: #ffffff;
}
#media (min-width: 992px) {
#about .row {
background-color: #000000;
padding: 15vh 10vh 15vh 10vh;
margin: 1vh 0vh 1vh 0vh;
}
#about h2 {
text-align: left;
margin-bottom: 30px;
font-size: 36px;
}
#about p {
text-align: left;
font-size: 18px;
}
}
/* Works */
#works {
width: 100%;
height: 100vh;
}
#works .container {
min-height: 100%;
min-height: 100vh;
align-items: center;
}
#works .col-sm-4 {
height: 35vh;
background-color: #000000;
border: 3vh solid white;
}
#works h2 {
width: 100%;
text-align: center;
margin-bottom: 30px;
font-family: 'fira_codemedium';
font-size: 32px;
color: #000000;
letter-spacing: 0.05rem;
}
#works h3 {
width: 100%;
padding-top: 10px;
text-align: left;
font-family: 'fira_codemedium';
font-size: 26px;
color: #ffffff;
letter-spacing: 0.05rem;
}
#works p {
text-align: left;
font-family: 'fira_coderegular';
font-size: 16px;
color: #ffffff;
}
#works .col-sm-4 i {
font-size: 16px;
color: #ffffff;
}
#works hr {
border-color: #ffffff;
}
#works a,
#works a i {
color: #000000;
text-decoration: unset;
}
#works h3:hover {
color: #bd93f9;
}
#works h3:active {
color: #50fa7b;
outline: none;
}
#works a:hover {
color: #bd93f9;
}
#works a:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
#works h2 {
text-align: center;
margin-bottom: 30px;
font-size: 36px;
}
#works h3 {
text-align: left;
font-size: 30px;
}
#works p {
text-align: left;
font-size: 18px;
}
#works i {
font-size: 18px;
}
}
/* Contact */
#contact {
width: 100%;
height: 100vh;
}
#contact .container {
min-height: 100%;
min-height: 100vh;
}
#contact h2 {
width: 100%;
text-align: center;
margin-bottom: 30px;
font-family: 'fira_codemedium';
font-size: 32px;
color: #000000;
letter-spacing: 0.05rem;
}
#contactForm input,
#contactForm textarea,
#contactForm button {
background-color: #000000;
border-radius: 0%;
}
#contactForm input::placeholder,
#contactForm textarea::placeholder,
#contactForm button {
color: white;
font-size: 16px;
}
#contactForm button:hover {
color: #bd93f9;
}
#contactForm button:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
#contact h2 {
font-size: 36px;
}
#contactForm input::placeholder,
#contactForm textarea::placeholder,
#contactForm button {
color: white;
font-size: 18px;
}
}
/* Footer */
#footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: 5px;
background-color: transparent;
color: #000000;
text-align: center;
}
#footer #social a {
font-size: 14px;
color: #000000;
}
#footer #social i:hover {
color: #bd93f9;
}
#footer #social i:active {
color: #50fa7b;
outline: none;
}
#footer small {
font-size: 14px;
}
#media (min-width: 992px) {
#footer #copy {
float: left;
}
#footer #social a {
font-size: 21px;
float: right;
padding: 0.5rem 0rem 0.5rem 2.5rem;
}
#footer small {
font-size: 16px;
}
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="I'm a developer. Here I show my evolution, my work and my passion.">
<meta name="author" content="Pablo Herrero">
<title>Pablo Herrero | Developer | pabloherrero.me</title>
<!-- Bootstrap style sheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Touch icons -->
</head>
<body id="top">
<!-- Navbar -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#top">
<div id="h" class="align-self-center">H</div>
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#works">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Header -->
<header id="header">
<div class="container d-flex flex-column justify-content-center align-items-center">
<div class="row align-items-center">
<div class="col-sm-12">
<img src="img/pabloHerrero.jpg" alt="Pablo Herrero" id="headerPhoto">
</div>
<div class="col-sm-12">
<h1>Pablo Herrero</h1>
</div>
<div class="col-sm-12">
<h2>lore ipsum</h2>
</div>
</div>
</div>
</header>
<!-- About -->
<section id="about">
<div class="container d-flex flex-column justify-content-center align-items-center">
<div class="row">
<div class="col-sm-12 align-self-center">
<h2>Hi! I'm a developer.</h2>
</div>
<div class="col-sm-12 align-self-center">
<p>I learned to code in 2019 when I started my studies on development. I'm confortable using Java, SQL, HTML5, CSS3, Bootstrap 4 and GIT, although I'm always digging deep and learning new things. I'm currently working on JDBC, Swing, Android Studio,
JavaScript and Python, and will start soon with TypeScript, Node.js and Angular. Here you can take a look at my projects and drop me a line with the contact form if you wish.</p>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="works">
<div class="container d-flex flex-column justify-content-center">
<div>
<h2>Works</h2>
</div>
<div class="row">
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
</div>
<div>
More on my GitHub <i class="fab fa-github"></i>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact">
<div class="container d-flex flex-column justify-content-center">
<div>
<h2>Contact</h2>
</div>
<form id="contactForm" action="https://getsimpleform.com/messages?form_api_token=82ef8c01a157ab94e750cd5fa275f2ce" method="post" class="form" role="form" autocomplete="off">
<div class="form-group">
<input type="text" class="form-control" id="formName" aria-describedby="name" placeholder="Name" required="">
</div>
<div class="form-group">
<input type="email" class="form-control" id="formMail" aria-describedby="email" placeholder="Email" required="">
</div>
<div class="form-group">
<textarea class="form-control" id="formText" rows="10" placeholder="Your message" required=""></textarea>
</div>
<button type="submit" class="btn float-left">Submit</button>
</form>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<small id="copy">© 2020 Pablo Herrero</small>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<div id="social">
<i class="fab fa-twitter"></i>
<i class="fab fa-dev"></i>
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/121886ca53.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<!-- Popper.js -->
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Own script -->
<script src="js/app.js"></script>
</body>
</html>
Change the height of <section id="works"> from "height:100vh" to "min-height:100vh"
Reason:
Work section's height was fixed to 100vh while in mobile view all the boxes come in vertical direction and the height exceeds the 100vh. As a result it is occupying the space of next section also.
By adding the overflow-hidden class simply solve this problem, but you can also write in an external CSS file!
/*
* Pablo Herrero's portfolio | Made with love by Pablo Herrero | pabloherrero.me
* Copyright 2020 Pablo Herrero | MIT License
*/
/* Fonts */
#font-face {
font-family: 'fira_coderegular';
src: url('fonts/firacode-regular-webfont.woff2') format('woff2'), url('fonts/firacode-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codebold';
src: url('fonts/firacode-bold-webfont.woff2') format('woff2'), url('fonts/firacode-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codemedium';
src: url('fonts/firacode-medium-webfont.woff2') format('woff2'), url('fonts/firacode-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* General */
body {
position: relative;
font-family: 'fira_coderegular';
letter-spacing: normal;
overflow-y: scroll;
background-color: #ffffff;
}
body::-webkit-scrollbar {
display: none;
}
/* Navbar */
#navbar {
min-height: 56px;
background-color: transparent;
border-bottom: none;
}
#navbar .navbar-toggler {
color: #000000;
}
#navbar .navbar-toggler:focus {
outline: none;
}
#h {
font-size: 28px;
font-family: 'fira_codebold';
text-align: center;
color: #000000;
outline: none;
}
#navbar .nav-link {
font-size: 14px;
font-family: 'fira_codemedium';
padding: 1rem 1.5rem;
text-align: center;
color: #ffffff;
background-color: #000000;
outline: none;
}
#navbar .nav-link:hover {
color: #bd93f9;
outline: none;
}
#navbar .nav-link.active {
color: #50fa7b;
outline: none;
}
#navbar #h:hover {
color: #bd93f9;
outline: none;
}
#navbar #h:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
#h {
font-size: 32px;
}
#navbar .nav-link {
font-size: 16px;
padding: 0.5rem 0rem 0.5rem 3rem;
color: #000000;
background-color: transparent;
}
}
/* Header */
#header {
width: 100%;
height: 100vh;
}
#header .container {
min-height: 100%;
min-height: 100vh;
align-items: center;
}
#header .col-sm-12 {
text-align: center;
}
#header #headerPhoto {
text-align: center;
max-width: 100%;
}
#header h1 {
margin: 50px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codebold';
font-size: 64px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
#header h2 {
margin: 15px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codemedium';
font-size: 32px;
letter-spacing: 0.05rem;
}
#media (min-width: 992px) {
#header #headerPhoto {
max-width: 35%;
}
#header h1 {
margin: 25px 0px 0px 0px;
font-size: 72px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
#header h2 {
margin: 15px 0px 0px 0px;
font-size: 36px;
letter-spacing: 0.05rem;
}
}
/* About */
#about {
width: 100%;
height: 100vh;
}
#about .container {
min-height: 100%;
min-height: 100vh;
align-items: center;
}
#about .row {
background-color: #000000;
padding: 5vh 0vh 5vh 0vh;
margin: 1vh 0vh 1vh 0vh;
}
#about h2 {
width: 100%;
text-align: left;
margin-bottom: 30px;
font-family: 'fira_codemedium';
font-size: 32px;
color: #ffffff;
letter-spacing: 0.05rem;
}
#about p {
width: 100%;
text-align: left;
font-family: 'fira_coderegular';
font-size: 16px;
color: #ffffff;
}
#media (min-width: 992px) {
#about .row {
background-color: #000000;
padding: 15vh 10vh 15vh 10vh;
margin: 1vh 0vh 1vh 0vh;
}
#about h2 {
text-align: left;
margin-bottom: 30px;
font-size: 36px;
}
#about p {
text-align: left;
font-size: 18px;
}
}
/* Works */
#works {
width: 100%;
height: 100vh;
}
#works .container {
min-height: 100%;
min-height: 100vh;
align-items: center;
}
#works .col-sm-4 {
height: 35vh;
background-color: #000000;
border: 3vh solid white;
}
#works h2 {
width: 100%;
text-align: center;
margin-bottom: 30px;
font-family: 'fira_codemedium';
font-size: 32px;
color: #000000;
letter-spacing: 0.05rem;
}
#works h3 {
width: 100%;
padding-top: 10px;
text-align: left;
font-family: 'fira_codemedium';
font-size: 26px;
color: #ffffff;
letter-spacing: 0.05rem;
}
#works p {
text-align: left;
font-family: 'fira_coderegular';
font-size: 16px;
color: #ffffff;
}
#works .col-sm-4 i {
font-size: 16px;
color: #ffffff;
}
#works hr {
border-color: #ffffff;
}
#works a,
#works a i {
color: #000000;
text-decoration: unset;
}
#works h3:hover {
color: #bd93f9;
}
#works h3:active {
color: #50fa7b;
outline: none;
}
#works a:hover {
color: #bd93f9;
}
#works a:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
#works h2 {
text-align: center;
margin-bottom: 30px;
font-size: 36px;
}
#works h3 {
text-align: left;
font-size: 30px;
}
#works p {
text-align: left;
font-size: 18px;
}
#works i {
font-size: 18px;
}
}
/* Contact */
#contact {
width: 100%;
height: 100vh;
}
#contact .container {
min-height: 100%;
min-height: 100vh;
}
#contact h2 {
width: 100%;
text-align: center;
margin-bottom: 30px;
font-family: 'fira_codemedium';
font-size: 32px;
color: #000000;
letter-spacing: 0.05rem;
}
#contactForm input,
#contactForm textarea,
#contactForm button {
background-color: #000000;
border-radius: 0%;
}
#contactForm input::placeholder,
#contactForm textarea::placeholder,
#contactForm button {
color: white;
font-size: 16px;
}
#contactForm button:hover {
color: #bd93f9;
}
#contactForm button:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
#contact h2 {
font-size: 36px;
}
#contactForm input::placeholder,
#contactForm textarea::placeholder,
#contactForm button {
color: white;
font-size: 18px;
}
}
/* Footer */
#footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: 5px;
background-color: transparent;
color: #000000;
text-align: center;
}
#footer #social a {
font-size: 14px;
color: #000000;
}
#footer #social i:hover {
color: #bd93f9;
}
#footer #social i:active {
color: #50fa7b;
outline: none;
}
#footer small {
font-size: 14px;
}
#media (min-width: 992px) {
#footer #copy {
float: left;
}
#footer #social a {
font-size: 21px;
float: right;
padding: 0.5rem 0rem 0.5rem 2.5rem;
}
#footer small {
font-size: 16px;
}
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="I'm a developer. Here I show my evolution, my work and my passion.">
<meta name="author" content="Pablo Herrero">
<title>Pablo Herrero | Developer | pabloherrero.me</title>
<!-- Bootstrap style sheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Touch icons -->
</head>
<body id="top">
<!-- Navbar -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#top">
<div id="h" class="align-self-center">H</div>
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#works">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Header -->
<header id="header">
<div class="container d-flex flex-column justify-content-center align-items-center">
<div class="row align-items-center">
<div class="col-sm-12">
<img src="img/pabloHerrero.jpg" alt="Pablo Herrero" id="headerPhoto">
</div>
<div class="col-sm-12">
<h1>Pablo Herrero</h1>
</div>
<div class="col-sm-12">
<h2>lore ipsum</h2>
</div>
</div>
</div>
</header>
<!-- About -->
<section id="about">
<div class="container d-flex flex-column justify-content-center align-items-center">
<div class="row">
<div class="col-sm-12 align-self-center">
<h2>Hi! I'm a developer.</h2>
</div>
<div class="col-sm-12 align-self-center">
<p>I learned to code in 2019 when I started my studies on development. I'm confortable using Java, SQL, HTML5, CSS3, Bootstrap 4 and GIT, although I'm always digging deep and learning new things. I'm currently working on JDBC, Swing, Android Studio,
JavaScript and Python, and will start soon with TypeScript, Node.js and Angular. Here you can take a look at my projects and drop me a line with the contact form if you wish.</p>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="works" class="overflow-hidden">
<div class="container d-flex flex-column justify-content-center">
<div>
<h2>Works</h2>
</div>
<div class="row">
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
<div class="col-sm-4 align-self-center">
<a href="http://" target="_blank">
<h3>Addicted Dev Bot</h3>
<hr>
<div>
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
</div>
<p>Node.js Twitter bot.</p>
</a>
</div>
</div>
<div>
More on my GitHub <i class="fab fa-github"></i>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="overflow-hidden">
<div class="container d-flex flex-column justify-content-center">
<div>
<h2>Contact</h2>
</div>
<form id="contactForm" action="https://getsimpleform.com/messages?form_api_token=82ef8c01a157ab94e750cd5fa275f2ce" method="post" class="form" role="form" autocomplete="off">
<div class="form-group">
<input type="text" class="form-control" id="formName" aria-describedby="name" placeholder="Name" required="">
</div>
<div class="form-group">
<input type="email" class="form-control" id="formMail" aria-describedby="email" placeholder="Email" required="">
</div>
<div class="form-group">
<textarea class="form-control" id="formText" rows="10" placeholder="Your message" required=""></textarea>
</div>
<button type="submit" class="btn float-left">Submit</button>
</form>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<small id="copy">© 2020 Pablo Herrero</small>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<div id="social">
<i class="fab fa-twitter"></i>
<i class="fab fa-dev"></i>
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/121886ca53.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<!-- Popper.js -->
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Own script -->
<script src="js/app.js"></script>
</body>
</html>
As the title suggests I'm trying to align my text in my footer to be horizontally center and aligned to the bottom.
Having read other's solutions, I've tried to set the parent div to relative, the p element to absolute, and then bottom: 0;/vertical-align: bottom; But doesn't work.
What happens is that the text moves up into the above div and is no longer horizontally centered.
/*Section3*/
#section3 {
height: 50%;
background: #6ed3cf;
text-align: center;
padding: 0 0 0.5em;
height: 20em;
}
#section3 h2 {
font-size: 2em;
font-weight: 200;
}
#section3 i {
padding: 0.5em;
color: black;
}
/*Footer*/
#footer {
background:#fff;
color: black;
height: 10%;
font-family: 'Open Sans', sans-serif;
position: relative;
display: table;
}
#footer p {
font-size: 0.7em;
text-align: center;
position: absolute;
bottom: 0;
vertical-align: bottom;
}
<div id="section3" style="display:flex;justify-content:center;align-items:center;">
<div>
<h2>header</h2>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>blablablablablablablablablablablablablablablablablablablablabla</p>
<i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i >
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p>text</p>
</div>
</div>
</div>
</div>
I'm a bit confused about certain properties on your components, but here's what I would do:
Remove position: absolute on your <p> element, and remove the display: table from your <footer>.
Like so:
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
min-height: 100%;
}
/*Section3*/
#section3 {
height: 50%;
background: #6ed3cf;
text-align: center;
padding: 0 0 0.5em;
height: 20em;
}
#section3 h2 {
font-size: 2em;
font-weight: 200;
}
#section3 i {
padding: 0.5em;
color: black;
}
/*Footer*/
#footer {
background: #fff;
color: black;
height: 10%;
font-family: 'Open Sans', sans-serif;
position: absolute;
width: 100%;
bottom: 0;
}
#footer div {
height: 100%;
}
#footer .row > div {
width: 100%;
display: table;
}
#footer p {
display: table-cell;
font-size: 0.7em;
text-align: center;
bottom: 0;
vertical-align: bottom;
}
<div id="section3" style="display:flex;justify-content:center;align-items:center;">
<div>
<h2>header</h2>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>blablablablablablablablablablablablablablablablablablablablabla</p>
<i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i >
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p>text</p>
</div>
</div>
</div>
</div>
It worked for me when i gave width:100%; to my footer property. if you do that then the text aligns itself to middle. PS, my reputation doesnt allow me to add a comment...
Please add width style for P element of #footer as following :
#footer p {
font-size: 0.7em;
text-align: center;
position: absolute;
bottom: 0;
vertical-align: bottom;
width:100%; /* added new style */
}
If you have any issue please let me know.
Thanks...
You just try this.
#footer {
background:#fff;
color: black;
height: 10%;
font-family: 'Open Sans', sans-serif;
position: relative;
display: table;
width: 100%;
text-align: center;
}
This is worked for me.
See if this solve your purpose
#section3 {
height: 50%;
background: #6ed3cf;
text-align: center;
padding: 0 0 0.5em;
height: 20em;
}
#section3 h2 {
font-size: 2em;
font-weight: 200;
}
#section3 i {
padding: 0.5em;
color: black;
}
/*Footer*/
#footer {
/* background: #fff; */
/* color: black; */
/* height: 10%; */
/* font-family: 'Open Sans', sans-serif; */
/* position: relative; */
/* display: table; */
background: #6ed3cf;
}
#footer p {
font-size: 0.7em;
text-align: center;
/* position: absolute; */
/* bottom: 0; */
/* vertical-align: bottom; */
margin-top: 0px;
}
<div id="section3" style="display:flex;justify-content:center;align-items:center;">
<div>
<h2>header</h2>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>blablablablablablablablablablablablablablablablablablablablabla</p>
<i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i >
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<p>text</p>
</div>
</div>
</div>
</div>
I had a quick question about a website I am currently taking from design into code. I am using a simple grid layout with a few fixed-width columns, but for some reason when the browser wraps below 1500 pixels, the columns start wrapping. I'm super confused as to why this is happening as I have a width set on my container and the columns are fixed-width.
Here is a link to the site on my staging server: http://staging.slackrmedia.com/halfpast/
Here is a link to a jsFiddle: http://jsfiddle.net/PaFKW/
please note the "external resources" located in the jsFiddle
Here is the code:
HTML:
<body class="transition">
<div class="container center">
<header class="row">
<div class="col-1-3-fixed">
<nav>
<ul class="inline text-left">
<li>
The Chronique
</li>
<li>
Boutiques
</li>
</ul><!-- .inline .text-left -->
</nav>
</div><!-- .col-1-3-fixed -->
<div class="col-1-3-fixed">
<a href="">
<img src="http://staging.slackrmedia.com/halfpast/images/logo.png" class="img-center transition" alt="HalfPast Logo" />
</a>
</div><!-- .col-1-3-fixed -->
<div class="col-1-3-fixed">
<ul class="inline text-right">
<li>
Login
</li>
<li>
Register
</li>
</ul><!-- .inline .text-right -->
<nav>
<ul class="inline text-right">
<li>
Reviews
</li>
<li>
Features
</li>
</ul><!-- .inline .text-right -->
</nav>
</div><!-- .col-1-3-fixed -->
</header><!-- .row -->
</div><!-- .container .center -->
<div class="row">
<div class="col-1 masthead background-cover">
<div class="container center">
<h1 class="text-center">Use HalfPast to find local luxury watch dealers.</h1>
<h2 class="text-center">Register below or log in here</h2>
<form action="" class="center">
<input type="text" name="name" placeholder="First & Last Name:" />
<input type="email" name="email" placeholder="Email Address:" />
<input type="password" name="password" placeholder="Password:" />
<input type="submit" value="Create your account" class="btn" />
</form>
</div><!-- .container .center -->
</div><!-- .col-1 -->
</div><!-- .row -->
<div class="row how-does-halfpast">
<div class="container center">
<div class="col-1-fixed">
<img src="http://staging.slackrmedia.com/halfpast/images/seperator.png" />
<h1 class="tk-ltc-bodoni-175 text-center">How does HalfPast work?</1>
</div><!-- .col-1-fixed -->
<div class="col-1-2-fixed">
<img src="http://staging.slackrmedia.com/halfpast/images/imac.png" />
</div><!-- .col-1-2-fixed -->
<div class="col-1-2-fixed">
<p><span class="text-red">HalfPast works with brands and retailers to simplify the way you shop for luxury watches</span></p>
<p>Browse through our articles and request "Product Details" to connect with our network of manufacturer authorized dealers.</p>
<p>HalfPast will anonymously submit your request to your local authorized dealer, who will respond with additional information. Our service introduces you to high-quality retailers and allows you to engage with them in a low-pressure environment.</p>
<p>Authenticity is guaranteed.</p>
</div><!-- .col-1-2-fixed -->
</div><!-- .container .center -->
</div><!-- .row -->
<div class="row halfpast-features-services">
<div class="container center">
<div class="col-1-fixed text-center">
<h1 class="tk-ltc-bodoni-175">HalfPast Features & Services</h1>
<h4 class="center">HalfPast partners with brands and retailers to help you find the relevant authorized retailer in your geography</h4>
</div><!-- .col-1-fixed .text-center -->
<div class="col-1-2-fixed">
<div class="row">
<div class="col-1-8">
<p><span class="icon-map-marker text-red"></span></p>
</div><!-- .col-1-8 -->
<div class="col-7-8">
<p><span class="text-red">Find local watch dealers in your area</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sodales rutrum mauris, a porta augue.</p>
</div><!-- .col-7-8 -->
<img src="http://staging.slackrmedia.com/halfpast/images/map.png" alt="Find local watch dealers in your area" class="img-border" />
</div><!-- .row -->
</div><!-- .col-1-2-fixed -->
<div class="col-1-2-fixed">
<div class="row">
<div class="col-1-8">
<p><span class="icon-info text-red"></span></p>
</div><!-- .col-1-8 -->
<div class="col-7-8">
<p><span class="text-red">Get exclusive content about brands</span></p>
<p>HalfPast partners with the leading brands in the luxury watch industry to provide exclusive branded content.</p>
</div><!-- .col-7-8 -->
<img src="http://staging.slackrmedia.com/halfpast/images/chrono-blue.png" alt="Get exclusive content about brands" class="img-border" />
</div><!-- .row -->
</div><!-- .col-1-2-fixed -->
</div><!-- .container .center -->
</div><!-- .row -->
<div class="row sign-up">
<div class="container center">
<div class="col-1-fixed text-center">
<h5 style="display: inline;">Sign up for a free HalfPast account — today</h5>
<a class="btn">Create your account</a>
</div><!-- .col-1-fixed -->
</div><!-- .container .center -->
</div><!-- .row -->
<footer class="row">
<div class="container center">
<div class="col-1-3-fixed footer-nav">
<p>Navigation</p>
<div class="row">
<div class="col-1-2">
<ul>
<li>
The Chronique
</li>
<li>
Reviews
</li>
<li>
Contact
</li>
</ul>
</div><!-- .col-1-2 -->
<div class="col-1-2">
<ul>
<li>
Boutiques
</li>
<li>
Features
</li>
<li>
Register/Login
</li>
</ul>
</div><!-- .col-1-2 -->
</div><!-- .row -->
</div><!-- .col-1-3-fixed -->
<div class="col-1-3-fixed"> </div>
<div class="col-1-3-fixed">
<p>Sign up for our newsletter</p>
<form action="">
<input type="email" placeholder="your email address" required /><span class="form_hint">Proper format "name#something.com"</span>
<input type="submit" value="SIGN UP" class="btn small" />
</form>
</div><!-- .col-1-3-fixed -->
<div class="col-1-fixed">
<img src="http://staging.slackrmedia.com/halfpast/images/logo-footer.png" class="img-center transition" />
</div><!-- .col-1-fixed -->
</div><!-- .container .center -->
</footer><!-- .row -->
CSS:
/* General
============================= */
html, html a {
padding-top: 20px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
font-smooth: always;
-webkit-font-smoothing: antialiased;
}
body { font: 1em/1.6 "myriad-pro", Arial, Helvetica, sans-serif; }
.left { float: left; }
.right { float: right; }
.center { margin: 0 auto; }
.img-center {
display: block;
margin: 0 auto;
}
.img-border { border: 5px solid #fff; }
/* Typography
============================= */
h1 { font-size: 2.2em; }
h2 { font-size: 2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
h6 { font-size: 12em; }
a {
color: #434343;
text-decoration: none;
}
a:hover { color: #000; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-red {
color: #c60202;
font-size: 1.313em;
}
/* Lists
============================= */
ul { list-style: none; }
ul li,
ol li { line-height: 2; }
ul.inline li,
ol.inline li { display: inline; }
ul.inline li:last-child,
ol.inline li:last-child { margin-right: 0px; }
input { -webkit-appearance: none; }
a:active, a:active *,
a:focus, a:focus *,
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
-moz-outline-style: none;
}
/* Effects
============================= */
.box-shadow {
-webkit-box-shadow: 0px 0px 3px 3px rgba(150, 150, 150, 0.3);
box-shadow: 0px 0px 3px 3px rgba(150, 150, 150, 0.3);
}
.border-radius {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.transition,
a:hover {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.background-cover {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Selection
============================= */
*::selection {
background: #d31d1c;
color: #fff;
}
*::-moz-selection {
background: #d31d1c;
color: #fff;
}
*::-webkit-selection {
background: #d31d1c;
color: #fff;
}
/* Container (w/Micro-Clearfix)
============================= */
.container { max-width: 1080px; }
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after { clear: both; }
.container {
width: 80%;
*zoom: 1;
}
/* Grid
============================= */
[class*='col-'] {
float: none;
width: 100%;
}
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.row { margin-left: -20px; }
.row:after {
clear: both;
content: "";
display: table;
}
/*
* Grid Gutters
*/
[class*='col-'] {
float: left;
padding-left: 20px;
}
.row-pad { padding: 20px 0 20px 20px; }
.row-pad [class*='col-']:last-of-type { padding-right: 20px; }
/*
* Fluid Grid Columns
*/
.col-1 { width: 100%; }
.col-7-8 { width: 75%; }
.col-2-3 { width: 66.66%; }
.col-1-2 { width: 50%; }
.col-1-3 { width: 33.33%; }
.col-1-4 { width: 25%; }
.col-1-8 { width: 12.5%; }
/*
* Fixed Grid Columns
*/
.col-1-fixed { width: 1080px; }
.col-7-8-fixed { width: 945px; }
.col-2-3-fixed { width: 720px; }
.col-1-2-fixed { width: 540px; }
.col-1-3-fixed { width: 360px; }
.col-1-4-fixed { width: 270px; }
.col-1-8-fixed { width: 135px; }
/* Header */
header img:hover { opacity: 0.6; }
header ul.inline li,
header nav ul.inline li { margin-right: 20px; }
header nav ul.inline li:last-of-type,
header ul.inline li:last-of-type { margin-right: 0px; }
header nav { margin-top: 90px; }
header.row .col-1-3-fixed:last-of-type nav { margin-top: 42px; }
header nav ul.inline li { margin-right: 80px; }
/* Masthead */
.masthead {
background: #000 url('../images/header.png') no-repeat center center;
color: #fff;
font-weight: 100;
min-height: 555px;
}
.masthead .container { margin-top: 90px; }
.masthead a { color: #c60202; }
.masthead a:hover { text-decoration: underline; }
.masthead h1,
.masthead h2 { font-weight: 100; }
.masthead h1 {
font-size: 2.625em;
margin-bottom: 5px;
}
.masthead h2 {
font-size: 2em;
margin-top: 10px;
}
.masthead form {
background: #fff;
margin-top: 60px;
padding: 20px;
width: 930px;
}
.masthead form input { height: 40px; }
.masthead form input[type="submit"].btn {
font-size: 1.25em;
line-height: 20px;
}
.masthead form ::-webkit-input-placeholder { color: #000; }
.masthead form :-moz-placeholder { color: #000; }
.masthead form ::-moz-placeholder { color: #000; }
.masthead form :-ms-input-placeholder { color: #000; }
/* Body */
.how-does-halfpast { margin-bottom: -65px; }
.how-does-halfpast .col-1-fixed img { padding-top: 40px; }
.halfpast-features-services {
background: #f4f4f4;
border-top: 1px solid #d9d9d9;
margin: 1px 0;
padding-top: 60px;
}
.halfpast-features-services h4 {
font-size: 1.313em;
font-weight: 100;
padding-bottom: 30px;
width: 600px;
}
.halfpast-features-services [class*='icon-'] {
font-size: 4em;
margin-left: 13px;
}
.halfpast-features-services img { margin: 0 0 -8px 20px; }
.halfpast-features-services img.img-border { border-bottom: 1px solid #fff; }
.sign-up {
border-top: 1px solid #d9d9d9;
padding: 100px 0;
}
.sign-up a.btn { margin: 0 0 -6px 30px; }
/* Footer */
footer {
background: #000;
color: #fff;
padding: 15px 0 30px;
}
footer a { color: #fff; }
footer a:hover { color: #ccc; }
footer ul { padding-left: 0px; }
footer ul li a { font-size: 0.875em; }
footer .col-1-3-fixed.footer-nav p { margin-bottom: 0px; }
footer form input { margin-right: 5px; }
footer .col-1-fixed { padding-top: 45px; }
footer .col-1-fixed img { opacity: 0.4; }
footer .col-1-fixed img:hover { opacity: 0.7; }
I would really appreciate any and all help on this. It's such a small, simple thing, but it's driving me absolutely crazy. Thanks anybody who helps me tackle this.
The .container div that holds your columns is set to 80% of the width of the page, so fixed width elements inside it will wrap when their parent container's computed width becomes too narrow. Max-width doesn't do anything if the computed width is smaller than 1080 - define the width of the .container as fixed, so that on smaller views you can just do a horizontal scroll.
Also, I personally browse at a browser width of 1280, so I would consider doing a little bit of refactoring to lessen whitespace, as in my view the top link bar also wraps around and breaks.