I added a footer to my page but for some reason there is a gap between the footer and the ending of the body. I am not sure how to fix this issue. I have made many webpages without this issue.
I have included the HTML and CSS from what I have created. I cannot find any issue with the code I have.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-size: 20px;
font-weight: 300;
margin: 0 0 var(--header-height) 0;
}
section {
margin-top: 3rem;
}
.coloredSection {
background-color: var(--pale-green);
color: white;
}
.container {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.grid {
display: grid;
gap: 1.5rem;
}
<footer id="contact" class="coloredSection contact">
<div class="row align-items-center projects container">
<div>
<h1>Contact Me</h1>
</div>
<div class="contactLinks" id="contacts">
<a
id="profile-link"
href="https://github.com/"
target="_blank"
class="btn contactDetails"><i class="fab fa-github"></i> GitHub</a>
<a
href="https://twitter.com/"
target="_blank"
class="btn contactDetails"><i class="fab fa-twitter"></i> Twitter</a>
<a
href="https://www.linkedin.com/in/"
target="_blank"
class="btn contactDetails"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a href="mailto:"
class="btn contactDetails"><i class="fas fa-envelope"></i> Email me</a>
</div>
<div class="attribution">
©2022 | Designed and Coded by Kianna Hendricks
</div>
</div>
</footer>
<!-- End Contact -->
</body>
</html>
Image:
It seems you have set a margin-bottom for the body:
var(--header-height)
body {
font-size: 20px;
font-weight: 300;
margin: 0 0 var(--header-height) 0;
}
Change margin to margin:0; and it will work fine.
I figured out the issue. I accidently added the projects class to the contact row div. After removing it, the gap went away.
Related
I am learning HTML and CSS. I am practicing by designing some pages but I got a problem. I tried many ways but couldn't fix it. I want to add a space between the icon and the text so that they lock more beautiful.
Image:
CSS:
.facebook {
background: blue;
padding: 0.8rem;
padding-left: 4.1vw;
padding-right: 4.1vw;
margin-left: 0vw;
border-radius: 10px;
}
.facebook:hover {
opacity: 0.5;
}
.google {
background: red;
padding: 0.8rem;
padding-left: 4.6vw;
padding-right: 4.6vw;
margin-left: 3vw;
border-radius: 10px;
}
.google:hover {
opacity: 0.5;
}
HTML:
<div class="login-with">
<i class="fab fa-facebook">Facebook</i>
<i class="fab fa-google">Google</i>
</div>
Can you please help me to fix it. When I add a space manually the link text go to below the icon.
Full Codes link:
CSS: Full Code
HTML: Full Code
Try one of the below methods as mentioned in Fontawesome examples page
Text outside i tag, and add a space in between
<i class="fab fa-facebook"></i> Facebook
Use , below code is from Fontawesome site
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
If you dont want to change your markup(html) use the below CSS
.login-with > a i::before {
padding-right: 15px;
}
People usually keep the icon element as an empty node and put the text content after it. Then you add a margin to the icon to get appropriate spacing:
.facebook .fab { margin-right: 1em }
<a href="..." class="facebook">
<i class="fab fa-facebook"></i>
<span>Facebook</span>
</a>
The <span> tags are technically not necessary, but it is common to avoid text-only nodes.
Use space or   between text and icon. Also plz put ; after  
Place service name outside i tag.
You can add margin-right: 10px; styling to i element,
or display: flex; justify-content: space-between; to the a tag.
It would be best to set a base class for the social icons
/* set base class */
.social-btn {
padding: 0.8rem 4.1vw;
border-radius: 10px;
color: white;
background: gray;
text-decoration: none;
font-family: sans-serif;
}
/* space the buttons */
.social-btn + .social-btn {
margin-left: 1rem;
}
/* set icon padding */
.social-btn i {
padding-right: 0.5rem;
}
/* Modifiers */
.facebook-btn {
background: blue;
}
.google-btn {
background: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<i class="fab fa-facebook"></i>Facebook
<i class="fab fa-google"></i>Google
In Bootstrap you can use me which represents margin from end in icon
<button type="button" class="btn btn-primary"
style="width:150px;"><i class="bi bi-info-circle me-2"></i>Information</button>
Sample Code:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<center>
<button type="button" class="btn btn-primary" style="width:150px;"><i class="bi bi-info-circle me-2"></i>Information</button>
<br><br>
<button type="button" class="btn btn-secondary" style="width:150px;"><i class="bi bi-gear-fill me-3"></i>Settings</button>
<br><br>
<button type="button" class="btn btn-info" style="width:150px;"><i class="bi bi-person-circle me-3"></i>Profile</button>
</center>
</body>
</html>
I have the following script in my html file:
<template name="SideNav">
<header>Lammah</header>
<body>
dd
</body>
<div class="nav">
<i class="fa fa-user-circle"></i>
<i class="fa fa-upload"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-search"></i>
</div>
</template>
And below is the .css file:
.nav {
border-radius: 5px 5px 0px 0px;
overflow: hidden;
background-color: #b7b7e5;
position: fixed;
bottom: 0;
width: 100%;
}
.nav a {
float: left;
width: 25%;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
a:hover{
background-color: #A3A3CC;
}
When I run the html file, the nav class doesn't start from the beginning of the screen, there is small white space on the left as it is shown in the picture below:
the result
What is causing the nav class to not start from the beginning of the screen (bottom left)?
When I run the html file, the nav class doesn't start from the beginning of the screen, there is
This is because by default the client/main.css contains the following lines:
body {
padding: 10px;
font-family: sans-serif;
}
You should remove it in order to remove the white space.
Furthermore some additions on your Template:
The head and body should only be in your client/main.html while the body content will be rendered using the templates. This is, because Blaze is focused to develop single page applications.
So your code client/main.html may be like the following:
<header>
<title>Lammah</title>
</header>
<body>
{{> SideNav }}
</body>
<template name="SideNav">
<div class="nav">
<i class="fa fa-user-circle"></i>
<i class="fa fa-upload"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-search"></i>
</div>
</template>
The default margins and padding are still in place. What you will need is to make sure the parent element has margins and padding set to 0. So for example, the very first css element you will want to set based off your above code would be this:
template {
margin: 0;
padding: 0;
}
try this one
margin: 0 !important;
I am trying to achieve this design having a semicircle with logo inside in the center. Kindly refer to the link given below.
Image
I have tried making a semicircle using CSS but it won't be suitable for the design that I want. I have used 2 jumbotrons, one after the other. The semicircle should cover the area on both jumbotron as in the image(link mentioned above).
Any help is appreciated on how can I achieve this design.
HTML:
<div class="jumbotron">
<div class="container navheader">
<div class="social">
<i class="fa fa-facebook " aria-hidden="true"></i>
<i class="fa fa-google-plus " aria-hidden="true"></i>
<i class="fa fa-instagram " aria-hidden="true"></i>
</div>
<div class="contact-us">
<a href="">
<i class="fa fa-phone " aria-hidden="true">
<label class="icon-label">CALL 0417 949 773</label></i></a>
</div>
</div>
</div>
<div class="jumbotron other-color">
<div class="container navheader">
<div class="user-actions">
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-in">
<i class="fa fa-lock" aria-hidden="true">
<label class="icon-label">SIGN IN</label>
</i>
</button>
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-up">
<i class="fa fa-user " aria-hidden="true">
<label class="icon-label">CREATE AN ACCOUNT</label>
</i>
</button>
</div>
<div class="div-semicircle top"></div>
<div class="cart">
<a href=""><i class="fa fa-shopping-cart " aria-
hidden="true">
<label class="icon-label">2 ITEM(S)</label>
</i></a>
</div>
</div>
</div>
CSS:
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
background-color: #5a9f33;
padding: 2em 1em;
}
.other-color {
margin-bottom; 0;
background-color: #67b63d;
padding: 2em 1em;
}
.navheader{
display: inline-block;
width: 100%;
}
.social, .user-actions{
float:left;
}
.contact-us, .cart{
float:right;
}
.sign-up{
background-color:#67b63d;
margin: 0 50px 50px;
padding:20px;
}
input{
padding:15px;
margin:20px;
width:85%;
}
.btn-sign{
background-color: #67b63d;
font-family: serif;
color: white;
border-radius: 30px;
font-size: 2em;
padding: 10px 50px;
margin: 20px auto;
display: block;
}
.title{
font-family: serif;
font-weight: 600;
color: #67b63d;
font-size: 3em;
margin-top:20px;
}
.div-semicircle {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 45px;
width: 90px;
}
.top {
border-top-left-radius: 90px ;
border-top-right-radius: 90px;
}
</style>
UPDATE:
Solution: In case anyone wants to know, refer to the sample by #bhv in the first comment for reference and tweak it as per your requirement.
first of all your posted code isn't of any help....still I'll try to give a procedure how you can achieve the linked image
create a div not with class .container
create 2 navs inside above created div
create a jumbotron below the navs inside the same div and contain it
in a div with class container
set margins as you need it between these 3 to bring them together
It is clearly visible that you dont need a semicircle..you need an ellipse use clip-path: ellipse(65px 30px at 125px 40px); someting like this to create it within same div then position it in a way you want to using css and give it highest z-index so that it renders as top-most layer.
prey that it works!! ;-)
you must use position:absolute to cover both jumbotron
add these lines of code to this class: .div-semicircle.
position: absolute;
top: 23%;
left: 40%;
I want that 3 div's are having the same height.
Picture
HTML
.more-bottom {
padding: 4em 0;
background: #DCEDF9;
}
.more-bottom-grids {
margin: 4em 0 4em 0;
height: 10px;
}
.more-bottom-grid-img img {
width: 100%;
}
.more-bottom-grid-info {
background: #FFF;
padding: .5em;
}
.more-bottom-grid-text {
padding: 1em;
}
.more-bottom-grid-text h5 {
margin: 0;
font-size: .875em;
color: #383838;
line-height: 1.8em;
}
.more-bottom-grid-text p {
margin: 1em 0 0 0;
font-size: .875em;
color: #BBBBBB;
line-height: 1.8em;
}
<div class="container">
<div class="more-bottom-grids">
<div class="col-md-4 more-bottom-grid">
<div class="more-bottom-grid-info">
<div class="more-bottom-grid-img" id="experienceutrecht">
<img src="images/ExperienceUtrecht/Attractions/Architecture/8.jpg" alt="" />
</div>
<div class="more-bottom-grid-text">
<h5>Stadhuis</h5>
<p><i class="fa fa-map-marker" aria-hidden="true"></i> Korte Minrebroederstraat 2, 3512 GG Utrecht</p>
</div>
</div>
</div>
<div class="col-md-4 more-bottom-grid">
<div class="more-bottom-grid-info">
<div class="more-bottom-grid-img" id="experienceutrecht">
<img src="images/ExperienceUtrecht/Attractions/Architecture/9.jpg" alt="" />
</div>
<div class="more-bottom-grid-text">
<h5>Stadskantoor</h5>
<p><i class="fa fa-map-marker" aria-hidden="true"></i> Stadsplateau 1, 3521 AZ Utrecht</p>
</div>
</div>
</div>
<div class="col-md-4 more-bottom-grid">
<div class="more-bottom-grid-info">
<div class="more-bottom-grid-img" id="experienceutrecht">
<img src="images/ExperienceUtrecht/Attractions/Architecture/10.jpg" alt="" />
</div>
<div class="more-bottom-grid-text">
<h5>The Wall</h5>
<p><i class="fa fa-map-marker" aria-hidden="true"></i> Hertogswetering 183, 3543 AS Utrecht</p>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
How do I get the same height for these 3 blocks?
This is on my website, so if you want to you can see it live here.
I have tried to change some things by the img with specific height, but it didn't worked yet.
You should user min-height css property for same div something like that
.more-bottom-grid-info {
background: #FFF;
padding: 0.5em;
min-height: 340px;
}
You really only have two options.
Set a min height on each card (the container with white background).
Use flexbox, I'd recommend checking out the card group section over at flexboxpatterns for a detailed walktrough.
I'm trying to align a row class to be stuck to the bottom of an image. I want it to stick to the bottom and not move. I've added a comment as to what section I want to stick. It starts at the footer tag with id #offer.
HTML:
<div id="ImageMain">
<ul id="nav">
<li id="brand">MINIMAL</li>
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<h1>Simplicity is Minimal</h1>
Shop Now
<!--I'm trying to make this section stick to the bottom of #ImageMain-->
<footer id="offer">
<div class="row">
<div class="col-md-4" align="center">
<i class="fa fa-truck" aria-hidden="true"></i>
<h2>Fast Shipping</h2>
<p>Your order(s) are shipped out the next day with UPS Express Shipping. International orders are shipped out with DHL Express</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-reply" aria-hidden="true"></i>
<h2>Easy Returns</h2>
<p>Not satisfied with our product? Sizing too big/small? We will accept your return and grant your money back/ship out your right size hassle free</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-phone" aria-hidden="true"></i>
<h2>Caring Customer Service</h2>
<p>Our 24/7 customer service reps will help you with every question and have and will work to satifsy your needs</p>
</div>
</div>
</footer>
</div>
CSS:
#ImageMain {
background-image: url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
text-align: center;
color: white;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
#offer {
background-color: black;
padding: 40px;
opacity: 0.5;
margin-top: 263px; /* This is what I want to fix. I'm not sure of the code I have to use to position it to make it stick to the bottom and be able to resize-*/
}
#offer i, h2, p {
color: white;
}
#offer i {
font-size: 35px;
}
position: absolute is what you're looking for. You can read more about it here - https://developer.mozilla.org/en-US/docs/Web/CSS/position
Added position: relative to the parent element, and position: absolute; bottom: 0; left: 0; right: 0; to #offer
#ImageMain {
background-image: url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
text-align: center;
color: white;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}
#offer {
background-color: rgba(0,0,0,0.5);
padding: 40px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#offer i,
h2,
p {
color: white;
}
#offer i {
font-size: 35px;
}
<div id="ImageMain">
<ul id="nav">
<li id="brand">MINIMAL</li>
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<h1>Simplicity is Minimal</h1>
Shop Now
<!--I'm trying to make this section stick to the bottom of #ImageMain-->
<footer id="offer">
<div class="row">
<div class="col-md-4" align="center">
<i class="fa fa-truck" aria-hidden="true"></i>
<h2>Fast Shipping</h2>
<p>Your order(s) are shipped out the next day with UPS Express Shipping. International orders are shipped out with DHL Express</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-reply" aria-hidden="true"></i>
<h2>Easy Returns</h2>
<p>Not satisfied with our product? Sizing too big/small? We will accept your return and grant your money back/ship out your right size hassle free</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-phone" aria-hidden="true"></i>
<h2>Caring Customer Service</h2>
<p>Our 24/7 customer service reps will help you with every question and have and will work to satifsy your needs</p>
</div>
</div>
</footer>
</div>