I'ma having trouble making the footer stick to the bottom. I don't want to make it fixed, I want it to stay at the bottom and not move when I scroll.
I found a solutions with bootstap but that messes up the order of the items on the page. I want the entire page to stay the way it is, just keep the footer at the bottom of the screen.
What I'm I doing wrong?
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
footer {
background-color: #f4e6f5;
height: 5rem;
width: 100%;
}
<body>
<nav class="navigationBar">
<img class="logoImg" src="photos/logo.png" alt="logo">
<h1 class="col-md-9">Japan Store</h1>
<div class="mediaIcons col-md-1">
<i class="fa-brands fa-facebook-square btn--facebook"></i>
<i class="fa-brands fa-instagram-square btn--instagram"></i>
<i class="fa-brands fa-twitter-square btn--twitter"></i>
</div>
</nav>
<nav class="filterContainer m-5 p-5 float-left d-flex flex-column shadow col-md-2 col-9">
<h2 class="pb-4">Filtrar Items</h6>
<div>
<input type="checkbox" id="todo" name="Todo" value="Todo">
<label for="todo">Todo</label>
</div>
<div>
<input type="checkbox" id="bebidas" name="bebidas" value="Bebidas">
<label for="bebidas">Bebidas</label>
</div>
<div>
<input type="checkbox" id="snacks" name="snacks" value="Snack">
<label for="snacks">Snacks</label>
</div>
<div>
<input type="checkbox" id="golosinas" name="golosinas" value="Golosinas">
<label for="golosinas">Golosinas</label>
</div>
<button type="button" class="filterButton btn btn-outline-dark mt-5">Filtrar</button>
</nav>
<div class="itemsContainer float-right col-md-9">
<div class="row">
<! -- The next code repeats 15 times (store items) -->
<div class="itemBox p-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="photos/Befco Kuriyama Bakauke Rice Crackers Hokkaido Corn.jpg" alt="..."/>
<div class="card-body p-4">
<div class="text-center">
<h5>Befco Kuriyama Bakauke Rice Crackers</h5>
<div class="d-flex justify-content-center small text-warning mb-2">
<div class="bi-star-fill"></div>
</div>
<span class="text-muted text-decoration-line-through"></span>
$18.00
</div>
</div>
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Agregar al carrito</a></div>
</div>
</div>
</div>
</div>
</div>
<div>
<footer class="col-md-12">
<p>This is my footer</p>
</footer>
</div>
</body>
without using position fixed you could use position absolute on the footer and relative on the body
body {
margin: 0;
padding: 0;
overflow-x: hidden;
position: relative; /*new
height: 100vh /*new
footer {
background-color: #f4e6f5;
height: 5rem;
width: 100%;
position: absolute; /*new
bottom: 0; /*new
I added a section to wrap the body content just for simplicity. And added some CSS to make the footer stick to bottom without scrolling or overlapping the content.
body {
margin: 0;
padding: 0;
height: calc(100vh - 100px); /*new*/
}
section {
overflow-x: hidden; /*new*/
height: calc(100vh - 100px); /*new*/
}
footer {
background-color: rgba(255,0,0,0.05);
height: 100px;
width: 100%;
position: fixed; /*new*/
bottom: 0; /*new*/
overflow: hidden; /*new*/
}
<body>
<section>
...content...
</section>
I hope it helps!
I'm trying to get my logo stick to the top of the page but I can't manage to do that.
I've tried with:
#logo {
position: sticky;
top:0
}
I also check if there's an overflow property but I've found nothing, I'm also using bootstrap framework version 5.
This is the part where I've put logo:
<div class="container" id="header">
<div class="row">
<div class="col-4 col-md-3 align-items-start d-flex">
<img src="../media/logos/mb-logo.png" id="logo" class="img-fluid" alt="logo">
</div>
<div class="col-7 col-md-8 align-items-end justify-content-end d-flex" id="menu_mobile">
<div class="row">
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">about me</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">competencies</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">portfolio</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">contact</span>
</div>
</div>
</div>
<div class="col justify-content-end align-items-center d-flex" id="menu_desk">
<span class="menu_item_desk">about me</span>
<span class="menu_item_desk">competencies</span>
<span class="menu_item_desk">portfolio</span>
<span class="menu_item_desk">contact</span>
</div>
</div>
</div>
Can someone help me?
edit: after trying the solution posted by #Fork:
<div class="container" id="header">
<div class="row">
<div class="col-4 col-md-3 align-items-start d-flex " >
<img src="../media/logos/mb-logo.png" id="logo" class="img-fluid position-fixed top-0" alt="logo">
</div>
The logo stay in position while I scroll down but other element changed of disposition. I managed to fix them adding some paddings and margin
edit 2: Here's the snippet and thanks to Fork now it works fine, another thing I would like to accomplish is that when the page is scrolled, the image goes up above the page for a tiny bit. I found this fiddle but is not exactly what i mean https://jsfiddle.net/z2r40y8c/. The image needs to go up and block at a specified amount of pixels.
html {
scroll-behavior: smooth;
}
body {
width: 100%;
height: 2000px
}
a{
text-decoration: none;
}
.container {
max-width: 100%;
padding: 0%;
margin: 0%;
}
body{
background-color: #161616;
}
#logo {
margin-left: 25px !important;
position: fixed;
top:0
}
.menu_mobile{
padding-top: 5%;
}
.menu_item {
font-family: 'sublimaextrabold';
font-size: 18px;
color: rgba(112,112,112,1);
padding-bottom: 5%;
cursor: pointer;
}
#media only screen and (min-width: 810px) {
#menu_mobile {
display: none !important;
}
}
#media only screen and (max-width: 810px) {
#menu_desk {
display: none !important;
}
}
.menu_item_desk {
font-family: 'sublimaextrabold';
color: rgba(112,112,112,1);
padding-left: 5%;
font-size: 30px;
cursor: pointer;
padding-top: 5%;
}
#media only screen and (max-width: 1197px) {
.menu_item_desk {
font-size: 24px;
}
}
#media only screen and (max-width: 993px) {
.menu_item_desk {
font-size: 20px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MB</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="../html/style.css">
</head>
<body ondragstart="return false;" ondrop="return false;">
<div class="container" id="header">
<div class="row">
<div class="col-sm-12">
<div class="container">
<div class="col-sm-3 align-items-start d-flex">
<img src="https://www.startpage.com/av/proxy-image?piurl=https%3A%2F%2Fdictionary.cambridge.org%2Ffr%2Fimages%2Fthumb%2Foblong_noun_002_25303.jpg%3Fversion%3D5.0.245&sp=1657096049T030f5c6f84a41f399845576d2d63d9849144e614f9e0077172506ae40946828e" id="logo" class="img-fluid position-fixed top-0" alt="logo">
</div>
<div class="col-sm-11 d-flex justify-content-end align-items-center " id="menu_desk">
<span class="menu_item_desk">section 1</span>
<span class="menu_item_desk">section 2</span>
<span class="menu_item_desk">section 3</span>
<span class="menu_item_desk">section 4</span>
</div>
<div class="col-11 align-items-end pt-3 justify-content-end d-flex" id="menu_mobile">
<div class="row">
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">section 1</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">section 2</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">section 3</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">section 4</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not sure why you just want the position: sticky; just on the logo rather than the whole navigation bar, but if you want to go that route, I would suggest using position: fixed; instead. Additionally, apply it to the div that's surrounding your image. Like so:
<div class="col-4 col-md-3 align-items-start d-flex position-fixed top-0">
<img src="../media/logos/mb-logo.png" id="logo" class="img-fluid" alt="logo">
</div>
Hope this helps :)
As far as I know the problem is, that for some constructions, like a bootstrap carousel, if you want to display it on a fullscreen, bootstrap requires the height of html to be set to 100%.
For position: sticky it is required to have no height set.
You could try making the nav sticky with JS:
const nav = document.querySelector('#nav');
let navTop = nav.offsetTop;
function fixedNav() {
if (window.scrollY >= navTop) {
nav.classList.add('fixed');
} else {
nav.classList.remove('fixed');
}
}
window.addEventListener('scroll', fixedNav);
and the CSS for the activated navbar:
#nav.fixed {
position: fixed;
box-shadow: 5px 5px 19px 0px rgba(0, 0, 0, 0.5);
}
#nav.fixed ul li img {
height: 36px;
}
#nav.fixed ul li a {
font-size: 14px;
}
I have a modal with fixed size. It contains multiple panes selectable with nav buttons. On one of the panes I have a div containing a grid of thumbnail images and a button at the bottom. Currently the images and the button extend far past the bottom of the modal window. I would like the button to remain at the bottom of the pane, and the remaining height of the pane be occupied with the thumbnail div.row, wherein if the image content does not fit inside of the div.row, the content scrolls.
My attempt at this was to make the pane flex-column, and make the div.row overflow-auto, but it has no effect it seems.
HTML
<div class="modal modal-base">
<div class="modal-overlay"></div>
<div class="modal-window">
<div class="close">×</div>
<div class="modal-content">
<div class="nav-wrapper">
<ul class="nav nav-pills flex-row" role="tablist">
<li class="nav-item">
<a class="nav-link mb-3 active" href="#" role="tab">Image List</a>
</li>
<li class="nav-item">
<a class="nav-link mb-3" href="#" role="tab">Upload</a>
</li>
</ul>
</div>
<div class="card shadow mb-0">
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active d-flex flex-column" role="tabpanel">
<div class="row overflow-auto">
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
</div>
<button type="button" class="btn btn-primary w-100 btn-lg">Insert</button>
</div>
<div class="tab-pane fade" role="tabpanel">
<div class="upload-widget"></div>
<div class="text-center mt-2">
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS (scss)
.modal {
&.modal-base {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&-overlay {
position: absolute;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
&-window {
background: #fff;
border-radius: 4px;
margin: auto;
position: relative;
width: 400px;
height: 300px;
z-index: 2001;
.close {
position: absolute;
right: 2px;
top: 2px;
color: gray;
font-size: 25px;
z-index: 2002;
}
}
&-content {
width: 100%;
height: 100%;
padding: 20px;
}
}
Codepen
Using Bootstrap 4 CSS framework. The JS code for the pane switching has been omitted since it is superfluous. I would like a solution that does not require me to fix the height of the div containing the images.
Note: this is a continuation of the question asked here. In that question I had simplified my setup to make everyone's life easier, and was able to get a working solution for that simplified setup, but it does not seem to work when translated over the actual setup I have, hence this question.
Thank you for looking at my question!
Just provide your div containing the card class with appropriate overflow property like this:
<div class="card shadow mb-0" style="overflow-x: hidden; overflow-y: scroll;">
You should include an overflow:auto; or do the css code at your containing element
containing element {
content:"";
display:table;
clear:both;
}
I solved this issue (with help from an online friend) over the course of a few hours, allow me to share the insight gained.
Essentially, flex is the way to go here. We need flex in the pane to keep the button on the bottom while the images take up the remaining space with scrolling overflow. We should also make enclosing divs have a height of 100% (.tab-content, .card-body).
When we get to the .card itself is where things get tricky. We want it to fill the parent, but applying h-100 here is not acceptable since it has a sibling, its height shouldn't be 100% of the parent content area, but rather 100% - height of the .nav-wrapper. It's close to what we want, but not quite.
Seems like we need another flex here to allow the .card to grow just into the remaining space, but if you set the flex here, it is not respected and the card extends way outside of the modal. The secret sauce is that by default, the .card with .d-flex is getting min-height:auto, and what this means is that it will not shrink smaller than the size of its content. Setting min-height:0 on the div.card solves the problem. Since I do not see any Bootstrap utility to do this, I've added one myself globally for this purpose to use in the future as well.
.d-flex > .flex-shrink-content {
min-height: 0;
}
The full code / demo can be found here for those interested:
Codepen
<div class="modal modal-base">
<div class="modal-overlay"></div>
<div class="modal-window">
<div class="close">×</div>
<div class="modal-content d-flex flex-column">
<div class="nav-wrapper flex-grow-1">
<ul class="nav nav-pills flex-row" role="tablist">
<li class="nav-item">
<a class="nav-link mb-3 active" href="#" role="tab">Image List</a>
</li>
<li class="nav-item">
<a class="nav-link mb-3" href="#" role="tab">Upload</a>
</li>
</ul>
</div>
<div class="card flex-shrink-content shadow">
<div class="card-body h-100">
<div class="tab-content h-100">
<div class="tab-pane fade show active d-flex flex-column h-100" role="tabpanel">
<div class="row flex-grow-1 overflow-auto">
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
</div>
<button type="button" class="btn btn-primary w-100 btn-lg mt-2">Insert</button>
</div>
<div class="tab-pane fade h-100" role="tabpanel">
<div class="upload-widget"></div>
<div class="text-center mt-2">
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.modal {
&.modal-base {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&-overlay {
position: absolute;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
&-window {
background: #fff;
border-radius: 4px;
margin: auto;
position: relative;
width: 400px;
height: 300px;
z-index: 2001;
.close {
position: absolute;
right: 2px;
top: 2px;
color: gray;
font-size: 25px;
z-index: 2002;
}
}
&-content {
width: 100%;
height: 100%;
padding: 20px;
}
}
.d-flex > .flex-shrink-content {
min-height: 0;
}
I'm helping somebody out with a website, I'm by no means an expert. This was a free bootstrap template that I've modified. Everything works perfectly in desktop mode. But when I test (using chrome) the responsive mode the in page links don't work as expected.
To make allowance for the sticky navbar I added a margin to my anchor. I had to use a media query to solve the issue, but it doesn't work with all of my links. The servicing, repairs and care packages work fine, it's the testimonials and contact us, that is causing issues. I've narrowed it down to the section, but can't figure out what is happening.
HTML:
<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="The leader in mobility scooter servicing and repairs in Norfolk and Suffolk. Committed to providing first class customer care, in your own home by friendly staff"/>
<meta name="author" content="CozyApps"/>
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"/>
<meta property="og:image" content="http://whitey012001.000webhostapp.com/img/og-img.jpg" />
<!-- <meta property="og:image:secure_url" content="https://whitey012001.000webhostapp.com/img/og-img.jpg" /> -->
<meta property="og:title" content="First for mobility scooter servicing & repairs across Norfolk & Suffolk" />
<meta property="og:description" content="Welcome to Mobility Services Direct, the leader in mobility scooter servicing and repairs across Norfolk and Suffolk. We proudly trade on our reputation and are committed to providing a first class service built around dedicated customer care." />
<meta property="og:image:height" content="300" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://whitey012001.000webhostapp.com" />
<title>Mobility Scooter Servicing & Repair across Norfolk and Suffolk</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png" />
<!-- Custom styles for this template -->
<link href="css/landing-page-v2.css" rel="stylesheet">
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "Organization",
"url": "http://whitey012001.000webhostapp.com",
"name": "Mobility Services Direct Ltd.",
"contactPoint": {
"#type": "ContactPoint",
"telephone": "+44-1502-450024",
"contactType": "Customer service"
}
}
</script>
</head>
<body data-spy="scroll" data-target="#menu" data-offset="40">
<!-- Header -->
<div class="container header">
<div class="row">
<div class="col-md text-center">
<img class="logo responsive-img" src="img/MSD_logo_Small.jpg" alt="MSD Logo">
</div>
<div class="col-md align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><i class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</p>
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class="container-fluid navbar-container sticky-top">
<nav class="navbar navbar-light navbar-expand-lg justify-content-center" id="menu">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#servicing">Servicing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repairs">Repairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#care">Care Package</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Menu -->
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">In home mobility scooter repairs from Mobility Services Direct</h1>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<span id="about" class="link"></span>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-emotsmile m-auto"></i>
</div>
<h3>Why We're Different</h3>
<p class="lead mb-0">Customer care is at the heart of everything we do. You won't want to turn to anybody else!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-wrench m-auto"></i>
</div>
<h3>What we do</h3>
<p class="lead mb-0">Fast, efficient and friendly… we’re your first choice for mobility scooter servicing and repairs.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-social-facebook m-auto fb-link"></i>
</div>
<h3>Swift Response</h3>
<p class="lead mb-0">Message us through Facebook Messenger for a swift response, or use other traditional methods</p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<span id="servicing" class="link"></span>
<div id="showcase-servicing" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Servicing</h2>
<p class="lead">Annual servicing is essential in order to help keep your mobility scooter problem-free, safe to drive and running efficiently.</p>
<p class="lead ">Our comprehensive service will typically be carried out at your home or place of work, whichever is most convenient for you.</p>
<p class="lead mb-0">Our experienced engineers will carry out a detailed test and inspection of all major parts and components, including any fine-tuning necessary to keep your scooter running comfortably and safely until the next service is due.</p>
</div>
</div>
<div class="row no-gutters">
<span id="repairs" class="link"></span>
<div id="showcase-repairs" class="col-lg-6 text-white showcase-img"></div>
<div class="col-lg-6 my-auto showcase-text bg-white">
<h2>Repairs</h2>
<p class="lead">Unfortunately, unexpected breakdowns, faults and damage can always occur and our aim is always to get you up and running again in the shortest possible time.</p>
<p class="lead">We know that you rely on your vehicle and will always try to be with you within 24 hours. Our skilled engineers will be able to carry out most repairs on site straight away, getting you mobile again in the quickest time.</p>
<p class="lead mb-0">From faulty lights and tyres, to battery and motor faults, getting you safely mobile again is our number one priority.</p>
</div>
</div>
<div class="row no-gutters">
<span id="care" class="link"></span>
<div id="showcase-care-package" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Care packages</h2>
<p class="lead">A mobility vehicle is more than just a mode of transport, it’s a means to independence and a better quality of life.</p>
<p class="lead">Our Care Packages are designed to give our customers peace of mind, knowing that not only will their scooter always be well maintained, but that they won’t be faced with unexpected call-out charges should a problem occur.</p>
<p class="lead mb-0">We don’t just care for mobility scooters, we care for our customers too. Contact us today for more information about our annual Care Packages.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class=" features-icons bg-light text-center">
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto"></i>
</div>
<h5>Mr Shaw, Gt Yarmouth</h5>
<p class="font-weight-light mb-0">"The gentlemen from Mobility Services Direct were absolutely wonderful. The arrived on time, work very quickly and efficiently, and did a superb job. Their costs were extremely reasonable and I wouldn't hesitate to recommend them "</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user-female m-auto"></i>
</div>
<h5>Mrs Osbourne. Spixworth</h5>
<p class="font-weight-light mb-0">"Mark and Paul were magnificent, After advising them I couldn't be without my scooter, they arrived the same day and fixed the fault almost immediately. And such a friendly service!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto fb-link"></i>
</div>
<h5>Mr Chester, Lowestoft</h5>
<p class="font-weight-light mb-0">"Mobility Services were excellent. After servicing my scooter, which I have had for five years now, it is now running better than ever. Very friendly and excellent value for money."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="contact" class="link call-to-action text-white text-center">
<!-- <span id="contact" class="link"></span>-->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Contact us now....</h2>
</div>
</div>
<div class="row">
<div class="col-md text-center align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><i class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</p>
</div>
</div>
<div class="col-md align-self-center text-center">
<!-- <img src="img/Van_1-JPG.jpg" alt="MSD Van" class="rounded MSDvan">-->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="MSD Van" class="rounded MSDvan" data-src="img/Van_1-JPG.jpg">
</div>
</div>
<div class="row form-container">
<div class="col contact-form">
<p>Or enter your details here...</p>
<form class="" id="contact-form" method="post" action="form.php">
<div id="form-result" class="alert"></div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Whats your name?" id="name" name="name">
<div class="form-feedback invalid-feedback">Please enter your name</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Please enter your email..." id="email" name="email">
<div class="form-feedback invalid-feedback">Please enter your email or phone number</div>
</div>
<div class="form-group">
<input type="tel" class="form-control form-control-lg" placeholder="Please enter your phone number..." id="phone" name="phone">
<div class="form-feedback invalid-feedback">Please enter your phone number or email</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-lg" placeholder="How can we help?" id="question" name="question" rows="4"></textarea>
<div class="form-feedback invalid-feedback">Please leave us a message</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-form">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item mr-3">
<button type="button" class="fb-link btn btn-primary">
<i class="fab fa-facebook-f"></i> Follow us</button>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Mobile Services Direct 2019. All Rights Reserved.</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<li class="list-inline-item">
Privacy Policy
</li>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
window.onload = init;
$('#form-result').hide();
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
$(".fb-link").click(function(){
window.location.href = "https://www.facebook.com/MobilityServicesDirect/";
});
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
// Delay image loading under the page fold
function init() {
$("#showcase-servicing").css("background-image", "url(img/bg-showcase-Servicing-v2.jpg)");
$("#showcase-repairs").css("background-image", "url(img/bg-showcase-Repairs-v2.jpg)");
$("#showcase-care-package").css("background-image", "url(img/bg-showcase-Care-Package-v2.jpg)");
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
}
}
}
</script>
</body>
</html>
CSS:
/*!
* Start Bootstrap - Landing Page v5.0.7 (https://startbootstrap.com/template-overviews/landing-page)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
*/
body{
font-family:Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
position: relative;
}
h1,h2,h3,h4,h5,h6{
font-family:Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700
}
header.masthead{
position:relative;background-color:#343a40;
background:url(../img/masthead-bw-new.jpg) no-repeat center center;
background-size:cover;
padding-top:8rem;
padding-bottom:8rem;
}
header.masthead .overlay{
position:absolute;background-color:#212529;
height:100%;
width:100%;
top:0;
left:0;
opacity:.3
}
header.masthead h1{
font-size:2rem
}
#media (max-width:1200px){
header.masthead{
background:url(../img/masthead-bw-1200-v2.jpg) no-repeat center center;
background-size:cover;
}
}
#media (max-width: 991px){
#servicing, #repairs, #care{
margin-top: 200px;
}
}
#media (max-width:490px){
.call-to-action a, .call-to-action i, .call-to-action p{
font-size: 1.2rem !important;
}
}
#media (max-width:390px){
.call-to-action a, .call-to-action i, .call-to-action p
.header a, .header i, .header p{
font-size: 1rem !important;
}
.call-to-action .MSDvan{
max-height: 200px;
}
.logo{
max-height: 130px;
}
}
#media (min-width:768px){
header.masthead{
padding-top:12rem;padding-bottom:12rem
}
header.masthead h1{
font-size:3rem
}
}
.showcase .showcase-text{
padding:3rem
}
.showcase .showcase-img{
min-height:30rem;
background-size:cover;
background-position: center center;
}
#media (min-width:768px){
.showcase .showcase-text{
padding:7rem
}
}
i{
color: #0E3A91;
}
.features-icons{
padding-top:7rem;
padding-bottom:7rem
}
.features-icons .features-icons-item{
max-width:20rem
}
.features-icons .features-icons-item .features-icons-icon{
height:7rem
}
.features-icons .features-icons-item .features-icons-icon i{
font-size:4.5rem
}
.features-icons .features-icons-item:hover .features-icons-icon i{
font-size:5rem
}
.call-to-action{
position:relative;background-color:#343a40;
background:url(../img/Mobility-Scooter_Home-Banner-v2.jpg) no-repeat center center;
background-size:cover;
padding-top:7rem;
padding-bottom:7rem
}
.call-to-action .overlay{
position:absolute;
background-color:#212529;
height:100%;
width:100%;
top:0;
left:0;
opacity:.3
}
.call-to-action a, .call-to-action i, .call-to-action p{
color: white;
font-size: 1.5rem
}
.call-to-action .MSDvan{
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
footer.footer{
padding-top:4rem;
padding-bottom:4rem
}
/* Header */
.logo{
padding: 25px;
height: 160px !important;
width: auto !important;
}
.header a{
color: #7EA2D3;
text-decoration: none;
}
.header a:hover{
color: red;
}
.header p{
font-size: 1.3em
}
.no-bottom-margin{
margin-bottom: 0;
}
/* Navbar */
.navbar-container{
padding: 0px !important;
}
nav{
background-color: white !important;
}
nav a{
font-size: 1.3em;
color: #7EA2D3 !important;
}
nav a:hover{
color: #0E3A91 !important;
}
nav .active, .active a{
color: #0E3A91 !important;
}
.nav-link{
margin-left: 20px;
margin-right: 20px;
}
.link{
margin-top: -50px;
}
.contact-form{
margin: 0 auto;
margin-top:2rem;
max-width: 800px;
}
.btn-primary{
background-color: #0E3A91;
border-color: #0E3A91;
}
.fab{
color: white;
}
.fb-link:hover{
cursor: pointer;
}
.bg-white{
background-color: white;
}
.form-feedback{
font-weight: bold !important;
font-size: 1.2rem !important;
text-align: left !important;
}
Hope this all makes sense, and somebody can make sense of it!
Thanks in advance!
Why do we observe this behavior?
the first 3 sections (servicing, repairs & care packages) are inside section and divs and they are used to get some margin on top so that we can see the h2 (which is a child of the ID) on the screen. However, the testimonials & contact us sections are not inside any section and divs; hence, different behaviour.
to see the exact effect, we change one class to see that the spacing is unset now...
#media (max-width: 991px)
#servicing, #repairs, #care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
what this means is that the spans (#servicing, #repairs, #care) are not enough on their own - we see the correct placement of the heading because the image is covering a lot of the portion which the span isn't doing;
How to resolve?
We have to add a span for the link and provide padding as you did for #servicing, #repairs, #care
since the scenario is different for (contact & testimonials) and there is no image to eat up the space, we'd have to add some css - the results for contact and testimonials are different because the hierarchy of elements within these sections is also different.
#media (max-width: 991px) {
#testimonials,
#contact {
padding-top: 14rem;
width: 100%;
display: block;
visibility: hidden;
}
}
Working snippet below:
window.onload = init;
$('#form-result').hide();
$(document).on('click', 'a[href^="#"]', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
$(".fb-link").click(function() {
window.location.href = "https://www.facebook.com/MobilityServicesDirect/";
});
$('.navbar-nav>li>a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
// Delay image loading under the page fold
function init() {
$("#showcase-servicing").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
$("#showcase-repairs").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
$("#showcase-care-package").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
}
}
}
body {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: relative;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700
}
header.masthead {
position: relative;
background-color: #343a40;
background: url(../img/masthead-bw-new.jpg) no-repeat center center;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
}
header.masthead .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3
}
header.masthead h1 {
font-size: 2rem
}
#media (max-width:1200px) {
header.masthead {
background: url(../img/masthead-bw-1200-v2.jpg) no-repeat center center;
background-size: cover;
}
}
#media (max-width: 991px) {
#servicing,
#repairs,
#care {
margin-top: 200px;
}
}
#media (max-width:490px) {
.call-to-action a,
.call-to-action i,
.call-to-action p {
font-size: 1.2rem !important;
}
}
#media (max-width:390px) {
.call-to-action a,
.call-to-action i,
.call-to-action p .header a,
.header i,
.header p {
font-size: 1rem !important;
}
.call-to-action .MSDvan {
max-height: 200px;
}
.logo {
max-height: 130px;
}
}
#media (min-width:768px) {
header.masthead {
padding-top: 12rem;
padding-bottom: 12rem
}
header.masthead h1 {
font-size: 3rem
}
}
.showcase .showcase-text {
padding: 3rem
}
.showcase .showcase-img {
min-height: 30rem;
background-size: cover;
background-position: center center;
}
#media (min-width:768px) {
.showcase .showcase-text {
padding: 7rem
}
}
i {
color: #0E3A91;
}
.features-icons {
padding-top: 7rem;
padding-bottom: 7rem
}
.features-icons .features-icons-item {
max-width: 20rem
}
.features-icons .features-icons-item .features-icons-icon {
height: 7rem
}
.features-icons .features-icons-item .features-icons-icon i {
font-size: 4.5rem
}
.features-icons .features-icons-item:hover .features-icons-icon i {
font-size: 5rem
}
.call-to-action {
position: relative;
background-color: #343a40;
background: url(../img/Mobility-Scooter_Home-Banner-v2.jpg) no-repeat center center;
background-size: cover;
padding-top: 7rem;
padding-bottom: 7rem
}
.call-to-action .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3
}
.call-to-action a,
.call-to-action i,
.call-to-action p {
color: white;
font-size: 1.5rem
}
.call-to-action .MSDvan {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
footer.footer {
padding-top: 4rem;
padding-bottom: 4rem
}
/* Header */
.logo {
padding: 25px;
height: 160px !important;
width: auto !important;
}
.header a {
color: #7EA2D3;
text-decoration: none;
}
.header a:hover {
color: red;
}
.header p {
font-size: 1.3em
}
.no-bottom-margin {
margin-bottom: 0;
}
/* Navbar */
.navbar-container {
padding: 0px !important;
}
nav {
background-color: white !important;
}
nav a {
font-size: 1.3em;
color: #7EA2D3 !important;
}
nav a:hover {
color: #0E3A91 !important;
}
nav .active,
.active a {
color: #0E3A91 !important;
}
.nav-link {
margin-left: 20px;
margin-right: 20px;
}
.link {
margin-top: -50px;
}
.contact-form {
margin: 0 auto;
margin-top: 2rem;
max-width: 800px;
}
.btn-primary {
background-color: #0E3A91;
border-color: #0E3A91;
}
.fab {
color: white;
}
.fb-link:hover {
cursor: pointer;
}
.bg-white {
background-color: white;
}
.form-feedback {
font-weight: bold !important;
font-size: 1.2rem !important;
text-align: left !important;
}
/*
#media (max-width: 991px) {
#servicing,
#repairs,
#care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
}
*/
#media (max-width: 991px) {
#testimonials,
#contact {
padding-top: 14rem;
width: 100%;
display: block;
visibility: hidden;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target="#menu" data-offset="40">
<!-- Header -->
<div class="container header">
<div class="row">
<div class="col-md text-center">
<img class="logo responsive-img" src="img/MSD_logo_Small.jpg" alt="MSD Logo">
</div>
<div class="col-md align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><a href="mailto:support#mobilityservicedirect.co.uk"><i
class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</a></p>
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class="container-fluid navbar-container sticky-top">
<nav class="navbar navbar-light navbar-expand-lg justify-content-center" id="menu">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#servicing">Servicing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repairs">Repairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#care">Care Package</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Menu -->
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">In home mobility scooter repairs from Mobility Services Direct</h1>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<span id="about" class="link"></span>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-emotsmile m-auto"></i>
</div>
<h3>Why We're Different</h3>
<p class="lead mb-0">Customer care is at the heart of everything we do. You won't want to turn to anybody else!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-wrench m-auto"></i>
</div>
<h3>What we do</h3>
<p class="lead mb-0">Fast, efficient and friendly… we’re your first choice for mobility scooter servicing and repairs.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-social-facebook m-auto fb-link"></i>
</div>
<h3>Swift Response</h3>
<p class="lead mb-0">Message us through Facebook Messenger for a swift response, or use other traditional methods</p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<span id="servicing" class="link"></span>
<div id="showcase-servicing" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Servicing</h2>
<p class="lead">Annual servicing is essential in order to help keep your mobility scooter problem-free, safe to drive and running efficiently.</p>
<p class="lead ">Our comprehensive service will typically be carried out at your home or place of work, whichever is most convenient for you.</p>
<p class="lead mb-0">Our experienced engineers will carry out a detailed test and inspection of all major parts and components, including any fine-tuning necessary to keep your scooter running comfortably and safely until the next service is due.</p>
</div>
</div>
<div class="row no-gutters">
<span id="repairs" class="link"></span>
<div id="showcase-repairs" class="col-lg-6 text-white showcase-img"></div>
<div class="col-lg-6 my-auto showcase-text bg-white">
<h2>Repairs</h2>
<p class="lead">Unfortunately, unexpected breakdowns, faults and damage can always occur and our aim is always to get you up and running again in the shortest possible time.</p>
<p class="lead">We know that you rely on your vehicle and will always try to be with you within 24 hours. Our skilled engineers will be able to carry out most repairs on site straight away, getting you mobile again in the quickest time.</p>
<p class="lead mb-0">From faulty lights and tyres, to battery and motor faults, getting you safely mobile again is our number one priority.</p>
</div>
</div>
<div class="row no-gutters">
<span id="care" class="link"></span>
<div id="showcase-care-package" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Care packages</h2>
<p class="lead">A mobility vehicle is more than just a mode of transport, it’s a means to independence and a better quality of life.</p>
<p class="lead">Our Care Packages are designed to give our customers peace of mind, knowing that not only will their scooter always be well maintained, but that they won’t be faced with unexpected call-out charges should a problem occur.</p>
<p class="lead mb-0">We don’t just care for mobility scooters, we care for our customers too. Contact us today for more information about our annual Care Packages.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<span id="testimonials" class="link"></span>
<section class=" features-icons bg-light text-center">
<span class="link"></span>
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto"></i>
</div>
<h5>Mr Shaw, Gt Yarmouth</h5>
<p class="font-weight-light mb-0">"The gentlemen from Mobility Services Direct were absolutely wonderful. The arrived on time, work very quickly and efficiently, and did a superb job. Their costs were extremely reasonable and I wouldn't hesitate to recommend them "</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user-female m-auto"></i>
</div>
<h5>Mrs Osbourne. Spixworth</h5>
<p class="font-weight-light mb-0">"Mark and Paul were magnificent, After advising them I couldn't be without my scooter, they arrived the same day and fixed the fault almost immediately. And such a friendly service!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto fb-link"></i>
</div>
<h5>Mr Chester, Lowestoft</h5>
<p class="font-weight-light mb-0">"Mobility Services were excellent. After servicing my scooter, which I have had for five years now, it is now running better than ever. Very friendly and excellent value for money."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<span id="contact"></span>
<section class="link call-to-action text-white text-center">
<!-- <span id="contact" class="link"></span>-->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Contact us now....</h2>
</div>
</div>
<div class="row">
<div class="col-md text-center align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><a href="mailto:support#mobilityservicedirect.co.uk"><i
class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</a></p>
</div>
</div>
<div class="col-md align-self-center text-center">
<!-- <img src="img/Van_1-JPG.jpg" alt="MSD Van" class="rounded MSDvan">-->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="MSD Van" class="rounded MSDvan" data-src="img/Van_1-JPG.jpg">
</div>
</div>
<div class="row form-container">
<div class="col contact-form">
<p>Or enter your details here...</p>
<form class="" id="contact-form" method="post" action="form.php">
<div id="form-result" class="alert"></div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Whats your name?" id="name" name="name">
<div class="form-feedback invalid-feedback">Please enter your name</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Please enter your email..." id="email" name="email">
<div class="form-feedback invalid-feedback">Please enter your email or phone number</div>
</div>
<div class="form-group">
<input type="tel" class="form-control form-control-lg" placeholder="Please enter your phone number..." id="phone" name="phone">
<div class="form-feedback invalid-feedback">Please enter your phone number or email</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-lg" placeholder="How can we help?" id="question" name="question" rows="4"></textarea>
<div class="form-feedback invalid-feedback">Please leave us a message</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-form">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item mr-3">
<button type="button" class="fb-link btn btn-primary">
<i class="fab fa-facebook-f"></i> Follow us</button>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Mobile Services Direct 2019. All Rights Reserved.
</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<li class="list-inline-item">
Privacy Policy
</li>
</div>
</div>
</div>
</footer>
sorry , still not work for me,
so i add script to link :
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
<script>
function load(x)
{
window.location.href= x+'.php';
}
</script>
I have three .well items on my homepage, and I don't want to fill them with content just to ensure they size correctly on every screen. Ideally I'd like a CSS solution that can specify their height and width match each other regardless of which screen they are being displayed on (and also that they stack correctly when the window shrinks.
/* CSS used here will be applied after bootstrap.css */
#benefit-box-1 {
padding-top: 1em;
display: inline-block;
text-align: center;
float: left;
}
#benefit-box {
padding-top: 1em;
display: inline-block;
text-align: center;
float: left;
}
#benefit-box-3 {
padding-top: 1em;
display: inline-block;
text-align: center;
float: left;
}
#benefit-row-2 {
margin-top: 1px;
}
.icon-div {
display:inline-block;
text-align: centre;
vertical-align: bottom;
width: 100%;
height: 100%;
}
.icon-div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="benefit-row">
<div class="col-md-4" id="benefit-box-1">
<div class="well">
<div class="icon-div">
<i class="fa fa-users fa-4x"></i>
<h1>Collaborate in your sales meetings.</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box">
<div class="well">
<div class="icon-div">
<i class="fa fa-map-signs fa-4x"></i>
<h1>Direct your team to the best deals</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box-3">
<div class="well">
<div class="icon-div">
<i class="fa fa-filter fa-4x"></i>
<h1>Trust your pipeline forecast</h1>
</div>
</div>
</div>
</div>
<div class="row" id="benefit-row-2">
<div class="col-md-4" id="benefit-box-1">
<div class="well">
<div class="icon-div">
<i class="fa fa-bullseye fa-4x"></i>
<h1>Helps you target the right contacts</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box">
<div class="well">
<div class="icon-div">
<i class="fa fa-graduation-cap fa-4x"></i>
<h1>In-built sales training</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box-3">
<div class="well">
<div class="icon-div">
<i class="fa fa-line-chart fa-4x"></i>
<h1>Smash your sales targets</h1>
</div>
</div>
</div>
</div>
</div>
I made a bootply here: My attempts
I managed to solve this issue by dropping the wells/bootstrap standard responsive behaviour and adopting some of my own using the Flex methods. If anyone is interested here's the bootply: Flex CSS classes to make responsive pages
I used the info present here in order to make this work - standard behaviour on my boxes is to have 33% of the screen width on large devices, 50% on medium devices and 100% on small devices. Works a charm.
From what I can tell it's not going to be very useful on older browsers (I don't particularly care for my project) but on modern browsers it works just as planned.