CodeZinx
Reputation: 49
Big Gap Between Slideshow and Promotion Area - HTML/CSS
Like the title said, there is a big gap between the slideshow and the promotional area.
Just to demonstrate my problem, here is a code snippet:
$(document).ready(function() {
var slideIndex = 0;
var slideInterval = setInterval(function() {
next();
}, 3000);
$("#prev").click(function() {
prev();
clearInterval(slideInterval);
});
$("#next").click(function() {
next();
clearInterval(slideInterval);
});
function prev() {
if(slideIndex < 0) {
slideIndex = $(".slides").length - 1 - 1;
}
else {
slideIndex--;
}
showSlides();
}
function next() {
if(slideIndex > $(".slides").length - 1 - 1) {
slideIndex = 0;
}
else {
slideIndex++;
}
showSlides();
}
function showSlides() {
$(".slides").not($(".slides")[slideIndex]).each(function() {
$(this).removeClass("showing");
});
$(".slides").eq(slideIndex).addClass("showing");
}
});@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');
body {
font-family: "Roboto";
background-color: #525252;
margin: 0;
color: white;
}
#logoContainer {
background-image: url("https://www.whitegrass.ca/images/grass.png");
width: 100%;
height: 155px;
margin: 0;
}
#logo {
width: 305.25px;
height: 107.25px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
}
.lFix {
clear: left;
display: block;
}
#mainMenu ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
background-color: #454545;
}
#mainMenu a {
text-decoration: none;
}
#mainMenu li {
color: white;
display: inline-block;
padding: 18px;
margin: 0;
background-color: #454545;
transition: background-color 0.5s, border 0.5s;
-webkit-transition: background-color 0.5s, border 0.5s;
-moz-transition: background-color 0.5s, border 0.5s;
-o-transition: background-color 0.5s, border 0.5s;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
border-bottom: 1px solid #454545;
}
#mainMenu li:hover {
background-color: #656565;
border-bottom: 1px solid #08f;
}
#mainMenu #current {
background-color: #656565;
border-bottom: 1px solid #08f;
}
#mobileMainMenu {
/* height: 400px; */
position: absolute;
width: 100%;
opacity: 0;
z-index: -1;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#mobileMainMenu ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
background-color: #454545;
}
#mobileMainMenu a {
text-decoration: none;
}
#menuButton {
color: white;
display: none;
padding: 18px;
margin: 0;
text-align: center;
background-color: #454545;
transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
}
#menuButton:hover {
background-color: #656565;
cursor: pointer;
}
#mobileMainMenu li {
color: white;
display: block;
padding: 18px;
margin: 0;
background-color: #454545;
transition: background-color 0.5s, border 0.5s;
-webkit-transition: background-color 0.5s, border 0.5s;
-moz-transition: background-color 0.5s, border 0.5s;
-o-transition: background-color 0.5s, border 0.5s;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
border-left: 2px solid #454545;
}
#mobileMainMenu li:hover {
background-color: #656565;
border-left: 2px solid #08f;
}
#mobileMainMenu #current {
background-color: #656565;
border-left: 2px solid #08f;
}
@media (max-width: 804px) {
#mainMenu li {
display: none;
}
#menuButton {
display: block;
}
}
@media (min-width: 805px) {
#mobileMainMenu li {
display: none !important;
}
}
#menuCheck {
display: none;
}
#menuCheck:checked ~ #mobileMainMenu {
opacity: 1;
z-index: 5;
}
.space {
padding: 2px;
}
button {
display: block;
border: none;
background-color: #0074c2;
padding: 17px;
font-size: 1em;
font-family: roboto;
color: white;
border-radius: 1.5px;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
button:hover {
background-color: #005d9c;
cursor: pointer;
}
button:focus {
outline: none;
}
.buttonLink {
text-decoration: none;
}
.textarea {
margin: 25px;
margin-top: 10px;
}
.titlearea {
padding: 18px;
background-color: #08f;
display: block !important;
}
.titlearea h1 {
text-align: center;
font-size: 2.5em;
margin: 0;
padding: 0;
}
#footer {
display: block;
background-color: #454545;
clear: both;
position: relative;
padding: 25px;
height: 25px;
}
#footer p {
text-align: center;
position: relative;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#footer a {
text-decoration: none;
color: white;
transition: color 0.5s;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
}
#footer a:hover {
color: #08f;
cursor: pointer;
}
#footerSpace::after {
content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
}
#footerSpace2::after {
content: "\00a0\00a0\00a0\00a0\00a0";
}
.im {
font-size: 1em !important;
}
#mobileFooter {
display: none;
background-color: #454545;
clear: both;
position: relative;
padding: 40px;
height: 40px;
}
#mobileFooter p {
text-align: center;
position: relative;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#mobileFooter a {
text-decoration: none;
color: white;
transition: color 0.5s;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
}
#mobileFooter a:hover {
color: #08f;
cursor: pointer;
}
@media screen and (max-width: 1210px) {
#footer {
display: none;
}
#mobileFooter {
display: block;
}
}
@media screen and (max-width: 1066px) {
#mobileFooter {
margin-top: 20px;
}
}
@media screen and (max-width: 652px) {
#mobileFooter {
font-size: 0.85em;
}
}
#slide1 {
background-image: url("https://whitegrass.ca/images/img/slider/slider-bg-1");
}
#slide2 {
background-image: url("https://whitegrass.ca/images/img/slider/slider-bg-2");
}
#slide3 {
background-image: url("https://whitegrass.ca/images/img/slider/slider-bg-3");
}
#slideshow {
position: relative;
z-index: 1;
height: 478px;
width: 100%;
}
.slides {
display: block;
width: 100%;
height: 478px;
position: absolute;
opacity: 0;
z-index: 1;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
}
.showing {
opacity: 1 !important;
z-index: 2 !important;
}
.slideText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideText * {
text-align: center;
}
.slideText h1 {
font-size: 2.5em;
text-transform: uppercase;
background-color: rgba(0, 0, 0, 50%);
padding: 5px;
}
.slideText p {
font-size: 1em;
/* background-color: rgba(0, 0, 0, 50%); */
padding: 3px;
}
.slideText button {
position: relative;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
@media (max-width: 1206px) {
.slideText h1 {
font-size: 2.25em;
}
}
@media (max-width: 1087px) {
.slideText h1 {
font-size: 2em;
}
}
@media (max-width: 969px) {
.slideText h1 {
font-size: 1.75em;
}
.slideText p {
font-size: 0.9em;
}
.slideText button {
padding: 13px;
font-size: 0.9em;
}
}
#prev, #next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
padding: 12px;
transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
z-index: 3;
}
#next {
right: 0;
}
#prev:hover, #next:hover {
background-color: rgba(0, 0, 0, 50%);
}
#intro {
display: block;
margin-top: 500px;
padding-bottom: 30px;
}
#intro .introCat {
display: block;
float: left;
padding-left: 25px;
padding-right: 25px;
width: calc(100% / 3.5);
margin-left: auto;
margin-right: auto;
}
.introCat h3 {
text-align: center;
}
.introCat p {
text-align: center;
max-width: 256px;
overflow-wrap: break-word;
word-wrap: break-word;
margin-left: auto;
margin-right: auto;
}
.introCat img {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
}
.introCat .introImgCont {
display: block;
width: 142px;
height: 142px;
margin-left: auto;
margin-right: auto;
background-color: #656565;
border-radius: 50%;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
.introCat:hover .introImgCont {
background-color: #0074c2;
}
@media (max-width: 1066px) {
.introCat {
width: 90% !important;
float: none !important;
padding-bottom: 16px !important;
}
#intro {
padding-bottom: 0 !important;
}
}
@media (max-width: 512px) {
.introCat {
width: 85% !important;
float: none !important;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>Home | White Grass Builder & Developer</title>
<link rel="stylesheet" href="https://cdn.iconmonstr.com/1.3.0/css/iconmonstr-iconic-font.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
</head>
<body>
<div id="logoContainer">
<a href="index.html"><img id="logo" alt="White Grass" src="https://www.whitegrass.ca/images/logo-text.png" /></a>
<span class="lFix"></span>
</div>
<nav id="mainMenu">
<ul>
<a href="index.html"><li id="current">Home</li></a>
<a href="about.html"><li>About</li></a>
<a href="services.html"><li>Services</li></a>
<a href="portfolio.html"><li>Portfolio</li></a>
<a href="invop.html"><li>Investment Oppertunity</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</nav>
<input type="checkbox" id="menuCheck" />
<label for="menuCheck"><div id="menuButton">
<img alt="Menu" src="images/mmm/menu.png" />
</div></label>
<nav id="mobileMainMenu">
<ul>
<a href="index.html"><li id="current">Home</li></a>
<a href="about.html"><li>About</li></a>
<a href="services.html"><li>Services</li></a>
<a href="portfolio.html"><li>Portfolio</li></a>
<a href="invop.html"><li>Investment Oppertunity</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</nav>
<div class="space"></div>
<div id="slideshow">
<div class="slides showing" id="slide1">
<div class="slideText">
<h1>Welcome to White Grass</h1>
<p>Your complete solution to home building</p>
<a class="buttonLink" href="portfolio.html"><button>See Our Portfolio</button></a>
</div>
</div>
<div class="slides" id="slide2">
<div class="slideText">
<h1>Custom Home Builder</h1>
<p>Customer satisfaction is our top priority</p>
</div>
</div>
<div class="slides" id="slide3">
<div class="slideText">
<h1>Professional & Experienced</h1>
<p>A history of exceptional homes</p>
<a class="buttonLink" href="contact.html"><button>Contact Us Now</button></a>
</div>
</div>
<img id="prev" alt="Previous Slide" src="images/slideshow/leftarrow.png" />
<img id="next" alt="Next Slide" src="images/slideshow/rightarrow.png" />
</div>
<div id="intro">
<div class="introCat">
<div class="introImgCont">
<img alt="House" src="images/intro/house.png" />
</div>
<h3>Professional</h3>
<p>We provide a complete set of construction services to ensure a hassle free home building experience.</p>
</div>
<div class="introCat">
<div class="introImgCont">
<img alt="Checkbox" src="images/intro/checkbox.png" />
</div>
<h3>Customer Orientated</h3>
<p>We cater to each customer's unique requirements to build their dream home.</p>
</div>
<div class="introCat">
<div class="introImgCont">
<img alt="Thumbs Up" src="images/intro/thumbsup.png" />
</div>
<h3>Experienced</h3>
<p>A proven track record in real estate construction, sales and investment.</p>
</div>
</div>
<div id="footer">
<p>Copyright © 2021 – White Grass Builder and Developer Inc. All rights reserved.<span id="footerSpace"></span><a href="mailto:[email protected]"><i class="im im-mail"></i> [email protected]</a><span id="footerSpace2"></span><a href="tel:+1-647-990-7052"><i class="im im-phone"></i> +1-647-990-7052</a></p>
</div>
<div id="mobileFooter">
<p>Copyright © 2021 – White Grass Builder and Developer Inc. All rights reserved.<a href="mailto:[email protected]"></p>
<p><i class="im im-mail"></i> [email protected]</a><span id="footerSpace2"></span><a href="tel:+1-647-990-7052"><i class="im im-phone"></i> +1-647-990-7052</a></p>
</div>
</body>
</html>And a link to my CodePen to view the problem: https://codepen.io/codezinx/pen/yLVOPrX
My question is how do I get rid of the gap?
NOTE: You might notice that some images are missing. That's because I have a lot of my images locally stored on my PC and I somehow failed to embed them. The other images come from the old version of the website I'm currently developing (I'm developing the new one basically and the images are linked to the old website). Next, I am showing the JavaScript so that the slideshow actually functions. Finally, links do not work here (so basically clicking the links will most probably give you an error 404).
Upvotes: 0
Views: 256
Answers (2)
Lynel Hudson
Reputation: 2405
Reduce #intro { margin-top: 500px } to a smaller value. I used 50px and commented on the line in question within the CSS window of the snippet.
$(document).ready(function() {
var slideIndex = 0;
var slideInterval = setInterval(function() {
next();
}, 3000);
$("#prev").click(function() {
prev();
clearInterval(slideInterval);
});
$("#next").click(function() {
next();
clearInterval(slideInterval);
});
function prev() {
if(slideIndex < 0) {
slideIndex = $(".slides").length - 1 - 1;
}
else {
slideIndex--;
}
showSlides();
}
function next() {
if(slideIndex > $(".slides").length - 1 - 1) {
slideIndex = 0;
}
else {
slideIndex++;
}
showSlides();
}
function showSlides() {
$(".slides").not($(".slides")[slideIndex]).each(function() {
$(this).removeClass("showing");
});
$(".slides").eq(slideIndex).addClass("showing");
}
});@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');
body {
font-family: "Roboto";
background-color: #525252;
margin: 0;
color: white;
}
#logoContainer {
background-image: url("https://www.whitegrass.ca/images/grass.png");
width: 100%;
height: 155px;
margin: 0;
}
#logo {
width: 305.25px;
height: 107.25px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
}
.lFix {
clear: left;
display: block;
}
#mainMenu ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
background-color: #454545;
}
#mainMenu a {
text-decoration: none;
}
#mainMenu li {
color: white;
display: inline-block;
padding: 18px;
margin: 0;
background-color: #454545;
transition: background-color 0.5s, border 0.5s;
-webkit-transition: background-color 0.5s, border 0.5s;
-moz-transition: background-color 0.5s, border 0.5s;
-o-transition: background-color 0.5s, border 0.5s;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
border-bottom: 1px solid #454545;
}
#mainMenu li:hover {
background-color: #656565;
border-bottom: 1px solid #08f;
}
#mainMenu #current {
background-color: #656565;
border-bottom: 1px solid #08f;
}
#mobileMainMenu {
/* height: 400px; */
position: absolute;
width: 100%;
opacity: 0;
z-index: -1;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#mobileMainMenu ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
background-color: #454545;
}
#mobileMainMenu a {
text-decoration: none;
}
#menuButton {
color: white;
display: none;
padding: 18px;
margin: 0;
text-align: center;
background-color: #454545;
transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
}
#menuButton:hover {
background-color: #656565;
cursor: pointer;
}
#mobileMainMenu li {
color: white;
display: block;
padding: 18px;
margin: 0;
background-color: #454545;
transition: background-color 0.5s, border 0.5s;
-webkit-transition: background-color 0.5s, border 0.5s;
-moz-transition: background-color 0.5s, border 0.5s;
-o-transition: background-color 0.5s, border 0.5s;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
border-left: 2px solid #454545;
}
#mobileMainMenu li:hover {
background-color: #656565;
border-left: 2px solid #08f;
}
#mobileMainMenu #current {
background-color: #656565;
border-left: 2px solid #08f;
}
@media (max-width: 804px) {
#mainMenu li {
display: none;
}
#menuButton {
display: block;
}
}
@media (min-width: 805px) {
#mobileMainMenu li {
display: none !important;
}
}
#menuCheck {
display: none;
}
#menuCheck:checked ~ #mobileMainMenu {
opacity: 1;
z-index: 5;
}
.space {
padding: 2px;
}
button {
display: block;
border: none;
background-color: #0074c2;
padding: 17px;
font-size: 1em;
font-family: roboto;
color: white;
border-radius: 1.5px;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
button:hover {
background-color: #005d9c;
cursor: pointer;
}
button:focus {
outline: none;
}
.buttonLink {
text-decoration: none;
}
.textarea {
margin: 25px;
margin-top: 10px;
}
.titlearea {
padding: 18px;
background-color: #08f;
display: block !important;
}
.titlearea h1 {
text-align: center;
font-size: 2.5em;
margin: 0;
padding: 0;
}
#footer {
display: block;
background-color: #454545;
clear: both;
position: relative;
padding: 25px;
height: 25px;
}
#footer p {
text-align: center;
position: relative;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#footer a {
text-decoration: none;
color: white;
transition: color 0.5s;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
}
#footer a:hover {
color: #08f;
cursor: pointer;
}
#footerSpace::after {
content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
}
#footerSpace2::after {
content: "\00a0\00a0\00a0\00a0\00a0";
}
.im {
font-size: 1em !important;
}
#mobileFooter {
display: none;
background-color: #454545;
clear: both;
position: relative;
padding: 40px;
height: 40px;
}
#mobileFooter p {
text-align: center;
position: relative;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#mobileFooter a {
text-decoration: none;
color: white;
transition: color 0.5s;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
}
#mobileFooter a:hover {
color: #08f;
cursor: pointer;
}
@media screen and (max-width: 1210px) {
#footer {
display: none;
}
#mobileFooter {
display: block;
}
}
@media screen and (max-width: 1066px) {
#mobileFooter {
margin-top: 20px;
}
}
@media screen and (max-width: 652px) {
#mobileFooter {
font-size: 0.85em;
}
}
#slide1 {
background-image: url("https://whitegrass.ca/images/img/slider/slider-bg-1");
}
#slide2 {
background-image: url("https://whitegrass.ca/images/img/slider/slider-bg-2");
}
#slide3 {
background-image: url("https://whitegrass.ca/images/img/slider/slider-bg-3");
}
#slideshow {
position: relative;
z-index: 1;
height: 478px;
width: 100%;
}
.slides {
display: block;
width: 100%;
height: 478px;
position: absolute;
opacity: 0;
z-index: 1;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
}
.showing {
opacity: 1 !important;
z-index: 2 !important;
}
.slideText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideText * {
text-align: center;
}
.slideText h1 {
font-size: 2.5em;
text-transform: uppercase;
background-color: rgba(0, 0, 0, 50%);
padding: 5px;
}
.slideText p {
font-size: 1em;
/* background-color: rgba(0, 0, 0, 50%); */
padding: 3px;
}
.slideText button {
position: relative;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
@media (max-width: 1206px) {
.slideText h1 {
font-size: 2.25em;
}
}
@media (max-width: 1087px) {
.slideText h1 {
font-size: 2em;
}
}
@media (max-width: 969px) {
.slideText h1 {
font-size: 1.75em;
}
.slideText p {
font-size: 0.9em;
}
.slideText button {
padding: 13px;
font-size: 0.9em;
}
}
#prev, #next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
padding: 12px;
transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
z-index: 3;
}
#next {
right: 0;
}
#prev:hover, #next:hover {
background-color: rgba(0, 0, 0, 50%);
}
#intro {
display: block;
margin-top: 50px; /* reduce from 500px */
padding-bottom: 30px;
}
#intro .introCat {
display: block;
float: left;
padding-left: 25px;
padding-right: 25px;
width: calc(100% / 3.5);
margin-left: auto;
margin-right: auto;
}
.introCat h3 {
text-align: center;
}
.introCat p {
text-align: center;
max-width: 256px;
overflow-wrap: break-word;
word-wrap: break-word;
margin-left: auto;
margin-right: auto;
}
.introCat img {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
}
.introCat .introImgCont {
display: block;
width: 142px;
height: 142px;
margin-left: auto;
margin-right: auto;
background-color: #656565;
border-radius: 50%;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
.introCat:hover .introImgCont {
background-color: #0074c2;
}
@media (max-width: 1066px) {
.introCat {
width: 90% !important;
float: none !important;
padding-bottom: 16px !important;
}
#intro {
padding-bottom: 0 !important;
}
}
@media (max-width: 512px) {
.introCat {
width: 85% !important;
float: none !important;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>Home | White Grass Builder & Developer</title>
<link rel="stylesheet" href="https://cdn.iconmonstr.com/1.3.0/css/iconmonstr-iconic-font.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
</head>
<body>
<div id="logoContainer">
<a href="index.html"><img id="logo" alt="White Grass" src="https://www.whitegrass.ca/images/logo-text.png" /></a>
<span class="lFix"></span>
</div>
<nav id="mainMenu">
<ul>
<a href="index.html"><li id="current">Home</li></a>
<a href="about.html"><li>About</li></a>
<a href="services.html"><li>Services</li></a>
<a href="portfolio.html"><li>Portfolio</li></a>
<a href="invop.html"><li>Investment Oppertunity</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</nav>
<input type="checkbox" id="menuCheck" />
<label for="menuCheck"><div id="menuButton">
<img alt="Menu" src="images/mmm/menu.png" />
</div></label>
<nav id="mobileMainMenu">
<ul>
<a href="index.html"><li id="current">Home</li></a>
<a href="about.html"><li>About</li></a>
<a href="services.html"><li>Services</li></a>
<a href="portfolio.html"><li>Portfolio</li></a>
<a href="invop.html"><li>Investment Oppertunity</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</nav>
<div class="space"></div>
<div id="slideshow">
<div class="slides showing" id="slide1">
<div class="slideText">
<h1>Welcome to White Grass</h1>
<p>Your complete solution to home building</p>
<a class="buttonLink" href="portfolio.html"><button>See Our Portfolio</button></a>
</div>
</div>
<div class="slides" id="slide2">
<div class="slideText">
<h1>Custom Home Builder</h1>
<p>Customer satisfaction is our top priority</p>
</div>
</div>
<div class="slides" id="slide3">
<div class="slideText">
<h1>Professional & Experienced</h1>
<p>A history of exceptional homes</p>
<a class="buttonLink" href="contact.html"><button>Contact Us Now</button></a>
</div>
</div>
<img id="prev" alt="Previous Slide" src="images/slideshow/leftarrow.png" />
<img id="next" alt="Next Slide" src="images/slideshow/rightarrow.png" />
</div>
<div id="intro">
<div class="introCat">
<div class="introImgCont">
<img alt="House" src="images/intro/house.png" />
</div>
<h3>Professional</h3>
<p>We provide a complete set of construction services to ensure a hassle free home building experience.</p>
</div>
<div class="introCat">
<div class="introImgCont">
<img alt="Checkbox" src="images/intro/checkbox.png" />
</div>
<h3>Customer Orientated</h3>
<p>We cater to each customer's unique requirements to build their dream home.</p>
</div>
<div class="introCat">
<div class="introImgCont">
<img alt="Thumbs Up" src="images/intro/thumbsup.png" />
</div>
<h3>Experienced</h3>
<p>A proven track record in real estate construction, sales and investment.</p>
</div>
</div>
<div id="footer">
<p>Copyright © 2021 – White Grass Builder and Developer Inc. All rights reserved.<span id="footerSpace"></span><a href="mailto:[email protected]"><i class="im im-mail"></i> [email protected]</a><span id="footerSpace2"></span><a href="tel:+1-647-990-7052"><i class="im im-phone"></i> +1-647-990-7052</a></p>
</div>
<div id="mobileFooter">
<p>Copyright © 2021 – White Grass Builder and Developer Inc. All rights reserved.<a href="mailto:[email protected]"></p>
<p><i class="im im-mail"></i> [email protected]</a><span id="footerSpace2"></span><a href="tel:+1-647-990-7052"><i class="im im-phone"></i> +1-647-990-7052</a></p>
</div>
</body>
</html>Browser dev tools are your friend. And that's how you can often quickly locate problems like this in your code for a quick fix.
Upvotes: 1
waltzed
Reputation: 79
It's because you have a margin-top: 500px; in your CSS for your Intro ID, this makes a 500px gap above where the Intro ID items are.
This is how the CSS looks now without the gap:
#intro {
display: block;
margin-top: 10px;
padding-bottom: 30px;
}
Upvotes: 0
Related Questions
- White space between slides bootstrap carousel
- Remove big whitespace below this carousel I found online?
- Css image slide show having empty white space
- How can I fix the slideshow? Blank space appearing HTML/CSS
- How to get rid of excess blank space in CSS slideshow without getting rid of manual button transition?
- Gap of absolutely nothing on my website [HTML/CSS]
- Small Gap between my website content and other annoyances relating to gaps
- Why is there extra space to the left of my site?
- how do i get rid of space on the left side of the slideshow
- Mysterious gap between divs in image slider