I am trying to make add a sticky footer on the default Carousel Bootstrap 5 example.
The issue is when the content of a page is limited, the footer becomes way to big.
Also, when the windows is resized the footer also changes accordignly.
I've tried several solutions prosposed here but nothing really worked.
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 32rem;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* rtl:end:ignore */
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0;
/* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
/* rtl:remove */
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
/* Login form Styling
-------------------------------------------------- */
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer {
position: relative;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 1rem;
background-color: #f8f9fa;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
color: black;
text-align: center;
font-size: large;
display: flex;
flex-direction: column;
justify-content: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>About Us</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<!-- Carousel CSS -->
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li class="nav-item">HOME</li>
<li class="nav-item">CAR LISTING</li>
<li class="nav-item">ABOUT US</li>
<li class="nav-item">CONTCAT US</li>
</ul>
<div class="text-end">
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'login.php'; " class="btn btn-outline-light me-2">Login</button>
<?php } ?>
<?php if(isLoggedIn($_SESSION['UserID'])) {
$FullName = getUserFullName($_SESSION['UserID']);?>
<button type="button" class="btn btn-outline-light me-2 dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo htmlentities($FullName); ?> </button>
<?php } ?>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="myaccount.php">My Account</a></li>
<li><a class="dropdown-item" href="mybookings.php">My Bookings</a></li>
<?php if(isAdmin($_SESSION['UserID'])){ ?>
<li><a class="dropdown-item" href="admin/index.php">Admin Panel</a></li>
<?php } ?>
</ul>
<?php if(isLoggedIn($_SESSION['UserID'])) {?>
<button type="button" onclick="location.href = 'index.php?logout=true';" class="btn btn-warning">Logout</button>
<?php } ?>
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'register.php';" class="btn btn-warning">Sign-up</button>
<?php } ?>
</div>
</div>
</div>
</header>
</head>
<body>
<main>
<section class="py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="row gx-4 gx-lg-5 align-items-center">
<div class="col-md-6">
<h4 class="text-center w-responsive mx-auto"> About Us</h4>
<br>
<!--Section description-->
<p class="w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet mi pretium, ullamcorper nisi eu, mattis sem. Ut id enim varius, tempor sapien eu, mattis tellus. Etiam facilisis ex id ex commodo, vitae pharetra enim aliquam. Maecenas
dictum urna vel nisi porttitor, eget sollicitudin sem auctor. Curabitur suscipit feugiat dolor eget bibendum. Maecenas ac iaculis quam. Phasellus eget efficitur neque, et malesuada nunc. Aenean sed rhoncus sem. Mauris eget elit risus. Nam
tristique sollicitudin felis, ac ultrices tortor. Suspendisse eget neque eget purus consequat scelerisque. Vivamus mattis nulla vel vulputate ultrices. Aliquam interdum gravida leo. Pellentesque auctor justo augue, vel tempor nisl venenatis
vitae. Maecenas tincidunt urna in efficitur ullamcorper. Sed lacinia nisi nisl.</p>
</div>
<div class="col-md-6">
<img src="media/logo.png" style="width: 400px; height: 250px;" class="img-fluid float-right" alt="Logo">
</div>
</div>
</div>
</section>
</main>
<hr/>
<!-- FOOTER -->
<footer class="footer">
Copyright © Rent-R-Us <script>document.write(new Date().getFullYear())</script>
</footer>
</body>
</html>
Finally I found the solution from this thread The trick was at the body and then the position tag on the .footer is not required anymore.
main {
flex: 1;
}
body {
color: #5a5a5a;
display: flex;
min-height: 100vh;
flex-direction: column;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 32rem;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* rtl:end:ignore */
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0;
/* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
/* rtl:remove */
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
/* Login form Styling
-------------------------------------------------- */
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 1rem;
background-color: #f8f9fa;
width: 100%;
height: 60px;
color: black;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>About Us</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<!-- Carousel CSS -->
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li class="nav-item">HOME</li>
<li class="nav-item">CAR LISTING</li>
<li class="nav-item">ABOUT US</li>
<li class="nav-item">CONTCAT US</li>
</ul>
<div class="text-end">
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'login.php'; " class="btn btn-outline-light me-2">Login</button>
<?php } ?>
<?php if(isLoggedIn($_SESSION['UserID'])) {
$FullName = getUserFullName($_SESSION['UserID']);?>
<button type="button" class="btn btn-outline-light me-2 dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo htmlentities($FullName); ?> </button>
<?php } ?>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="myaccount.php">My Account</a></li>
<li><a class="dropdown-item" href="mybookings.php">My Bookings</a></li>
<?php if(isAdmin($_SESSION['UserID'])){ ?>
<li><a class="dropdown-item" href="admin/index.php">Admin Panel</a></li>
<?php } ?>
</ul>
<?php if(isLoggedIn($_SESSION['UserID'])) {?>
<button type="button" onclick="location.href = 'index.php?logout=true';" class="btn btn-warning">Logout</button>
<?php } ?>
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'register.php';" class="btn btn-warning">Sign-up</button>
<?php } ?>
</div>
</div>
</div>
</header>
</head>
<body>
<main>
<section class="py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="row gx-4 gx-lg-5 align-items-center">
<div class="col-md-6">
<h4 class="text-center w-responsive mx-auto"> About Us</h4>
<br>
<!--Section description-->
<p class="w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet mi pretium, ullamcorper nisi eu, mattis sem. Ut id enim varius, tempor sapien eu, mattis tellus. Etiam facilisis ex id ex commodo, vitae pharetra enim aliquam. Maecenas
dictum urna vel nisi porttitor, eget sollicitudin sem auctor. Curabitur suscipit feugiat dolor eget bibendum. Maecenas ac iaculis quam. Phasellus eget efficitur neque, et malesuada nunc. Aenean sed rhoncus sem. Mauris eget elit risus. Nam
tristique sollicitudin felis, ac ultrices tortor. Suspendisse eget neque eget purus consequat scelerisque. Vivamus mattis nulla vel vulputate ultrices. Aliquam interdum gravida leo. Pellentesque auctor justo augue, vel tempor nisl venenatis
vitae. Maecenas tincidunt urna in efficitur ullamcorper. Sed lacinia nisi nisl.</p>
</div>
<div class="col-md-6">
<img src="media/logo.png" style="width: 400px; height: 250px;" class="img-fluid float-right" alt="Logo">
</div>
</div>
</div>
</section>
</main>
<hr/>
<!-- FOOTER -->
<footer class="footer">
Copyright © Rent-R-Us <script>document.write(new Date().getFullYear())</script>
</footer>
</body>
</html>
Related
I have been working on a bootstrap website and when swapped to mobile view my footer Images stack vertically out of the div. The code and example image are attached.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="JavaScript/index.js" defer></script>
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-expand-md bg-dark navbar-dark navbar-fixed-top transparent sticky-top" id="navbar">
<a class="navbar-brand" href="index.html">
<img src="images/DallE_Extendo-removebg.png" width="80" height="60" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact us</a>
</li>
</ul>
</div>
</nav>
<!--NavBar Ends-->
<!--Content Begins-->
<div class="container-fluid">
<div class="row">
<div class="col-md-12" style="padding-left:0; padding-right:0;">
<img src="images/Charlie-Co.-Barbershop-West-Chester-3.png" class="img" width="100">
Book now through booksy!</div>
</div>
<div class="row">
<div class="col-md-9 border-right border-bottom border-dark" style="padding-left: 0; padding-right: 0;">
<h1 style="text-align: center; text-decoration: underline;">#</h1>
<h1>Opening hours</h1>
<p>Hours could change depending on Holidays & Bank Holidays</p>
<table>
<tr class="monday fvl-d">
<td><span>Monday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr class="tuesday fvl-d">
<td><span>Tuesday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr class="wednesday fvl-d">
<td><span>Wednesday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr class="thursday fvl-d">
<td><span>Thursday</span></td>
<td>9:30 - 19:00</td>
</tr>
<tr class="friday fvl-d">
<td><span>Friday</span></td>
<td>9:30 - 19:00</td>
</tr>
<tr class="saturday fvl-d">
<td><span>Saturday</span></td>
<td>9:00 - 18:00</td>
</tr>
<tr class="sunday fvl-d">
<td><span>Sunday</span></td>
<td>11:00 - 15:30</td>
</tr>
</table>
</div>
<div class="col-md-3 border-left border-bottom border-dark" style="padding-left: 0; padding-right: 0;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non ultricies velit, eget suscipit velit. Nam laoreet magna ornare ex ornare ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel tincidunt velit. Nam sed est metus. Maecenas commodo dolor non lorem semper malesuada. Aliquam tempor blandit sapien in sodales. Integer eu metus efficitur ligula mattis pretium. Donec finibus mi non sodales condimentum. Donec elementum nunc quis mauris pulvinar porta. Sed sed est eget justo vestibulum malesuada vitae at nulla. Suspendisse quis efficitur lorem. Phasellus non ornare ante. Mauris ullamcorper, ligula in malesuada malesuada, purus nibh pretium dui, ac eleifend purus mauris vel nisi. Sed lacinia hendrerit magna at pharetra. Suspendisse quis varius diam, et ultricies dui. In scelerisque felis ac sapien bibendum, eget iaculis nisl egestas. Proin tempor et magna eu molestie. Praesent consequat lorem ut accumsan vehicula. Nunc luctus turpis non sollicitudin fermentum. Fusce nec viverra ex, sit amet tristique turpis.</p>
</div>
</div>
<div class="row">
<div class="col-md-12" id="footer">
<div class="col-md-1" style="font-size: 10px;">
<p>#</p>
</div>
<div class="col-md-3" style="padding-left: 10%; text-align: center;">
<p>#</p>
</div>
<div class="col-md-5" id="sm" style="padding-left: 10%; padding-bottom: 1%;">
<img src="images/rsz_1rsz_insta.png">
<img src="images/rsz_twitter.png">
<img src="images/rsz_1facebook-removebg-preview.png">
</div>
<div class="col-md-3" style="padding-left: 5%; text-align: center;">
<p>#<br>#</p>
</div>
</div>
</div>
</div>
<!--Content Ends-->
</body>
</html>
CSS
/
* NavBar parameters*/
nav#navbar {
background-color: rgba(0, 0, 0, 0.8) !important;
}
nav#navbar ul.navbar-nav {
display: flex;
margin: 0 auto;
}
/* Image and text over image parameters */
.img {
width: 100%;
z-index: 0;
}
/*#1 media settings for the text link to go to booksy*/
#media (max-width: 768px) {
/* Adjust font size for small screens */
.carousel-caption {
font-size: 1em !important;
padding-bottom: 0;
}
}
.carousel-caption{
font-family: 'Bangers';
font-size: 50px;
color: gold;
}
.carousel-caption:hover{
color: #00E2FF;
}
.col-md-12#footer{
background-color: lightgray !important;
height: 5em;
display: flex;
align-items: flex-end;
}
#media (max-width: 768px) {
/* Adjust font size for small screens */
.col-md-12#footer {
display: flex;
padding-bottom: 0;
}
}
#media (max-width: 768px) {
/* Adjust font size for small screens */
.col-md-5#sm {
size: 1px;
}
}
/*--------------*/
table {
border-collapse: collapse;
}
#activerow {
border: 0.5px solid gold;
}
#activerow > td {
color: gold;
font-weight: 600;
}
#activerow > td > span {
color: gold;
}
/* Table Design */
.opening-hours {
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: white;
padding: 1em;
max-width: 450px;
min-width: 320px;
}
.fvl-d > td {
font-size: 12px;
font-weight: 400;
letter-spacing: 1.2px;
color: #A299AC;
text-transform: uppercase;
padding: 1em;
}
.fvl-d > td > span {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
color: #A299AC;
text-transform: uppercase;
}
#media screen and (max-width: 382px) {
.fvl-d > td {
font-size: 14px;
padding: 15px 5px;
}
#activerow {
border: none;
background-color: gold;
}
#activerow > td {
color: white;
font-weight: 600;
}
#activerow > td > span {
color: white;
}
}
Any ideas you may have please let me know! Stuck on this bit as it stands but any other help would be unreal. Thanks in advance guys!
Example of how it looks on mobile now
I added display: flex; to the footer images div and it worked fine
code :
<div class="col-md-5" id="sm" style="padding-left: 10%; padding-bottom: 1%;display: flex;">
<img src="images/rsz_1rsz_insta.png">
<img src="images/rsz_twitter.png">
<img src="images/rsz_1facebook-removebg-preview.png">
</div>
I'm fairly new to software engineering! I'm having quite some trouble horizontally aligning my navigation bar to the center for my desktop view? I'm currently learning how to utilize bootstrap! I'm sure I have to include a container div somewhere, just not sure! Any help is help! Thanks! Here is my website preview: https://frontendfoundations.marlenebarr.repl.co/
body {
font-family: "Lato", sans-serif;
}
h2 {
font-size: clamp(14px, -1rem + 8.333vw, 26px);
color: #fff;
font-weight: 400;
margin: 0 10px 10px 10px;
text-align: center;
}
h3 {
font-size: 18px;
font-weight: 500;
}
p {
line-height: 1.5em;
margin: 0;
}
section {
padding: 20px;
}
section.alternate-background {
background-color: #00a699;
color: #fff;
}
main img {
width: 100%;
}
.dark {
color: black;
}
/* --- Groups & Items --- */
.group {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
margin: 10px;
}
.item-double {
flex: 2;
}
/* ------- Navigation ------- */
header {
background-color: #ff385c;
padding: 20px 20px 0 20px;
text-align: center;
}
.logo {
font-family: "Pangolin", cursive;
font-size: clamp(24px, -1rem + 8.333vw, 72px);
color: #fff;
}
header nav {
display: flex;
justify-content: center;
}
header nav ul {
display: flex;
flex-wrap: wrap;
}
header nav ul li {
list-style-type: none;
}
header nav ul li a {
color: #fff;
text-decoration: none;
padding: 0 20px 0 0;
}
header nav ul li a:hover {
color: #bdbdbd;
text-decoration: none;
}
/* ------- Search Form ------- */
form {
border: 2px solid #ff385c;
padding: 10px;
}
form label {
font-weight: bold;
}
form select,
form input {
margin-bottom: 20px;
width: 180px;
}
form button {
background-color: #ff385c;
border: none;
color: #fff;
font-size: 24px;
padding: 15px;
width: 100%;
}
form div {
display: flex;
justify-content: space-between;
}
/* ------- Footer ------- */
footer {
background-color: #ff385c;
}
footer p {
color: #fff;
text-align: center;
padding: 20px;
}
/* ------- Media Query ------- */
#media all and (min-width: 480px) {
/* ------ General ------ */
p {
padding: 10px;
}
.group-lg {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
/* ------ Navigation ------ */
header {
display: flex;
justify-content: space-between;
}
header div {
display: flex;
align-items: center;
}
/* ------ Form -----*/
form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
form div {
display: flex;
flex-direction: column;
padding: 10px;
}
form button {
margin: 10px;
width: 100%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Pangolin&family=Lato&display=swap" rel="stylesheet" />
<header>
<div class="logo">Thinkfulbnb</div>
<nav>
<ul id="menu">
<li>Stay</li>
<li>About</li>
<li>Ideas</li>
<li>Host</li>
</ul>
</nav>
</header>
<main>
<!-- Stay -->
<section id="stay">
<h2>Find the perfect vacation rental</h2>
<!-- Create a form here -->
<form>
<div class="form-lg">
<label for="location">Location</label>
<input id="location" ; type="text" placeholder="Search Destination" required />
</div>
<div class="form-lg">
<label for="arrive">Arrive</label>
<input id="arrive" ; type="date" required />
</div>
<div class="form-lg">
<label for="depart">Depart</label>
<input id="depart" ; type="date" required />
</div>
<div class="form-lg">
<label for="type">Type</label>
<select name="type" id="type" size="1">
<option value="apartment">Apartment</option>
<option value="barn">Barn</option>
<option value="castle">Castle</option>
<option value="houseboat">Houseboat</option>
<option value="tiny-house">Tiny House</option>
<option value="yacht">Yacht</option>
<option value="yurt">Yurt</option>
</select>
</div>
<div>
<button type="submit" class="form-lg">Search</button>
</div>
</form>
</section>
<!-- About -->
<section id="about" class="alternate-background">
<h2>About</h2>
<div class="group-lg">
<div class="item">
<img src="vacation-rental-pool.png" alt="Thinkfulbnb - Vacation rental pool" />
</div>
<div class="item">
<img src="vacation-rental-inside-stone.png" alt="Thinkfulbnb - Vacation rental inside stone" />
</div>
<div class="item-double">
<p>
Fusce porta odio nunc, eget pretium massa rutrum sit amet. Etiam fringilla aliquam dapibus. Maecenas quis nisi sed turpis aliquam porttitor eget ut quam. Sed vel scelerisque ex. Duis in pharetra neque, at tempus lorem. Aenean mi magna, posuere at quam
sed, euismod gravida neque.
</p>
</div>
</div>
</section>
<!-- Ideas -->
<section id="ideas">
<h2 class="dark">Ideas</h2>
<div class="group-lg">
<div class="item">
<h3>Forest retreats</h3>
<img src="forest-retreat.png" alt="Thinkfulbnb - Forest retreat" />
</div>
<div class="item">
<h3>Beaches</h3>
<img src="beach-house.png" alt="Thinkfulbnb - Beach house" />
</div>
</div>
<div class="group-lg">
<div class="item">
<h3>Rustic cabins</h3>
<img src="cabin.png" alt="Thinkfulbnb - Cabin" />
</div>
<div class="item">
<h3>Pet-friendly</h3>
<img src="pet-friendly.png" alt="Thinkfulbnb - Pet-friendly" />
</div>
</div>
</section>
<!-- Host -->
<section id="host" class=" group-lg alternate-background">
<div class="item">
<h2>Want to Become a Thinkfulbnb Host?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie in est id efficitur. Sed hendrerit ut turpis quis dapibus. Nam sit amet iaculis lectus. Aliquam erat volutpat. Praesent rhoncus pellentesque eros in aliquet. Sed accumsan elit
lacus, id ultrices libero rutrum vitae.
</p>
<ul>
<li>Mauris in pellentesque ligula.</li>
<li>Sed accumsan elit lacus, id ultrices libero rutrum vitae.</li>
<li>Nunc vitae ex eget neque pellentesque porttitor.</li>
<li>Cras mollis lorem sagittis sapien imperdiet blandit. Vivamus.</li>
<li>
Donec vehicula ipsum nisi, eu consectetur leo feugiat et. Fusce eget hendrerit mauris.
</li>
</ul>
</div>
<div class="item">
<img src="become-a-host.png" alt="Thinkfulbnb - Become a host" />
</div>
</section>
</main>
<footer>
<p>© Thinkful</p>
</footer>
add this simple CSS code, and will hopefully solve that issue in desktop version.
form {
display: flex;
justify-content: center;
}
if you want, you can also add also this code on the mobile version, outside #media, which is also a good design on mobile!
justify-content docs link: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
body {
font-family: "Lato", sans-serif;
}
h2 {
font-size: clamp(14px, -1rem + 8.333vw, 26px);
color: #fff;
font-weight: 400;
margin: 0 10px 10px 10px;
text-align: center;
}
h3 {
font-size: 18px;
font-weight: 500;
}
p {
line-height: 1.5em;
margin: 0;
}
section {
padding: 20px;
}
section.alternate-background {
background-color: #00a699;
color: #fff;
}
main img {
width: 100%;
}
.dark {
color: black;
}
/* --- Groups & Items --- */
.group {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
margin: 10px;
}
.item-double {
flex: 2;
}
/* ------- Navigation ------- */
header {
background-color: #ff385c;
padding: 20px 20px 0 20px;
text-align: center;
}
.logo {
font-family: "Pangolin", cursive;
font-size: clamp(24px, -1rem + 8.333vw, 72px);
color: #fff;
}
header nav {
display: flex;
justify-content: center;
}
header nav ul {
display: flex;
flex-wrap: wrap;
}
header nav ul li {
list-style-type: none;
}
header nav ul li a {
color: #fff;
text-decoration: none;
padding: 0 20px 0 0;
}
header nav ul li a:hover {
color: #bdbdbd;
text-decoration: none;
}
/* ------- Search Form ------- */
form {
border: 2px solid #ff385c;
padding: 10px;
/* what I added to center it */
display: flex;
justify-content: center;
}
form label {
font-weight: bold;
}
form select,
form input {
margin-bottom: 20px;
width: 180px;
}
form button {
background-color: #ff385c;
border: none;
color: #fff;
font-size: 24px;
padding: 15px;
width: 100%;
}
form div {
display: flex;
justify-content: space-between;
}
/* ------- Footer ------- */
footer {
background-color: #ff385c;
}
footer p {
color: #fff;
text-align: center;
padding: 20px;
}
/* ------- Media Query ------- */
#media all and (min-width: 480px) {
/* ------ General ------ */
p {
padding: 10px;
}
.group-lg {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
/* ------ Navigation ------ */
header {
display: flex;
justify-content: space-between;
}
header div {
display: flex;
align-items: center;
}
/* ------ Form -----*/
form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
form div {
display: flex;
flex-direction: column;
padding: 10px;
}
form button {
margin: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initital-scale=1" />
<title>Vacation Rentals & Unique Homes</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Pangolin&family=Lato&display=swap" rel="stylesheet" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div class="logo">Thinkfulbnb</div>
<nav>
<ul id="menu">
<li>Stay</li>
<li>About</li>
<li>Ideas</li>
<li>Host</li>
</ul>
</nav>
</header>
<main>
<!-- Stay -->
<section id="stay">
<h2>Find the perfect vacation rental</h2>
<!-- Create a form here -->
<form>
<div class="form-lg">
<label for="location">Location</label>
<input id="location" ; type="text" placeholder="Search Destination" required />
</div>
<div class="form-lg">
<label for="arrive">Arrive</label>
<input id="arrive" ; type="date" required />
</div>
<div class="form-lg">
<label for="depart">Depart</label>
<input id="depart" ; type="date" required />
</div>
<div class="form-lg">
<label for="type">Type</label>
<select name="type" id="type" size="1">
<option value="apartment">Apartment</option>
<option value="barn">Barn</option>
<option value="castle">Castle</option>
<option value="houseboat">Houseboat</option>
<option value="tiny-house">Tiny House</option>
<option value="yacht">Yacht</option>
<option value="yurt">Yurt</option>
</select>
</div>
<div>
<button type="submit" class="form-lg">Search</button>
</div>
</form>
</section>
<!-- About -->
<section id="about" class="alternate-background">
<h2>About</h2>
<div class="group-lg">
<div class="item">
<img src="vacation-rental-pool.png" alt="Thinkfulbnb - Vacation rental pool" />
</div>
<div class="item">
<img src="vacation-rental-inside-stone.png" alt="Thinkfulbnb - Vacation rental inside stone" />
</div>
<div class="item-double">
<p>
Fusce porta odio nunc, eget pretium massa rutrum sit amet. Etiam fringilla aliquam dapibus. Maecenas quis nisi sed turpis aliquam porttitor eget ut quam. Sed vel scelerisque ex. Duis in pharetra neque, at tempus lorem. Aenean mi magna, posuere at quam
sed, euismod gravida neque.
</p>
</div>
</div>
</section>
<!-- Ideas -->
<section id="ideas">
<h2 class="dark">Ideas</h2>
<div class="group-lg">
<div class="item">
<h3>Forest retreats</h3>
<img src="forest-retreat.png" alt="Thinkfulbnb - Forest retreat" />
</div>
<div class="item">
<h3>Beaches</h3>
<img src="beach-house.png" alt="Thinkfulbnb - Beach house" />
</div>
</div>
<div class="group-lg">
<div class="item">
<h3>Rustic cabins</h3>
<img src="cabin.png" alt="Thinkfulbnb - Cabin" />
</div>
<div class="item">
<h3>Pet-friendly</h3>
<img src="pet-friendly.png" alt="Thinkfulbnb - Pet-friendly" />
</div>
</div>
</section>
<!-- Host -->
<section id="host" class="group-lg alternate-background">
<div class="item">
<h2>Want to Become a Thinkfulbnb Host?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie in est id efficitur. Sed hendrerit ut turpis quis dapibus. Nam sit amet iaculis lectus. Aliquam erat volutpat. Praesent rhoncus pellentesque eros in aliquet. Sed accumsan elit
lacus, id ultrices libero rutrum vitae.
</p>
<ul>
<li>Mauris in pellentesque ligula.</li>
<li>Sed accumsan elit lacus, id ultrices libero rutrum vitae.</li>
<li>Nunc vitae ex eget neque pellentesque porttitor.</li>
<li>
Cras mollis lorem sagittis sapien imperdiet blandit. Vivamus.
</li>
<li>
Donec vehicula ipsum nisi, eu consectetur leo feugiat et. Fusce eget hendrerit mauris.
</li>
</ul>
</div>
<div class="item">
<img src="become-a-host.png" alt="Thinkfulbnb - Become a host" />
</div>
</section>
</main>
<footer>
<p>© Thinkful</p>
</footer>
</body>
</html>
I want to float my nav-bar to the right of my screen, but I can't figure out how to make it. I tried to play with the margin property, but that just breaks. I know it's a mess, but I haven't removed any unnecessary code trying to resolve my problem.
Below the code.
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;700&display=swap");
/* font-family: 'Open Sans', sans-serif; */
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
overflow-x: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
img {
max-width: 100%;
height: auto;
}
.button {
display: inline-block;
font-size: 1.15rem;
text-decoration: none;
padding: 0.5em 1.3em;
border-width: 2px;
border-style: solid;
}
.container {
width: 95%;
margin: 0 auto;
}
/*Home Section*/
header {
text-align: center;
position: absolute;
margin: 1em;
}
.logo {
max-width: 180px;
max-height: 180px;
}
#nav-ul {
margin: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
list-style-type: none;
}
.nav-item {
display: inline-block;
margin: 0em;
}
.nav-links {
font-weight: 900;
text-decoration: none;
font-size: 1rem;
padding: 0.3em;
color: white;
}
.nav-links:hover,
.nav-links:focus {
color: lightgray;
}
#home-section {
text-align: center;
width: 100vw;
background-image: url(imgs/home-section-background.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
}
.title {
color: white;
font-size: 2.5rem;
}
.button-green {
margin-top: 1.8em;
color: rgb(3, 204, 30);
border-color: rgb(12, 255, 45);
}
.button-green:hover,
.button-green:focus {
background-color: rgb(8, 163, 26);
}
/* About section */
#about-examples {
text-align: center;
}
.description-text {
background-color: rgb(68, 68, 68);
color: white;
padding: 3em;
width: 100vw;
margin-left: -2.5%;
outline: 2px solid rgb(12, 255, 45);
outline-offset: -2.1em;
position: relative;
}
.description-text p {
text-align: justify;
}
.description-text h1 {
font-size: 1.3em;
text-align: center;
margin-top: 0;
position: absolute;
top: 0.8em;
background-color: rgb(68, 68, 68);
color: rgb(12, 255, 45);
padding: 0 0.5em;
left: 50%;
transform: translateX(-50%);
}
/*Media quiries*/
#media (min-width: 60rem) {
.title {
font-size: 4rem;
}
.nav-links {
font-size: 2rem;
float: right;
}
.nav-item {
}
.button {
font-size: 2rem;
}
.logo {
float: left;
margin: 1em;
}
#nav-ul {
float: right;
}
.description-text {
font-size: 3em;
}
.description-text p {
font-size: 0.5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Me</title>
<link href="ResponsiveWeb.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="imgs/logo.jpg" alt="company logo" class="logo" />
<ul id="nav-ul">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</header>
<!--Company name goes here-->
<section class="home" id="home-section">
<div class="containter">
<h1 class="title">Making proffesional design and development</h1>
See our work
</div>
</section>
<!--Company description goes here-->
<div class="container">
<section class="about-company" id="about-examples">
<div class="description-text">
<h1>What we do</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sit
amet commodo nulla facilisi.
</p>
<p>
Nam eget sem sed sem rutrum efficitur. Nullam lorem nunc, porta et
faucibus semper, suscipit id mauris. Sed nisi eros, mollis at mollis
a, porta et sapien. Fusce blandit tempus justo. Aenean erat magna,
semper nec commodo quis, feugiat sit amet lacus. Vestibulum tempor
ornare fermentum. Vestibulum egestas imperdiet libero, sed egestas
purus varius a. Mauris consequat ligula ipsum, at faucibus lectus
blandit quis. Donec congue eros sed est sollicitudin, in ultricies
lorem consectetur. Maecenas suscipit tortor orci, id pellentesque
nisi maximus at. In laoreet turpis id tempor dapibus. Nunc facilisis
egestas ex et ullamcorper. Mauris nunc felis, porttitor nec porta
cursus, egestas vitae tellus. Ut commodo in metus eget blandit.
Maecenas vestibulum dictum neque, at dictum arcu lobortis nec. Donec
quis augue arcu.
</p>
</div>
</section>
</div>
<!--Work Example-->
<section class="work-example">
<h1>Example of our work</h1>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-01 Jeremy Bishop.jpg"
alt="Beautiful tree"
/>
<figcaption class="port-description">
<p>Photo by Jeremy Bishop</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img src="imgs/Portfolio-pic-02 Jay Mantri.jpg" alt="Fog over forest" />
<figcaption class="port-description">
<p>Photo by Jay Mantri</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-03 Riccardo Chiarini.jpg"
alt="Beautiful lake"
/>
<figcaption class="port-description">
<p>Photo by Riccardo Chiarini</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-04 redcharlie.jpg"
alt="Beautiful tree in forest"
/>
<figcaption class="port-description">
<p>Photo by redcharlie</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-05 Vincent van Zalinge.jpg"
alt="Bird on brnanch"
/>
<figcaption class="port-description">
<p>Photo by Vincent van Zalinge</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-06 eberhard grossgasteiger.jpg"
alt="Fog over mountains"
/>
<figcaption class="port-description">
<p>Photo by eberhard grossgasteiger</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
</section>
<footer id="contacts">
<p>Work hours: Mon-Fri 8:00 AM - 16:00 PM</p>
<br />
<p>You can contact us here:</p>
<br />
<ul class="contact-links">
<li class="contact-link"><a class="contact" href="#">A</a></li>
<li class="contact-link"><a class="contact" href="#">B</a></li>
<li class="contact-link"><a class="contact" href="#">C</a></li>
</ul>
</footer>
</body>
</html>
Maybe the header is not wide enough. In your CSS you can set the width of the header to 100%.
header {
text-align: center;
position: absolute;
margin: 1em;
width: 100%;
}
It worked for me after removing position: absolute from the header in the CSS.
The Problem is your header isn't big enough.
So add to the header "width: 100%;"
header {
text-align: center;
position: absolute;
margin: 1em;
width: 100%
}
Then add "float: right;" to your #nav-ul:
#nav-ul {
margin: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
list-style-type: none;
float: right;
}
I am trying to write a responsive footer. The footer items are separated by vertical bar (|). When we decrease the screen size, the footer items are wrapping to second line. Vertical bar (|) needs to be only between the footer items. Also facebook logo needs to be on the same line with the footer items for bigger screen sizes and on the center for smaller screen sizes. I used float:right but now they wrap from the beginning. How can I make them wrap from the end and hide vertical bar (|) if it is not between the footer items?
Here is my source code: https://jsfiddle.net/6kcdvteo/
body {
font-family: 'Calibri';
}
.text {
font-size: 1rem;
padding: 1rem 1rem 2rem 2rem;
color: #666666;
background-color: #f4f4f4;
}
.footer {
font-size: 0.85rem;
padding: 2rem 1rem 2rem 2rem;
background-color: #303741;
color: white;
}
.footer_company {
float: right;
padding-right: 2rem;
}
.footer_links {
font-size: 0.85rem;
background-color: #303741;
color: white;
padding-bottom: 2rem;
padding-right: 2.5rem;
}
.footer_links_span span {
background-color: #303741;
padding-right: 0.5rem;
float: right;
}
img {
height: 3rem;
width: 3rem;
}
.img {
padding-left: 1rem;
display: inline-block;
}
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac cursus felis, ut egestas lacus. Sed nec elementum ipsum. Morbi metus est, venenatis at libero pharetra, suscipit posuere dolor. Proin a auctor nulla, sed tincidunt tellus. Nullam bibendum
luctus elit, sed porttitor lectus varius in. Cras venenatis rutrum urna at ultrices. Sed in luctus ligula.
</p>
</div>
<div class="footer">
<span class="footer_company">© My Company Name</span>
</div>
<div class="footer_links">
<div class="img">
<img src="https://image.flaticon.com/icons/png/512/124/124010.png">
</div>
<div class="footer_links_span">
<span>Sed metus</span>
<span>|</span>
<span>Aenean ultricies</span>
<span>|</span>
<span>Praesent vitae</span>
<span>|</span>
<span>Donec auctor</span>
<span>|</span>
<span>Vestibulum lobortis</span>
</div>
</div>
As part of your question you can use this
<div class="footer_links">
<div class="img">
<img src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="">
</div>
<div class="footer_links_span">
<span><b>|</b> Sed metus</span>
<span><b>|</b> Aenean ultricies</span>
<span><b>|</b> Praesent vitae</span>
<span><b>|</b> Donec auctor</span>
<span><b>|</b> Vestibulum lobortis <b>|</b></span>
</div>
</div>
with this css
/* container */
.footer_links {
padding: 0.75rem 1.5rem;
font-size: 0.85rem;
background-color: #303741;
color: white;
}
/* clearfix floats */
.footer_links::after {
display: block;
clear: both;
content: "";
}
/* facebook img */
.img {
float: left;
}
.img img {
width: 3rem;
height: auto;
border: 0;
}
/* links */
.footer_links_span {
float: right;
width: calc(100% - 3.5rem);
text-align: right;
}
.footer_links_span span {
display: inline-block;
white-space: nowrap;
background-color: #303741;
}
.footer_links b {
padding: 0 0.2rem;
font-weight: inherit;
}
.footer_links_span span:first-child b {
padding-left: 0;
}
.footer_links_span span:last-child b {
padding-right: 0;
}
Maybe it will help you in the right direction.
This will solve your problem, but it's Bootstrap :) All your responsive screenshotes are implemented in this code. No extra css for the layout required.
EDIT: The included style is for the width of the links block and for hiding the pipe symbool on small screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
#footerSocial img { width: 3rem; margin-bottom: 0.5rem; }
#footerLinks > div { max-width: 350px; margin: auto; }
#footerLinks .dv { font-weight: inherit; display: none; }
#media (min-width: 576px) {
#footerSocial img { margin-bottom: 0; }
#footerLinks > div { max-width: none; padding-left: 100px; }
}
#media (min-width: 768px) {
#footerLinks > div { padding-left: 0; }
#footerLinks .dv { display: inline; }
}
</style>
</head>
<body>
<div class="container-fluid bg-secondary text-white">
<div class="row py-3">
<div class="col-12 text-center">
<h1 class="mb-2">Company Name</h1>
</div>
</div>
</div>
<div class="container">
<div class="row py-3">
<div class="col-12 ">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac cursus felis, ut egestas lacus.
Sed nec elementum ipsum. Morbi metus est, venenatis at libero pharetra, suscipit posuere dolor.
Proin a auctor nulla, sed tincidunt tellus. Nullam bibendum luctus elit, sed porttitor lectus
varius in. Cras venenatis rutrum urna at ultrices. Sed in luctus ligula.</p>
</div>
</div>
</div>
<div class="container-fluid bg-dark text-white">
<div class="row px-2 py-3">
<div id="footerSocial" class="col-12 col-sm-2 text-center text-sm-left">
<img class="img-fluid bg-white" src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="FB">
</div>
<div id="footerLinks" class="col-12 col-sm-10 text-center text-sm-right">
<div>
© Company Name<br>
<span class="text-nowrap">Sed metus</span>
<span class="text-nowrap">| Aenean ultricies</span>
<span class="text-nowrap">| Praesent vitae</span>
<span class="text-nowrap"><b class="dv">| </b>Donec auctor</span>
<span class="text-nowrap">| Vestibulum lobortis</span>
</div>
</div>
</div>
</div>
</body>
</html>
I have some difficulty on the responsiveness of a page.
As you can see in the following code when I inspect responsiveness using Google developer tool, the menu bar will disappear after the width go below 768px?
But I want really have the menu bar in the smaller screen like phones with the width of 414px ...
/*these are classes, put in class declaration*/
<!--just for the About and data html sheets-->
.navbar,.navbar-collapse,.navbar-brand,.nav,#aboutlink,#print-link{
background: #332A85;
color: #ffffff;
text-align: right;
}
#menu a.active, #menu a:hover ,.nav>li>a:focus, .nav>li>a:hover{
transition-property: background-color, color;
transition-duration: .2s;
transition-timing-function: ease-out;
background-color: #332A85;
color: #fff;
}
#print-link {
pointer-events: none;
cursor: default;
}
.ccusa_container{
padding-top: 12em;
padding-left: 12em;
padding-right: 12em;
margin-bottom: 10px;
color: black;
font-size: 15px;
font-family: 'Open Sans';
text-align: justify;
background-color: white;
}
.jumbotron {
background-color: black;
border: 2px solid black;
text-align: center;
height: 450px;
color: white;
font-family: 'Open Sans', sans-serif;
padding-top: 12em;
padding-left: 12em;
padding-right: 12em;
margin-bottom: 10px;
}
/*-- # = ids -*/
html, body {
height: 0%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
background-color: white;
color: black;
}
h2, h3 {
font-size: 1.2em;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
}
h4 {
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
p {
margin: 10px;
text-align: left;
}
a.header1 {
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
color: #fff;
}
a.body1{
color: purple;
}
hr {
display: block;
margin-top: 1.5em;
margin-bottom: 1.5em;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 2px;
}
.closeinfo {
padding-top: 8em;
padding-left: 8em;
padding-right: 8em;
margin-bottom: 10px;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
background-color: black;
color: #fff;
text-align: center;
height: 300px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td, th {
padding: 8px;
text-align: left;
border: 1px solid black;
}
th {
text-align: left;
}
/*mobile responsivenes*/
#media (max-width: 550px) {
navbar-fixed-top {
width: 400px;
}
#menu {
width: 400px;
position: sticky;
}
h4 {
display: none;
}
.navbar, .navbar-fixed-top, .navbar-header {
width : 100%;
background: #332A85;
color: #332A85;
}
.mapboxgl-canvas-container {
align-content: center;
}
}
<!DOCTYPE>
<html>
<head>
<meta charset = 'utf8'>
<title>Operations - About</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Begin Mapbox requests -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.css' type='text/css' />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One|Exo:400,600|Ropa+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Arimo|Dosis|Lato' rel='stylesheet' type='text/css'>
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!-- end project-specific asset calls -->
</head>
<body>
<div>
<!--Navbar-->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="navbar-brand"> Project Work</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav"> Map</li>
<li class="nav"> About</li>
<li class="nav"> Data</li>
</ul>
</div>
</nav>
</div>
<!----jumbotron---->
<div class="jumbotron">
<h3>vitae non volutpat mi nisl amet in sapien enim eget quam sodales nunc nulla ligula tortor integer pretium vitae sit purus ultricies nec vitae nec quam nunc mauris felis turpis blandit risus nunc felis ornare morbi non id cras per eros dignissim orci aenean elit libero sed morbi pellentesque a libero morbi curabitur in in at cum aliquam sed in libero nam mi amet tincidunt sit sit in eros arcu bibendum tortor eleifend vulputate nisl duis turpis erat tincidunt rhoncus sit sit nulla nascetur in in vulputate neque dignissim nisl mauris wisi ac elit esse per diam nam morbi eros auctor ut lacinia libero malesuada justo sed odio montes dolor duis in maecenas faucibus amet
</h3>
</div>
<!----TEXT---->
<div class="col-md-12 text-justify">
<div class="col-md-1 justify"></div>
<div class="col-md-10 justify" style="background-color:##C0C0C0">
</div>
<div class="col-md-1 justify"></div>
</div>
<!--Center buttons: GitHub MapBox ATTOM-->
<div class="col-md-12 text-center" style="background-color:##C0C0C0">
<div class="col-md-1 text-center"></div>
<!----TEXT---->
<div class="bio container-fluid" id="ccusa_container">
<!----TEXT---->
<div class="col-md-12 text-justify">
<div class="col-md-1 justify"></div>
<div class="col-md-10 justify">
<br><br>
</h3>
</div>
<div class="col-md-1 justify"></div>
</div>
<div class="col-md-12 text-center">
<div class="col-md-2 text-center"></div>
<div class="col-md-4 text-center">
<p align="center"><center><img src='./static/ccusa_logo.png' style="height: 100px"> </img></center>
<br>
<center align="center">Follow #CCharitiesUSA <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
<br>
</p>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
<br>
<br><br>
</div>
<div class="col-md-2 text-center"></div>
</div>
<br><br>
</div>
</body>
</html>
How we am I improve the responsiveness is my question?
There are 2 solutions to your problem.
The first one and the nice one is something that bootstrap already supports, you're just missing some code to make it work. You have a working demo here
You just need to add the button that will be displayed when the menu is collapsed. Please check the Fiddle example. I also applied some CSS to .navbar-header and .navbar-default .navbar-nav > li > a just to have a example look nice.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
In case you don't want the collapsed menu supported by Bootstrap, you will have to hardcode some CSS classes which is a bit ugly. Here you have an answer that might help you.