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.
Related
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>
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>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I am trying to create a space above "Affordable Professional Web Design" in the image below, so that it creates a space which is occupied by the image
However when I do so, it only seems to push the image down and leaves white space (indicated in red). I am trying to do this by applying margin-top although cannot find a resolution. Any ideas how to resolve?
Web Page Image
/* Global */
.container {
width: 80%;
margin: auto;
overflow;
hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
/* Header */
header {
background-color: #35424a;
border-bottom: orange solid;
min-height: 70px;
padding-top: 30px;
color: #ffffff;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header li {
float: left;
list-style: none;
padding: 0 10px 0 10px;
}
header nav {
float: right;
text-transform: uppercase;
}
header a {
text-decoration: none;
color: #ffffff;
}
#highlight,
#current a {
color: #e8491d;
}
nav a:hover {
color: orange;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../countryside.jpg') no-repeat;
background-size: cover;
text-align: center;
color: #ffffff;
}
#showcase h1 {
margin-top: 100px;
padding: 30px;
text-align: center;
color: #ffffff;
font-size: 50px;
}
#showcase p {
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" width="device-width" />
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span id="highlight">Test</span> Web Design</h1>
</div>
<nav>
<ul>
<li id="current">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla molestie, dictum purus vel, dapibus turpis. Aliquam malesuada laoreet ante. Integer dictum ipsum sed arcu commodo laoreet ultrices ac est. Nullam sagittis eget arcu nec
mollis.
</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<form>
<h2>Subscribe to our newsletter</h2>
<input type="email" placeholder="Enter email..." />
<button type="submit">Submit</button>
</form>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">
<img src="HTML.png" alt="" />
<h3>HTML Markup</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="css.png" height="200px" alt="" />
<h3>CSS3 Styling</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="graphic_design.svg" height="300px" alt="" />
<h3>Graphic Design</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
</div>
</section>
</body>
Instead of margin try using padding:
#showcase h1{
padding:100px 30px 30px 30px;
text-align:center;
color:#ffffff;
font-size:50px;
}
This is one of the projects from free coding camp on the frontend certficate.
I'm trying to align the bullet points of the li elements as well as make a footer at the bottom of the page using bootstrap.
Codepen Link
Codepen html:
<html>
<head>
<title>Mark Dean Tribute Page</title>
<link href="https://fonts.googleapis.com/css?family=Keania+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<h1 class="text-center main-header"> The Mark Dean <br /> Tribute Page</h1>
<hr />
<div class="row header ">
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121539_foudov.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080684/20170529_121729_p74ux7.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid"src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121615_rpox2c.jpg"></a>
</div>
<div class="list-div" style="width = 25%; margin-left: auto; margin-right: auto; ">
<ul class="facts">
<li><p>Mark Dean was born 1957 in jefferson city</p></li>
<li><p>1982 Dean earned his master's degree in electrical engineering from Florida Atlantic university</p></li>
<li><p>1992 Dean graduated and completed his doctorate from Stanford university</p></li>
<li><p>1996 he was the first African American ever to rexeive the honor as an ibm fellow</p></li>
<li><p>1997 he was honered with the black engineer of the year presidents award and was inducted into the hall of national inventors</p></li>
<li><p>1999 Mark Dean lead a team of engineers to develop a gigahertZ chip</p></li>
<li><p> Working closely with a colleague, Mark Dean developed USA industry standard architecture system bus</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin vitae lobortis nibh tempus at. et sem id placerat.</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Facts preview vitae lobortis nibh tempus at. Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Visit here to read more about Mark Dean</p></li>
</div>
</ul>
</div>
<footer class="footer navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<p>This was coded and Created by <em>Terrell Wright</em></p>
</div>
</footer>
</div>
</body>
</html>
codepen css:`
body {
background-color: rgb(41, 41, 41);
margin-left: 30px;
margin-right: 30px;
}
.main-header {
font-family: 'Keania one', serif;
color: rgb(82, 68, 50);
font-size: 64px;
margin-bottom: 100px;
}
.header-image {
width: 300px;
height: 300px;
border-radius: 20px;
border: 5px solid #3D3124;
margin-top: 10px;
margin-left: 15px;
}
.header {
background-color: #3D3730;
border-radius: 30px;
}
hr {
background-color: #524432;
margin-bottom: 80px;
height: 1px;
border-radius: 20px;
}
.facts {
text-align: center;
}
.facts li {
display: list-style;
list-style: circle;
font-family: "Crimson Text", serif;
font-size: 24px;
color: black;
/* bootstrap floats to left - for override
*/
}
.facts li:first-child {
margin-top: 40px;
} `
Using bootstrap 4 (per your codepen), you can add .d-flex.text-center.flex-column.align-items-center to .facts and remove text-align: center from your css. That will put the contents of .facts in a flex column, center align the children and center align the text. That will put the bullets beside each flex child.
Then to fix the footer to the bottom of the screen, add .navbar.fixed-bottom.justify-content-center; to the footer to fix it to the bottom of the screen and vertically align the contents. Then assign a height to it, and use that height value as padding-bottom on body to make room for the menu.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<title>Mark Dean Tribute Page</title>
<link href="https://fonts.googleapis.com/css?family=Keania+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<style>
body {
background-color: rgb(41, 41, 41);
margin-left: 30px;
margin-right: 30px;
padding-bottom: 50px;
}
.main-header {
font-family: 'Keania one', serif;
color: rgb(82, 68, 50);
font-size: 64px;
margin-bottom: 100px;
}
.header-image {
width: 300px;
height: 300px;
border-radius: 20px;
border: 5px solid #3D3124;
margin-top: 10px;
margin-left: 15px;
}
.header {
background-color: #3D3730;
border-radius: 30px;
}
hr {
background-color: #524432;
margin-bottom: 80px;
height: 1px;
border-radius: 20px;
}
.facts li {
display: list-style;
list-style: circle;
font-family: "Crimson Text", serif;
font-size: 24px;
color: black;
/* bootstrap floats to left - for override
*/
}
.facts li:first-child {
margin-top: 40px;
}
.footer {
color: #fff;
background: rgba(0,0,0,0.5);
height: 50px;
}
footer p {
margin: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1 class="text-center main-header"> The Mark Dean <br /> Tribute Page</h1>
<hr />
<div class="row header ">
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121539_foudov.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080684/20170529_121729_p74ux7.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid"src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121615_rpox2c.jpg"></a>
</div>
<div class="list-div" style="width = 25%; margin-left: auto; margin-right: auto; ">
<ul class="d-flex text-center facts flex-column align-items-center">
<li><p>Mark Dean was born 1957 in jefferson city</p></li>
<li><p>1982 Dean earned his master's degree in electrical engineering from Florida Atlantic university</p></li>
<li><p>1992 Dean graduated and completed his doctorate from Stanford university</p></li>
<li><p>1996 he was the first African American ever to rexeive the honor as an ibm fellow</p></li>
<li><p>1997 he was honered with the black engineer of the year presidents award and was inducted into the hall of national inventors</p></li>
<li><p>1999 Mark Dean lead a team of engineers to develop a gigahertZ chip</p></li>
<li><p> Working closely with a colleague, Mark Dean developed USA industry standard architecture system bus</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin vitae lobortis nibh tempus at. et sem id placerat.</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Facts preview vitae lobortis nibh tempus at. Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Visit here to read more about Mark Dean</p></li>
</div>
</ul>
</div>
<footer class="footer navbar fixed-bottom justify-content-center">
<div class="container-fluid">
<p>This was coded and Created by <em>Terrell Wright</em></p>
</div>
</footer>
</div>
</body>
</html>
I want to create a page where i can have a div fullscreen with a background image using bootstrap just like Endomodo's site
Since i just begin boostrap i downloaded some samples on startboostrap website and tried to manage what i want. My problem is that the menu and the content are shown in the page but my div doesn't (and so the image).
My html/css :
body {
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
.full {
background: url(bg3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.header-image {
display: block;
width: 100%;
text-align: center;
background: url('http://placehold.it/1900x500') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.headline {
padding: 120px 0;
}
.headline h1 {
font-size: 130px;
background: #fff;
background: rgba(255,255,255,0.9);
}
.headline h2 {
font-size: 77px;
background: #fff;
background: rgba(255,255,255,0.9);
}
.featurette-divider {
margin: 80px 0;
}
.featurette {
overflow: hidden;
}
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
.featurette-heading {
font-size: 50px;
}
footer {
margin: 50px 0;
}
#media(max-width:1200px) {
.headline h1 {
font-size: 140px;
}
.headline h2 {
font-size: 63px;
}
.featurette-divider {
margin: 50px 0;
}
.featurette-image.pull-left {
margin-right: 20px;
}
.featurette-image.pull-right {
margin-left: 20px;
}
.featurette-heading {
font-size: 35px;
}
}
#media(max-width:991px) {
.headline h1 {
font-size: 105px;
}
.headline h2 {
font-size: 50px;
}
.featurette-divider {
margin: 40px 0;
}
.featurette-image {
max-width: 50%;
}
.featurette-image.pull-left {
margin-right: 10px;
}
.featurette-image.pull-right {
margin-left: 10px;
}
.featurette-heading {
font-size: 30px;
}
}
#media(max-width:768px) {
.container {
margin: 0 15px;
}
.featurette-divider {
margin: 40px 0;
}
.featurette-heading {
font-size: 25px;
}
}
#media(max-width:668px) {
.headline h1 {
font-size: 70px;
}
.headline h2 {
font-size: 32px;
}
.featurette-divider {
margin: 30px 0;
}
}
#media(max-width:640px) {
.headline {
padding: 75px 0 25px 0;
}
.headline h1 {
font-size: 60px;
}
.headline h2 {
font-size: 30px;
}
}
#media(max-width:375px) {
.featurette-divider {
margin: 10px 0;
}
.featurette-image {
max-width: 100%;
}
.featurette-image.pull-left {
margin-right: 0;
margin-bottom: 10px;
}
.featurette-image.pull-right {
margin-bottom: 10px;
margin-left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<!-- Make sure the <html> tag is set to the .full CSS class. Change the background image in the full.css file. -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Full - Start Bootstrap Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</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">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="full">
</div>
<!-- Page Content -->
<div class="container">
<hr class="featurette-divider">
<!-- First Featurette -->
<div class="featurette" id="about">
<img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
<h2 class="featurette-heading">This First Heading
<span class="text-muted">Will Catch Your Eye</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Second Featurette -->
<div class="featurette" id="services">
<img class="featurette-image img-circle img-responsive pull-left" src="http://placehold.it/500x500">
<h2 class="featurette-heading">The Second Heading
<span class="text-muted">Is Pretty Cool Too.</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Third Featurette -->
<div class="featurette" id="contact">
<img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
<h2 class="featurette-heading">The Third Heading
<span class="text-muted">Will Seal the Deal.</span>
</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In order to make a div full size in bootstrap you need to use the container-fluid class. You can get a full page width responsive image div by using the following code.
<div class="container-fluid" style="padding: 0">
<div class="banner img-responsive"
style="background-image: url('http://res.cloudinary.com/dhlsxlkrc/image/upload/v1447118604/spring-purple-flowers-1080p-hd_dg4ncq.jpg'); height: 400px;">
</div>
So put this code in where you have <div class="full"></div>