OVERVIEW
I am building a website to showcase my blockchain and cybersecurity projects I'd worked with. So far, I'd implemented two pages of my website using bootstrap v5.1.3. I'm no front-end developer, but still I wanted to build something of my own.
Currently, I'm writing the description of one of my projects, and later I will add some images into it.
PROBLEM
I'm currently facing the issue of an horizontal bar showing if I write too much paragraphs in the page and I don't know how to make it disappear.
I'm trying to solve this issue so that all the paragraphs are responsive and only appear within the viewport width of a screen, and don't overflow creating the horizontal bar.
Check the image below for a better explanation.
IMAGE
QUESTION
How can I solve this only using bootstrap v5.1.3?
WEBPAGE CODE
/* test.css */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Hack, monospace !important;
background-color: #0f0f0f;
}
body {
display: flex!important;
}
.wrapper {
background-color: #0f0f0f;
}
.text-center.h1 {
color: #F4364C !important;
font-size: 4vw !important;
}
.h6 {
color: #F4364C !important;
font-size: 1.25vw !important;
opacity: 0.5 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Joshua">
<title>Project 1 | XXX XXX</title>
<!-- hack fonts -->
<link href='https://cdn.jsdelivr.net/npm/hack-font#3.3.0/build/web/hack.css' rel='stylesheet' >
<!-- stylesheet -->
<link href='test.css' rel='stylesheet'>
<!-- bootstrap-5.1.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- bootstrap-5.1.3 script bundle with popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100 wrapper">
<!-- Project Title -->
<div class="container-fluid my-auto">
<p class="text-center h1"><span>Astronomy Star Registry</span></p>
</div>
<div class="container-fluid my-auto">
<p class="h6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non nibh sit amet eros ullamcorper tincidunt. Curabitur sed imperdiet erat. In facilisis urna magna, ut mollis est posuere nec. Duis non neque vel libero dignissim dictum. Nullam scelerisque, sem porttitor dignissim blandit, enim felis condimentum enim, non cursus felis ex vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc lectus odio, finibus nec porta non, varius pulvinar eros. Aenean eget vulputate lorem, sed mollis ipsum. In mollis iaculis sem, quis sodales metus sodales quis. In nec efficitur libero, quis pharetra turpis. Nunc a felis vestibulum lacus feugiat euismod. Integer id diam a arcu dictum imperdiet nec at libero. Aliquam lorem dui, faucibus non posuere vel, venenatis vel augue. Aenean lorem ex, eleifend ut dictum a, semper nec risus. Nunc varius erat tortor, vitae sagittis sem vehicula non.
</p>
<p class="h6">
Aliquam erat volutpat. Pellentesque sagittis, nisi ac tempor lobortis, lacus neque posuere libero, vel maximus nibh dui non massa. Nulla at lectus vestibulum, tristique nisi at, vulputate ex. Vestibulum sit amet pharetra tortor. Sed felis nulla, finibus ut ipsum eget, pretium mollis quam. Proin urna metus, cursus non turpis vel, elementum blandit nulla. Nulla eu accumsan ipsum. Donec sodales tellus a turpis dapibus tincidunt. Praesent luctus vestibulum magna, ac feugiat metus ullamcorper eu. Mauris non elementum nunc, sed sagittis risus. Cras sed elit laoreet, faucibus ligula quis, tempus quam. Donec posuere eget eros eu pulvinar. Vestibulum justo augue, feugiat elementum erat sit amet, tempor porttitor urna. Integer malesuada mauris et ultricies sollicitudin.
</p>
<p class="h6">
Cras hendrerit quis velit vel molestie. Proin ut velit metus. Sed semper et neque non rhoncus. Cras semper dui eget eros tempus, sed malesuada nisi dignissim. Aliquam ante dolor, ultricies quis varius at, pellentesque nec urna. Mauris sit amet commodo nulla, ac malesuada lacus. Proin bibendum quis quam vel volutpat. Ut pulvinar tincidunt vehicula.
</p>
<p class="h6">
Phasellus sit amet vulputate neque, id mattis velit. Vivamus porttitor tellus ac est dictum lacinia. Aenean tincidunt tempus fringilla. Sed aliquam nibh ut turpis condimentum, eget malesuada nibh iaculis. Ut tincidunt at nisl vel tristique. Nam quam nunc, lacinia eget augue dictum, aliquet aliquam lectus. Aenean eleifend quam nec est tempus imperdiet.
</p>
<p class="h6">
In nec leo at tellus bibendum blandit sodales at neque. Sed vel dolor in tellus lobortis imperdiet venenatis in lectus. Ut ex ex, bibendum in fringilla et, vestibulum id mauris. Nam eu lorem nisi. Donec vitae fermentum est. Quisque sodales imperdiet felis, viverra consectetur enim egestas a. Duis leo orci, malesuada nec dolor ac, efficitur consequat dui. Aliquam lobortis commodo viverra.
</p>
<p class="h6">
Nunc vulputate ultricies metus in molestie. Mauris ultrices metus feugiat augue mollis ultrices. Quisque ac mattis enim, sed suscipit orci. Fusce eu enim tempor, bibendum ligula quis, faucibus ligula. Aenean nec iaculis tortor, eu suscipit sem. Proin in elit at lectus euismod lacinia. Quisque ac auctor felis, eget ultrices orci. Curabitur accumsan, massa dictum pellentesque feugiat, mauris velit tincidunt mi, ut porta nisl nibh id nisi. Nam non facilisis arcu. Aliquam eros est, elementum a leo sit amet, porttitor euismod ligula. Maecenas tellus massa, molestie ut ultrices at, finibus ac mauris.
</p>
<p class="h6">
Aliquam congue faucibus libero. Aenean sed suscipit ipsum. Aenean varius eleifend metus in pulvinar. Ut dapibus condimentum vehicula. Sed dictum arcu nulla, eget semper turpis fermentum at. Nam congue pretium rutrum. Mauris sit amet mauris sagittis, pulvinar nunc et, posuere diam.
</p>
<p class="h6">
Nunc tortor elit, interdum eget lacinia sed, tincidunt quis ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et nunc eu nibh pulvinar eleifend. Pellentesque porttitor feugiat placerat. In at felis est. Etiam scelerisque velit pharetra, blandit erat non, mattis ex. Aenean congue tortor nec diam maximus, eget auctor nisi accumsan. Sed at dignissim sem, eu placerat tellus. Curabitur lobortis dui nec lorem gravida pellentesque. Duis sagittis, tortor sit amet dapibus finibus, nisi lacus maximus tellus, nec convallis orci velit non libero. Cras sodales, sem in sodales tincidunt, nisi magna facilisis felis, imperdiet elementum erat turpis a dui. Duis non felis pretium, viverra dui eget, condimentum erat. Nunc lobortis convallis felis, ac scelerisque sem cursus a. Ut in gravida tortor. Cras porttitor sapien sem. Aenean cursus erat et libero scelerisque placerat.
</p>
<p class="h6">
Suspendisse potenti. Sed varius ipsum sem, imperdiet vehicula orci pharetra sit amet. Nulla facilisi. Integer faucibus sed tellus quis cursus. Donec lacinia varius ipsum, vitae bibendum justo pharetra vel. Nunc facilisis a dolor sit amet maximus. In nec leo iaculis, pharetra tortor ac, imperdiet arcu. Duis non rhoncus enim, vehicula tincidunt orci. Ut in augue at ante sagittis efficitur ac eget tortor. Nunc eget felis ac quam tempor volutpat. Phasellus id volutpat tortor. Sed cursus eros at interdum convallis. Morbi ullamcorper felis eget massa porttitor pulvinar sed vitae purus. Ut iaculis ante eget ipsum congue, ut efficitur diam condimentum. Etiam lobortis dolor est, sed fringilla diam placerat eget.
</p>
<p class="h6">
Vivamus consectetur, nisi in dapibus vehicula, ipsum eros congue nunc, a posuere nisl mauris vitae sem. Sed interdum placerat commodo. Quisque id molestie sapien. Vestibulum vitae tempus ligula. Morbi eu molestie risus. Vivamus ac sapien tincidunt, hendrerit nibh ut, sagittis lacus. Maecenas pellentesque elementum libero non pretium. Proin in sodales massa. Praesent eu blandit libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
</body>
</html>
Please remove min-vw-100 class from your div
<div class="d-flex flex-column min-vh-100 wrapper">
Related
I am taking a course in web development and I've gotten stuck, I know it has something to do with the containers and flexing but I cannot for the life of me figure it out, I've seen multiple examples and they are all similar to my HTML, CSS.
Here is my github with all, the necessary files (only index.html and styles.css have been edited so focus on those). Here is the github hosted page.
Edit : Snippet
body {
color: #515a69;
background-color: #b0b7c2;
font-size: 18px;
font-family: 'Roboto', sans-serif;
}
/* Header */
#header-nav {
background-color: #d3dceb;
border-radius: 0;
border: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding-top: 10px;
padding-bottom: 10px;
height: 70px;
}
#header-nav .container { /* Fixes margins to match professors examples */
margin-left: 0px;
margin-right: 0px;
}
#nav-list {
background-color: #515a69;
text-align: center;
}
.navbar {
z-index: 100;
}
#nav-list a{
background-color: #515a69;
text-align: center;
padding-top: 10px;
padding-right: 10px;
padding-left: 0px;
}
#collapsable-nav {
border: 0;
}
li{
background-color: #515a69;
border: 2px black;
padding-bottom: 10px;
padding-top: 10px;
}
.navbar-brand h1 { /* Restaurant name */
color: #515a69;
font-size: 1.5em;
font-weight: bold;
margin-top: -5px;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
.navbar-header button.navbar-toggle, .navbar-header .icon-bar {
border: 1px solid #61122f;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -45px;
}
/* Main Content */
#maincontent div{
background-color: #7e588d;
border: 2px solid black;
height: 1000px;
overflow: auto;
}
div .container {
width: 90%;
}
.row {
color: #d3dceb;
margin-left: 0;
margin-right: 0;
}
p {
padding-left: 10px;
padding-right: 10px;
overflow: auto;
}
#our-menu a, #our-menu a-hover{
text-style: none;
text-decoration: none;
color: black;
}
#sushi h3, #beef h3, #chicken h3{
font-weight: bold;
padding-bottom: 10px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!doctype html>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Food, LLC</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar static-top navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand pull-left">
<h1>Food, LLC</h1>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse-in navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-rights">
<li class="visible-xs">
<br>Chicken
</li>
<li class="visible-xs">
<br>Beef
</li>
<li class="visible-xs">
<br>Sushi
</li>
</ul><!-- #nav-list -->
</div><!-- .collapse .navbar-collapse -->
</div>
</div> <!-- Navbar Header -->
</div> <!-- Container -->
</nav>
</header>
<section id="our-menu">
<h1 class="text-center">Our Menu</h1>
</section>
<div class="row">
<div id="maincontent" class="container">
<div id="chicken-container" class="col-xs-12 col-sm-6 col-md-4">
<section id="chicken">
<h3 class="text-center">Chicken</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nunc vitae metus hendrerit convallis. Vestibulum nulla eros, molestie non feugiat ornare, rhoncus ac eros. Praesent maximus risus sed purus vestibulum porttitor. Nam risus ipsum, tristique et porta vitae, fermentum non elit. Vivamus sollicitudin sem sit amet turpis ornare, sed imperdiet magna pretium. Nullam eu ultricies orci, non aliquet nibh. Donec a auctor metus. Phasellus eu tellus tellus. Sed mi odio, pellentesque in velit in, tempor vestibulum massa. Sed nulla justo, interdum nec tincidunt nec, tincidunt non libero. Aliquam sapien arcu, blandit vel porta quis, porta vel ante. In sollicitudin tortor lobortis vestibulum blandit. Aenean velit neque, consequat eget mauris ac, consequat facilisis lectus. Sed pulvinar, orci sed commodo facilisis, erat diam facilisis magna, vitae luctus metus eros a magna. Fusce hendrerit vitae nisi facilisis viverra. Cras suscipit purus ut turpis tempor, non iaculis mauris imperdiet.
Nunc elementum lobortis lectus non dapibus. Sed augue nunc, semper vel ipsum nec, fermentum interdum metus. Proin et elementum nisi, nec fermentum velit. Aliquam congue efficitur diam id vestibulum. Aliquam ac tortor auctor, convallis ligula at, suscipit elit. Ut congue, turpis in elementum tincidunt, mauris odio imperdiet diam, vitae porta lectus lacus eu dolor. Vivamus tellus nunc, molestie quis iaculis nec, volutpat ut mi. Aenean mattis magna sit amet diam convallis, id consectetur risus placerat. Suspendisse et ex id dui porta vestibulum ac ut felis. Integer tristique, sapien a ultricies laoreet, nibh nisl sagittis augue, tincidunt faucibus libero dui vitae ante. Proin rutrum nulla sed ultricies fringilla. Fusce vel rutrum enim, suscipit porttitor nisl.
Sed pharetra egestas orci in rhoncus. Donec eros libero, euismod pretium varius sodales, pellentesque vel mi. Donec semper consectetur vulputate. In dapibus placerat est fermentum posuere. Donec mi felis, gravida in felis eu, sagittis consectetur nisi. Integer sollicitudin sagittis dui, eget ullamcorper erat euismod at. Proin tincidunt ullamcorper tortor, et vestibulum leo accumsan eget. Mauris porttitor, ante ut accumsan tincidunt, ex odio commodo arcu, sit amet lacinia ante risus ac mauris. Nunc blandit lorem cursus, euismod tellus eget, suscipit ligula.
Praesent imperdiet semper metus vel ultricies. Cras vel condimentum tellus. Vestibulum eget turpis nec nunc suscipit vestibulum ac vitae ligula. Curabitur bibendum varius rhoncus. Fusce mi ante, fringilla nec imperdiet non, feugiat bibendum dui. Donec eleifend, massa rhoncus luctus vehicula, felis ante dapibus dolor, nec imperdiet mi ipsum ut sem. Sed facilisis risus lectus, ut ultrices enim hendrerit id. Cras eget egestas erat. Duis feugiat at risus quis commodo. Fusce fermentum lacus at metus viverra, quis feugiat purus sagittis. Curabitur at sollicitudin felis. Duis venenatis leo ac felis bibendum porta.
Donec sodales varius dui eget pharetra. Vivamus ut ex porta, venenatis libero quis, pulvinar diam. Nunc quis dapibus velit, malesuada lacinia quam. Morbi in lacinia felis. Nullam euismod tellus diam, id condimentum nisi fringilla quis. In fringilla lectus quis laoreet fringilla. Praesent blandit, purus vel bibendum pellentesque, enim eros pellentesque quam, et ultrices eros erat ac mi.
</p>
<h1>Return to the Top</h1>
</div>
</section>
<div id="beef-container" class="col-xs-12 col-sm-6 col-md-4">
<section id="beef">
<h3 class="text-center">Beef</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nunc vitae metus hendrerit convallis. Vestibulum nulla eros, molestie non feugiat ornare, rhoncus ac eros. Praesent maximus risus sed purus vestibulum porttitor. Nam risus ipsum, tristique et porta vitae, fermentum non elit. Vivamus sollicitudin sem sit amet turpis ornare, sed imperdiet magna pretium. Nullam eu ultricies orci, non aliquet nibh. Donec a auctor metus. Phasellus eu tellus tellus. Sed mi odio, pellentesque in velit in, tempor vestibulum massa. Sed nulla justo, interdum nec tincidunt nec, tincidunt non libero. Aliquam sapien arcu, blandit vel porta quis, porta vel ante. In sollicitudin tortor lobortis vestibulum blandit. Aenean velit neque, consequat eget mauris ac, consequat facilisis lectus. Sed pulvinar, orci sed commodo facilisis, erat diam facilisis magna, vitae luctus metus eros a magna. Fusce hendrerit vitae nisi facilisis viverra. Cras suscipit purus ut turpis tempor, non iaculis mauris imperdiet.
Nunc elementum lobortis lectus non dapibus. Sed augue nunc, semper vel ipsum nec, fermentum interdum metus. Proin et elementum nisi, nec fermentum velit. Aliquam congue efficitur diam id vestibulum. Aliquam ac tortor auctor, convallis ligula at, suscipit elit. Ut congue, turpis in elementum tincidunt, mauris odio imperdiet diam, vitae porta lectus lacus eu dolor. Vivamus tellus nunc, molestie quis iaculis nec, volutpat ut mi. Aenean mattis magna sit amet diam convallis, id consectetur risus placerat. Suspendisse et ex id dui porta vestibulum ac ut felis. Integer tristique, sapien a ultricies laoreet, nibh nisl sagittis augue, tincidunt faucibus libero dui vitae ante. Proin rutrum nulla sed ultricies fringilla. Fusce vel rutrum enim, suscipit porttitor nisl.
Sed pharetra egestas orci in rhoncus. Donec eros libero, euismod pretium varius sodales, pellentesque vel mi. Donec semper consectetur vulputate. In dapibus placerat est fermentum posuere. Donec mi felis, gravida in felis eu, sagittis consectetur nisi. Integer sollicitudin sagittis dui, eget ullamcorper erat euismod at. Proin tincidunt ullamcorper tortor, et vestibulum leo accumsan eget. Mauris porttitor, ante ut accumsan tincidunt, ex odio commodo arcu, sit amet lacinia ante risus ac mauris. Nunc blandit lorem cursus, euismod tellus eget, suscipit ligula.
Praesent imperdiet semper metus vel ultricies. Cras vel condimentum tellus. Vestibulum eget turpis nec nunc suscipit vestibulum ac vitae ligula. Curabitur bibendum varius rhoncus. Fusce mi ante, fringilla nec imperdiet non, feugiat bibendum dui. Donec eleifend, massa rhoncus luctus vehicula, felis ante dapibus dolor, nec imperdiet mi ipsum ut sem. Sed facilisis risus lectus, ut ultrices enim hendrerit id. Cras eget egestas erat. Duis feugiat at risus quis commodo. Fusce fermentum lacus at metus viverra, quis feugiat purus sagittis. Curabitur at sollicitudin felis. Duis venenatis leo ac felis bibendum porta.
Donec sodales varius dui eget pharetra. Vivamus ut ex porta, venenatis libero quis, pulvinar diam. Nunc quis dapibus velit, malesuada lacinia quam. Morbi in lacinia felis. Nullam euismod tellus diam, id condimentum nisi fringilla quis. In fringilla lectus quis laoreet fringilla. Praesent blandit, purus vel bibendum pellentesque, enim eros pellentesque quam, et ultrices eros erat ac mi.
</p>
<h1>Return to the Top</h1>
</div>
</section>
<div id="sushi-container" class="col-xs-12 col-sm-12 col-md-4">
<section id="sushi">
<h2 class="text-center">Sushi</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nunc vitae metus hendrerit convallis. Vestibulum nulla eros, molestie non feugiat ornare, rhoncus ac eros. Praesent maximus risus sed purus vestibulum porttitor. Nam risus ipsum, tristique et porta vitae, fermentum non elit. Vivamus sollicitudin sem sit amet turpis ornare, sed imperdiet magna pretium. Nullam eu ultricies orci, non aliquet nibh. Donec a auctor metus. Phasellus eu tellus tellus. Sed mi odio, pellentesque in velit in, tempor vestibulum massa. Sed nulla justo, interdum nec tincidunt nec, tincidunt non libero. Aliquam sapien arcu, blandit vel porta quis, porta vel ante. In sollicitudin tortor lobortis vestibulum blandit. Aenean velit neque, consequat eget mauris ac, consequat facilisis lectus. Sed pulvinar, orci sed commodo facilisis, erat diam facilisis magna, vitae luctus metus eros a magna. Fusce hendrerit vitae nisi facilisis viverra. Cras suscipit purus ut turpis tempor, non iaculis mauris imperdiet.
Nunc elementum lobortis lectus non dapibus. Sed augue nunc, semper vel ipsum nec, fermentum interdum metus. Proin et elementum nisi, nec fermentum velit. Aliquam congue efficitur diam id vestibulum. Aliquam ac tortor auctor, convallis ligula at, suscipit elit. Ut congue, turpis in elementum tincidunt, mauris odio imperdiet diam, vitae porta lectus lacus eu dolor. Vivamus tellus nunc, molestie quis iaculis nec, volutpat ut mi. Aenean mattis magna sit amet diam convallis, id consectetur risus placerat. Suspendisse et ex id dui porta vestibulum ac ut felis. Integer tristique, sapien a ultricies laoreet, nibh nisl sagittis augue, tincidunt faucibus libero dui vitae ante. Proin rutrum nulla sed ultricies fringilla. Fusce vel rutrum enim, suscipit porttitor nisl.
Sed pharetra egestas orci in rhoncus. Donec eros libero, euismod pretium varius sodales, pellentesque vel mi. Donec semper consectetur vulputate. In dapibus placerat est fermentum posuere. Donec mi felis, gravida in felis eu, sagittis consectetur nisi. Integer sollicitudin sagittis dui, eget ullamcorper erat euismod at. Proin tincidunt ullamcorper tortor, et vestibulum leo accumsan eget. Mauris porttitor, ante ut accumsan tincidunt, ex odio commodo arcu, sit amet lacinia ante risus ac mauris. Nunc blandit lorem cursus, euismod tellus eget, suscipit ligula.
Praesent imperdiet semper metus vel ultricies. Cras vel condimentum tellus. Vestibulum eget turpis nec nunc suscipit vestibulum ac vitae ligula. Curabitur bibendum varius rhoncus. Fusce mi ante, fringilla nec imperdiet non, feugiat bibendum dui. Donec eleifend, massa rhoncus luctus vehicula, felis ante dapibus dolor, nec imperdiet mi ipsum ut sem. Sed facilisis risus lectus, ut ultrices enim hendrerit id. Cras eget egestas erat. Duis feugiat at risus quis commodo. Fusce fermentum lacus at metus viverra, quis feugiat purus sagittis. Curabitur at sollicitudin felis. Duis venenatis leo ac felis bibendum porta.
Donec sodales varius dui eget pharetra. Vivamus ut ex porta, venenatis libero quis, pulvinar diam. Nunc quis dapibus velit, malesuada lacinia quam. Morbi in lacinia felis. Nullam euismod tellus diam, id condimentum nisi fringilla quis. In fringilla lectus quis laoreet fringilla. Praesent blandit, purus vel bibendum pellentesque, enim eros pellentesque quam, et ultrices eros erat ac mi.
</p>
<h1>Return to the Top</h1>
</div>
</section>
</div><!-- Row -->
</div><!-- Main Content -->
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
The main content should be pushed down when the navbar is expanded, I also had to setup a z-index for the collapsible menu so it wouldn't be overlapped by the main-content (which is probably doing something funky to it too) so I know there is something wrong in my navbar / header, the body is working perfectly as intended.
I am using an older version of bootstrap because that is what the professor who is teaching my course is using, if you believe a newer version of bootstrap will work I can for sure change everything up, I've just spent the last 10 hours doing this, setting up the page took me 50 minutes so I'm kind of at the end of my rope, if this doesn't work I'm just going to restart from scratch.
Thank you in advance for your time!
I fixed my problem by removing the height: 70px; inside of my #header-nav ID styling, everything works perfectly now :)
This question already has answers here:
Bootstrap 4 how to have margin between columns without going over space
(2 answers)
Closed 3 years ago.
I have been building a webpage for a class and we are using Bootstrap 4.
Thing is, every time I add a margin to one of my elements with the .col-*-4 class it pushes down my third element and I have no idea how to fix this.
I have tried using flexbox, but that just completely messes up the layout of my section. I have tried using absolute positioning but it is just a complete hassle and I have no idea how to fix this. I don't know if I have the wrong keywords because I can't find anyone who has had this exact problem.
I have already tried to use the flexbox portion of bootstrap, but it completely screws up the layout that I intend to have, and I have tried using absolute positioning but it's a hassle to deal with and I know that there is a simpler way. I just can't figure it out.
/*Main Content*/
#menuTitle {
padding: 25px;
font-size: 2.5em;
font-weight: bold;
color: #000;
}
#chickenHeading,
#beefHeading,
#sushiHeading {
padding: 10px;
width: 200px;
}
#chicken,
#beef,
#sushi {
border-radius: 6px;
position: relative;
overflow: hidden;
}
#chickenBacktoTop,
#beefBacktoTop,
#sushiBacktoTop {
position: absolute;
bottom: 0;
right: 0;
border-radius: 6px;
}
h1 {
font-weight: 800;
}
p {
color: #A9A9;
}
/*Extra Large, Large, and Medium Devices*/
#media (min-width: 768px) {
#chicken,
#beef,
#sushi {
margin: 15px;
}
}
/*Extra Small and Small Devices*/
#media (max-width: 767px) {
#chicken,
#beef,
#sushi {
margin: 10px auto;
height: 650px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--Main Content-->
<div class='container-fluid mx-auto'>
<div id='menuTitle' class='text-center'>Our Menu</div>
<div class='row d-flex mx-auto'>
<!--Chicken Section-->
<section id='chicken' class='bg-dark col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<h3 id='chickenHeading' class='d-flex mx-auto justify-content-center'>Chicken</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit vestibulum.
Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper nisi. Etiam
iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit condimentum.
Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum neque arcu,
nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis nulla nunc quis
dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl, sagittis ut est
quis, viverra venenatis tortor.
</p>
<a id='chickenBacktoTop' class='btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</section>
<!--Beef Section-->
<section id='beef' class='bg-dark col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<h3 id='beefHeading' class='d-flex mx-auto justify-content-center'>Beef</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit vestibulum.
Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper nisi. Etiam
iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit condimentum.
Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum neque arcu,
nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis nulla nunc quis
dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl, sagittis ut est
quis, viverra venenatis tortor.
</p>
<a id='beefBacktoTop' class='btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</section>
<!--Sushi Section-->
<section id='sushi' class='bg-dark col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<h3 id='sushiHeading' class='d-flex mx-auto justify-content-center'>Sushi</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit vestibulum.
Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper nisi. Etiam
iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit condimentum.
Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum neque arcu,
nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis nulla nunc quis
dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl, sagittis ut est
quis, viverra venenatis tortor.
</p>
<a id='sushiBacktoTop' class='btn btn-primary d-block' href='#header-nav'>Back to Top</a>
</section>
</div>
</div>
Margins increase column width, which causes them not to fit on the same line and to wrap.
However, Bootstrap columns have gutters (padding) by default.
Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
Bootstrap 4.0 Layout Grid - How It Works
I recommend wrapping the contents of each column in a containing <div> and styling that element as desired (e.g. padding, background color, etc).
For example:
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div id='chicken' class='bg-dark'>
...
</div>
</section>
Here's a demonstration:
/*Main Content*/
#menuTitle {
padding: 25px;
font-size: 2.5em;
font-weight: bold;
color: #000;
}
.secContents {
position: relative;
border-radius: 6px;
padding: 0 15px;
}
.secHeading {
padding: 10px;
}
.secBackTop {
position: absolute;
bottom: 0;
right: 0;
border-radius: 6px;
}
h1 {
font-weight: 800;
}
p {
color: #A9A9;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!--Main Content-->
<div class='container-fluid mx-auto'>
<div id='menuTitle' class='text-center'>Our Menu</div>
<div class='row d-flex mx-auto'>
<!--Chicken Section-->
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div class='secContents bg-dark'>
<h3 class='secHeading d-flex mx-auto justify-content-center'>Chicken</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit
vestibulum. Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper
nisi. Etiam iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit
condimentum. Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum
neque arcu, nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis
nulla nunc quis dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl,
sagittis ut est quis, viverra venenatis tortor.
</p>
<a class='secBackTop btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</div>
</section>
<!--Beef Section-->
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div class='secContents bg-dark'>
<h3 class='secHeading d-flex mx-auto justify-content-center'>Beef</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit
vestibulum. Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper
nisi. Etiam iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit
condimentum. Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum
neque arcu, nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis
nulla nunc quis dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl,
sagittis ut est quis, viverra venenatis tortor.
</p>
<a class='secBackTop btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</div>
</section>
<!--Sushi Section-->
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div class='secContents bg-dark'>
<h3 class='secHeading d-flex mx-auto justify-content-center'>Sushi</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit
vestibulum. Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper
nisi. Etiam iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit
condimentum. Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum
neque arcu, nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis
nulla nunc quis dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl,
sagittis ut est quis, viverra venenatis tortor.
</p>
<a class='secBackTop btn btn-primary d-block' href='#header-nav'>Back to Top</a>
</div>
</section>
</div>
</div>
I'm new to web development and in this example I'm working on: http://codepen.io/wabibito/pen/RawGPo
<head>
<title>Tiago Dias Ferreira</title>
<style>
ul {
list-style-type: none;
margin: auto auto;
overflow: hidden;
background-color: #333;
position: static;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top topnav">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<a name="home"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
<a name="about"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
<a name="portfolio"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
<a name="contact"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
</body>
The navigation bar keeps hiding content under it. Initially i fixed it by putting a margin to the first title. But when I click on links on the same page, they get hidden under the navigation bar.
How can I fix it?
I also accept others suggestions, tips and hints to improve. :D
Cheers,
Tiago
The fixed nav bar is the problem. When you set something as fixed, it removes it from the DOM and subsequently all other content will be rendered as if it's not there. Meaning it will display content at the top of the page and then put hte navbar on top. You need to add padding to the body to bring it down. For example, if the nav bar height is 50px, add body {padding-top:50px} to your css.
Also - just looking at your code, if you are using the nav to target sections on the page via the href, you will need to add that as an id to the a link in the page - currently you have only listed a name for each link in the body. And they should be semantically listed as "section" as well (enclosing the heading and <p> elements of that section)- currently you have numerous h1 elements, but you should only have one per page with other headings being h2, h3 etc (it is fine to have a h1 for each section if using the section nomenclature because it infers that each section is semantically different from the others and therefore can have a new h1). hope this helps gavgrif
The following simple page with a position fixed header bar, works fine in most browsers etc. But on iOS in google chrome if you scroll up and down the page eratically eventually the header bar moves down the page a bit, like the following screen shot.
Any ideas how to fix?
Test page: http://tinyurl.com/h9pdrn3
Thanks :)
<!DOCTYPE html>
<html>
<head>
<title>position test</title>
<meta charset="utf-8" />
</head>
<body>
<div style="position: fixed; background-color: aqua; width: 100%; top: 0; left: 0; line-height: 60px; height: 60px;">
Fixed header
</div>
<div style="padding-top: 60px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta aliquet dictum. Aliquam massa libero, consectetur et purus sed, luctus porttitor ligula. Phasellus tempus risus at elit sagittis, sed tincidunt erat rutrum. Donec non dictum turpis. Vestibulum sapien tellus, tincidunt sed ex a, pretium facilisis est. Suspendisse potenti. Fusce laoreet turpis turpis, a rhoncus diam fringilla ac. Proin turpis arcu, hendrerit viverra neque quis, placerat tempor ligula. Duis ut scelerisque ante. Etiam posuere est ut molestie fermentum. Sed feugiat tortor at libero ultrices, vitae consectetur nibh luctus.
</p>
<p>
Sed nulla enim, tincidunt non laoreet quis, congue aliquam nisl. Sed dapibus in erat cursus rutrum. Nullam efficitur sem ipsum, vitae sagittis est tristique vitae. Ut dignissim est eget nisi condimentum posuere. Duis nec neque tempor, finibus sem sed, varius risus. Nullam convallis imperdiet sem vel sagittis. Nulla ultricies sagittis vestibulum. In semper ante ipsum, ac dignissim diam bibendum et. Nam in sapien sem.
</p>
<p>
Phasellus neque nibh, pharetra ac dui et, iaculis lacinia ipsum. Phasellus laoreet eros ut lectus viverra dictum. Mauris vitae neque maximus, hendrerit enim gravida, ornare magna. Sed rhoncus vitae nunc sed iaculis. Donec vitae enim ut enim fermentum scelerisque. Nulla ut vestibulum leo. In ut urna in neque tempor maximus non et massa. In eu tincidunt quam. Donec eu lectus vehicula, consequat enim et, porttitor libero. Phasellus magna tellus, rhoncus non quam vitae, congue sagittis nunc. Mauris bibendum ultrices arcu a lobortis. Aliquam erat volutpat. Ut quis mi sit amet nulla tincidunt tincidunt.
</p>
<p>
Nam at interdum nulla, eget ultricies libero. Suspendisse est elit, malesuada sit amet hendrerit nec, posuere et purus. Vivamus sed eros ut nisi cursus hendrerit. Curabitur vel lacus maximus, tempus nulla sed, volutpat risus. Etiam in blandit quam. Nullam lacinia neque eu ligula lobortis facilisis. Quisque ipsum erat, iaculis vitae nunc vitae, egestas feugiat enim.
</p>
<p>
Fusce consectetur leo in est sodales, ut congue est commodo. Donec cursus odio sapien, id malesuada sem dictum eget. Sed sit amet sodales nisl, sed venenatis tortor. Nulla facilisi. Maecenas maximus tortor sed nisi mattis luctus. Proin id diam sagittis ante pulvinar dictum. Donec volutpat nec nibh eget dictum. Donec tellus turpis, hendrerit et risus sed, viverra porttitor leo. Pellentesque non vulputate arcu, eget finibus tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta aliquet dictum. Aliquam massa libero, consectetur et purus sed, luctus porttitor ligula. Phasellus tempus risus at elit sagittis, sed tincidunt erat rutrum. Donec non dictum turpis. Vestibulum sapien tellus, tincidunt sed ex a, pretium facilisis est. Suspendisse potenti. Fusce laoreet turpis turpis, a rhoncus diam fringilla ac. Proin turpis arcu, hendrerit viverra neque quis, placerat tempor ligula. Duis ut scelerisque ante. Etiam posuere est ut molestie fermentum. Sed feugiat tortor at libero ultrices, vitae consectetur nibh luctus.
</p>
<p>
Sed nulla enim, tincidunt non laoreet quis, congue aliquam nisl. Sed dapibus in erat cursus rutrum. Nullam efficitur sem ipsum, vitae sagittis est tristique vitae. Ut dignissim est eget nisi condimentum posuere. Duis nec neque tempor, finibus sem sed, varius risus. Nullam convallis imperdiet sem vel sagittis. Nulla ultricies sagittis vestibulum. In semper ante ipsum, ac dignissim diam bibendum et. Nam in sapien sem.
</p>
<p>
Phasellus neque nibh, pharetra ac dui et, iaculis lacinia ipsum. Phasellus laoreet eros ut lectus viverra dictum. Mauris vitae neque maximus, hendrerit enim gravida, ornare magna. Sed rhoncus vitae nunc sed iaculis. Donec vitae enim ut enim fermentum scelerisque. Nulla ut vestibulum leo. In ut urna in neque tempor maximus non et massa. In eu tincidunt quam. Donec eu lectus vehicula, consequat enim et, porttitor libero. Phasellus magna tellus, rhoncus non quam vitae, congue sagittis nunc. Mauris bibendum ultrices arcu a lobortis. Aliquam erat volutpat. Ut quis mi sit amet nulla tincidunt tincidunt.
</p>
<p>
Nam at interdum nulla, eget ultricies libero. Suspendisse est elit, malesuada sit amet hendrerit nec, posuere et purus. Vivamus sed eros ut nisi cursus hendrerit. Curabitur vel lacus maximus, tempus nulla sed, volutpat risus. Etiam in blandit quam. Nullam lacinia neque eu ligula lobortis facilisis. Quisque ipsum erat, iaculis vitae nunc vitae, egestas feugiat enim.
</p>
<p>
Fusce consectetur leo in est sodales, ut congue est commodo. Donec cursus odio sapien, id malesuada sem dictum eget. Sed sit amet sodales nisl, sed venenatis tortor. Nulla facilisi. Maecenas maximus tortor sed nisi mattis luctus. Proin id diam sagittis ante pulvinar dictum. Donec volutpat nec nibh eget dictum. Donec tellus turpis, hendrerit et risus sed, viverra porttitor leo. Pellentesque non vulputate arcu, eget finibus tortor.
</p>
</div>
</body>
</html>
Did you try using !important?
<div style="position:fixed !important; top:0px !important; left:0px !important;">
I have a h2 tag within a P and a div tag and somehow it is making the styles of my paragraphs not work correctly. In below example, the first paragraph, without the h2 tag behaves as expected. But as soon as I put an h2 tag in the rest of the paragraphs, it breaks my styles.
.column-4-layout .left-column P h2 {
display: inline-block;
padding: 0;
margin: 0;
color: yellow;
}
.column-4-layout .left-column P {
width: 470px;
margin-top: 50px;
color: red;
}
.column-4-layout .left-column P img {
width: 227px;
padding-right: 15px;
padding-bottom: 5px;
float: left;
}
.column-4-layout .right-column P {
width: 470px;
margin-top: 50px;
}
.column-4-layout .right-column P img {
width: 227px;
padding-right: 15px;
padding-bottom: 5px;
float: left;
}
<div class="column-4-layout">
<div class="left-column">
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id erat ultrices metus ornare elementum vel vitae odio. Vivamus feugiat eros sit amet aliquet efficitur. Vestibulum massa ligula, ullamcorper vitae malesuada et, viverra nec metus. Integer
at felis non odio interdum finibus sed ac purus. Vestibulum gravida lorem a augue faucibus, eget auctor lorem porta. Fusce vitae nibh laoreet, ultrices orci cursus, suscipit diam. Praesent vestibulum tellus ornare, gravida diam vel, sodales elit.
Sed lacus augue, pulvinar vel ornare vel, molestie nec diam. Sed vestibulum sed odio in vulputate. Suspendisse ut lacus sit amet dui porttitor convallis. Vestibulum mattis laoreet nulla luctus facilisis. Nunc efficitur ligula sagittis lectus commodo
molestie. Maecenas fringilla ipsum at est venenatis suscipit. Suspendisse quis pellentesque ligula. Sed quis ante nulla.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam euismod bibendum eleifend. Aliquam pulvinar rhoncus elit et ullamcorper. Proin vel nisl ligula. Quisque pellentesque, ipsum sollicitudin finibus faucibus, massa orci luctus purus, sed interdum odio leo ut dui. Phasellus a mi non tellus faucibus
mattis. Morbi iaculis ac lorem lobortis elementum. Nunc sagittis libero et orci consequat iaculis. Duis magna arcu, consequat vel mollis non, elementum nec lacus. Etiam commodo in arcu sit amet ultrices. Sed massa magna, luctus in lacinia vel, congue
a elit. Integer lacinia ornare ligula, ut ultricies metus elementum ut. Quisque placerat arcu id metus congue egestas. Curabitur mollis sem vel tortor convallis consectetur.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Curabitur rhoncus tellus a pulvinar consequat. In sagittis gravida erat, id finibus est molestie non. Mauris dignissim pretium elementum. Sed a arcu vel lectus facilisis viverra. Vestibulum faucibus risus nec lorem scelerisque eleifend. Donec et
consectetur tellus. Vestibulum in dictum ligula, ut commodo quam. In in justo a nisl pretium faucibus non sit amet lacus. Morbi pharetra vestibulum tristique. Sed sem lorem, egestas a pharetra quis, aliquam quis sem. Integer fermentum est nisl,
eu finibus tellus gravida nec. Etiam egestas tincidunt justo, et auctor tellus interdum sed. Sed in orci id metus sollicitudin accumsan at ut neque. Ut lacinia ultrices justo, ac dictum sapien luctus non. Etiam blandit congue accumsan.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam nulla ante, eleifend at lectus id, ultrices vehicula lorem. Pellentesque vel tempor massa. Praesent pulvinar sem ultricies nibh tincidunt tincidunt. Vestibulum sapien mauris, porta in semper sit amet, fermentum vel elit. Nullam sapien magna,
faucibus eu elit eu, congue suscipit est. Sed vitae gravida turpis, pretium finibus ex. Suspendisse lacinia condimentum erat, id condimentum erat molestie et. In rutrum luctus condimentum. Sed lacinia congue neque eget suscipit. Integer sed massa
luctus, efficitur ante et, sagittis est. Cras efficitur neque sed libero euismod cursus. Phasellus ac tincidunt metus. Fusce et turpis nisl. Ut in mattis ipsum. Donec ornare pharetra neque.</P>
</div>
<div class="right-column">
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id erat ultrices metus ornare elementum vel vitae odio. Vivamus feugiat eros sit amet aliquet efficitur. Vestibulum massa ligula, ullamcorper vitae malesuada et, viverra nec metus. Integer
at felis non odio interdum finibus sed ac purus. Vestibulum gravida lorem a augue faucibus, eget auctor lorem porta. Fusce vitae nibh laoreet, ultrices orci cursus, suscipit diam. Praesent vestibulum tellus ornare, gravida diam vel, sodales elit.
Sed lacus augue, pulvinar vel ornare vel, molestie nec diam. Sed vestibulum sed odio in vulputate. Suspendisse ut lacus sit amet dui porttitor convallis. Vestibulum mattis laoreet nulla luctus facilisis. Nunc efficitur ligula sagittis lectus commodo
molestie. Maecenas fringilla ipsum at est venenatis suscipit. Suspendisse quis pellentesque ligula. Sed quis ante nulla.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam euismod bibendum eleifend. Aliquam pulvinar rhoncus elit et ullamcorper. Proin vel nisl ligula. Quisque pellentesque, ipsum sollicitudin finibus faucibus, massa orci luctus purus, sed interdum odio leo ut dui. Phasellus a mi non tellus faucibus
mattis. Morbi iaculis ac lorem lobortis elementum. Nunc sagittis libero et orci consequat iaculis. Duis magna arcu, consequat vel mollis non, elementum nec lacus. Etiam commodo in arcu sit amet ultrices. Sed massa magna, luctus in lacinia vel, congue
a elit. Integer lacinia ornare ligula, ut ultricies metus elementum ut. Quisque placerat arcu id metus congue egestas. Curabitur mollis sem vel tortor convallis consectetur.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Curabitur rhoncus tellus a pulvinar consequat. In sagittis gravida erat, id finibus est molestie non. Mauris dignissim pretium elementum. Sed a arcu vel lectus facilisis viverra. Vestibulum faucibus risus nec lorem scelerisque eleifend. Donec et
consectetur tellus. Vestibulum in dictum ligula, ut commodo quam. In in justo a nisl pretium faucibus non sit amet lacus. Morbi pharetra vestibulum tristique. Sed sem lorem, egestas a pharetra quis, aliquam quis sem. Integer fermentum est nisl,
eu finibus tellus gravida nec. Etiam egestas tincidunt justo, et auctor tellus interdum sed. Sed in orci id metus sollicitudin accumsan at ut neque. Ut lacinia ultrices justo, ac dictum sapien luctus non. Etiam blandit congue accumsan.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam nulla ante, eleifend at lectus id, ultrices vehicula lorem. Pellentesque vel tempor massa. Praesent pulvinar sem ultricies nibh tincidunt tincidunt. Vestibulum sapien mauris, porta in semper sit amet, fermentum vel elit. Nullam sapien magna,
faucibus eu elit eu, congue suscipit est. Sed vitae gravida turpis, pretium finibus ex. Suspendisse lacinia condimentum erat, id condimentum erat molestie et. In rutrum luctus condimentum. Sed lacinia congue neque eget suscipit. Integer sed massa
luctus, efficitur ante et, sagittis est. Cras efficitur neque sed libero euismod cursus. Phasellus ac tincidunt metus. Fusce et turpis nisl. Ut in mattis ipsum. Donec ornare pharetra neque.</P>
</div>
p elements can contain phrasing content only.
If you look at the console log for this Snippet, you'll see "This is a" only:
console.log(document.querySelector('p').innerHTML);
<p>This is a <h2>test</h2>.</p>
If you read this article https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p you see that an h2 tag isn't allowed inside a p tag.
In fact if you inspect the HTML with a browser you can see that the p tag is closed just before the h2 element.
Try changing the paragraphs with DIVs
You're misusing the header tags. Actually, according to the W3C, the P element can only contain other elements as listed here: Phrasing Elements.
This is something that search engines (especially Google) frown upon. It wouldn't be the most blatant black hat technique, but the feeling is that nothing should be subversive on your page, e.g. a header should be a header, not part of your paragraph.