Today, i've been playing with some scratch css and html. But one thing bugs my mind and it's that i can't scroll on the website, it just won't let me. I'll provide you with a html and css.
<html>
<head>
<title>Website</title>
<link rel="stylesheet" href="css/mystyle.css">
<html lang ="en"></html>
</head>
<body>
<!-- NAVBAR -->
<div class="navbar">
<div class="navbarposition">
<div class="lists">
Home<span></span>
Contact<span></span>
About<span></span>
Blog<span></span>
</div>
</div>
</div>
<div class="banner">
<h1 class="headingbanner">Web Development</h1>
Read More
</div>
<div class="offerings">
<h3 class="secondheader">My Services</h3>
<div class="jobnumber1">
<img class="cloudphoto" src="http://www.iconsdb.com/icons/preview/orange/cloud-3-xxl.pngf">
<h3 class="thirdheader">Web Development</h3>
<p class="pjob">I'm Fully able to build you a website that is going to handle the traffic.<br>Price: 300 USD <br></p>
</div>
</div>
<div class="randomquote">
</div>
</body>
And there goes the css
#import url('https://fonts.googleapis.com/css?family=Encode+Sans');
body{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: scroll;
}
.navbar{
background: #22264b;
height: 80px;
margin-top: -20px;
padding: 20px 10 10 20;
}
.navbarposition{
text-align: right;
margin: 20px;
margin-top: 20px;
}
.listo{
color: #e6cf8b;
text-decoration: none;
font-size: 25px;
margin: 20px;
font-family: 'Encode Sans', sans-serif;
}
.lists{
padding: 20px;
}
.listo:hover{
color: crimson;
}
.img-container{
text-align: center;
}
.banner{
text-align: center;
}
.content{
text-align: center;
}
.banner{
margin-top: -20px;
width: 100%;
height: 500px;
position: fixed;
top: 100px;
background: url(https://i.stack.imgur.com/21f6K.jpg);
background-position: fixed;
background-size: cover;
}
.headingbanner{
color: white;
font-size: 120px;
margin-top: 140px;
font-family: 'Encode Sans', sans-serif;
opacity: 1;
z-index: 10;
}
.btn{
border: 2px solid white;
color: white;
padding: 12px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-size: 25px;
font-family: 'Encode Sans', sans-serif;
border-radius: 5px;
opacity: 1;
z-index: 10;
}
.btn:hover{
background: white;
color:black;
}
.offerings{
margin-top: -20px;
width: 100%;
height: 400px;
position: fixed;
top: 600px;
background:#22264b;
background-position: fixed;
background-size: cover;
align-content: center;
}
.secondheader{
text-align: center;
font-size: 45px;
color:white;
font-family: 'Encode Sans', sans-serif;
}
.cloudphoto{
display: block;
margin: auto;
height: 120px;
}
.jobnumber1{
align-content: center;
}
.thirdheader{
font-family: 'Encode Sans', sans-serif;
color:white;
font-size: 25px;
text-align: center;
}
.pjob{
font-family: 'Encode Sans', sans-serif;
color:darkgoldenrod;
text-align: center;
font-size: 15px;
}
.randomquote{
margin-top: -20px;
width: 100%;
height: 200px;
top: 1000px;
position:fixed;
background:url(https://i.stack.imgur.com/S4bDF.jpg);
background-position: fixed;
background-size: cover;
align-content: center;
}
I would really appreciate if someone would be so kind to look through the code and help me in finding the way to debug this.
It's because you are using a fixed position on every single wrapper.
Information on positions, https://www.w3schools.com/css/css_positioning.asp
You can just remove the positions and the margins you used to end up with the result you are hoping for.
You only have to change your CSS,
#import url('https://fonts.googleapis.com/css?family=Encode+Sans');
body{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: scroll;
}
h1, h2, h3, h4, h5{
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0em;
-webkit-margin-end: 0em;
}
.navbar{
background: #22264b;
height: 80px;
margin-top: -20px;
padding: 20px 10 10 20;
}
.navbarposition{
text-align: right;
margin: 20px;
margin-top: 20px;
}
.listo{
color: #e6cf8b;
text-decoration: none;
font-size: 25px;
margin: 20px;
font-family: 'Encode Sans', sans-serif;
}
.lists{
padding: 20px;
}
.listo:hover{
color: crimson;
}
.img-container{
text-align: center;
}
.banner{
text-align: center;
}
.content{
text-align: center;
}
.banner{
margin-top: -20px;
width: 100%;
height: 500px;
top: 100px;
background: url(https://i.stack.imgur.com/21f6K.jpg);
background-position: fixed;
background-size: cover;
}
.headingbanner{
color: white;
font-size: 120px;
font-family: 'Encode Sans', sans-serif;
opacity: 1;
z-index: 10;
}
.btn{
border: 2px solid white;
color: white;
padding: 12px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-size: 25px;
font-family: 'Encode Sans', sans-serif;
border-radius: 5px;
opacity: 1;
z-index: 10;
}
.btn:hover{
background: white;
color:black;
}
.offerings{
margin-top: -20px;
width: 100%;
height: 400px;
top: 600px;
background:#22264b;
background-position: fixed;
background-size: cover;
align-content: center;
}
.secondheader{
text-align: center;
font-size: 45px;
color:white;
font-family: 'Encode Sans', sans-serif;
}
.cloudphoto{
display: block;
margin: auto;
height: 120px;
}
.jobnumber1{
align-content: center;
}
.thirdheader{
font-family: 'Encode Sans', sans-serif;
color:white;
font-size: 25px;
text-align: center;
}
.pjob{
font-family: 'Encode Sans', sans-serif;
color:darkgoldenrod;
text-align: center;
font-size: 15px;
}
.randomquote{
margin-top: -20px;
width: 100%;
height: 200px;
top: 1000px;
background:url(https://i.stack.imgur.com/S4bDF.jpg);
background-position: fixed;
background-size: cover;
align-content: center;
}
Related
I am now working on a website for my discord bot i have 2 container in my website (container and container2) i set my height of my container and container2 to auto but there is a problem my container 2 height will work on mobile device (ie, css breakpoint with 600px) but now working on devices with breakpoint of 1024px the container is small in devices with 1024 breakpoints
my style.css
* {
margin: 0;
padding: 0;
}
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#700&family=Quicksand:wght#600&display=swap");
#import url("https://fonts.googleapis.com/css?family=Archivo:400,700");
#import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
#import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&display=swap");
/*Desktop*/
:root{
--normal: linear-gradient(315deg, #90d5ec 0%, #fc575e 74%);
--darks: linear-gradient(315deg, #000106 0%, #000106 74%);
--text-theme: black;
}
.dark-theme{
--normal: linear-gradient(315deg, #000106 0%, #000106 74%);
--text-theme: white;
}
#media screen and (min-width: 1024px) and (max-width: 1300px) {
.container {
height: auto;
width: 100%;
background-image: var(--normal);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title {
font-family: "Quicksand", sans-serif;
font-size: 72px;
color: var(--text-theme);
position: relative;
top: 200px;
margin-left: 200px;
user-select: none;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #0087ca;
text-align: center;
font-family: "Nunito", sans-serif;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: #0087ca;
}
.title .img {
width: 400px;
height: 400px;
left: 600px;
bottom: 250px;
position: relative;
display: none;
}
.infotit {
font-size: 10px;
color: var(--text-theme);
}
.hover-underline-animation a {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation a:after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 6px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.trust {
font-size: 26px;
font-family: "Quicksand", sans-serif;
position: relative;
color: var(--text-theme);
text-align: center;
}
.info .quote {
font-size: 36px;
font-family: "Quicksand", sans-serif;
position: relative;
text-align: center;
bottom: 100px;
color: var(--text-theme);
}
.info .btn {
text-align: center;
position: relative;
}
.info .quoto {
text-align: center;
font-family: "Quicksand", sans-serif;
font-size: 36px;
bottom: 50px;
position: relative;
color: var(--text-theme);
}
.info .h11 {
text-align: center;
position: relative;
bottom: 20px;
font-family: "Quicksand", sans-serif;
font-size: 20px;
color: var(--text-theme);
}
.info .h11 .h33 {
color: red;
}
.info .h11 .muchmore_txt {
color: red;
}
.f_txt {
font-size: 26px;
color: var(--text-theme);
}
.more_txt {
font-size: 26px;
color: var(--text-theme);
}
.footer {
font-family: "Quicksand", sans-serif;
text-align: center;
background-color: gray;
height: 100px;
}
/*MORE CONTENTS*/
.container2 {
width: 100%;
height: 4500px;
background-color: rgba(39, 41, 52, 255);
}
.title2 {
font-size: 10px;
font-family: "Quicksand", sans-serif;
color: white;
text-align: center;
border-style: groove;
}
.hideme {
opacity: 0;
}
.minecraft {
float: right;
margin-top: 10%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.mcimg {
width: 605px;
height: 300px;
border-color: red;
}
.mcpara {
font-size: 15px;
}
.joke {
float: left;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.jokeimg {
width: 805px;
height: 300px;
}
.jokepara {
font-size: 15px;
}
.roast {
float: right;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.roastimg {
width: 705px;
height: 300px;
}
.roastpara {
font-size: 15px;
}
.animegif {
float: left;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.animeimg {
width: 605px;
height: 300px;
}
.animapara {
font-size: 15px;
}
.meme {
float: right;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.memeimg {
width: 705px;
height: 400px;
}
.memepara {
font-size: 15px;
}
.fact {
margin-top: 40%;
float: left;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.factimg {
width: 705px;
height: 200px;
}
.factpara {
font-size: 15px;
}
}
.anime {
font-size: 5vw;
cursor: cell;
line-height: 5.5vw;
}
#icon{
cursor: pointer;
width: 20px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.anime {
transition: color 3s;
transition-delay: 1s;
letter-spacing: -0.2vw;
}
.anime span:hover {
transition: color 0s;
}
.anime span:nth-child(1n):hover {
color: #9875e0;
}
.anime span:nth-child(2n):hover {
color: #53fbdd;
}
.anime span:nth-child(3n):hover {
color: #00a4dd;
}
.hideme {
opacity: 0;
}
/*Mobile*/
#media screen and (max-width: 600px) {
.container {
height: auto;
width: 100%;
background-image: var(--normal);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title {
font-family: "Quicksand", sans-serif;
font-size: 72px;
color: var(--text-theme);
position: relative;
top: 200px;
margin-left: 200px;
user-select: none;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #0087ca;
text-align: center;
font-family: "Nunito", sans-serif;
padding: 10px 12px;
text-decoration: none;
font-size: 15px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: #0087ca;
}
.title .img {
width: 400px;
height: 400px;
left: 600px;
bottom: 250px;
position: relative;
}
.infotit {
font-size: 10px;
color: var(--text-theme);
}
.hover-underline-animation a {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation a:after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 6px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.title .img {
display: none;
}
.title {
font-size: 42px;
position: relative;
right: 95px;
top: 100px;
text-align: center;
color: var(--text-theme);
}
.trust {
font-size: 16px;
font-family: "Quicksand", sans-serif;
position: relative;
top: 180px;
text-align: center;
color: var(--text-theme);
}
.info .quote {
font-size: 26px;
font-family: "Quicksand", sans-serif;
position: relative;
text-align: center;
color: var(--text-theme);
}
.info .btn {
text-align: center;
position: relative;
}
.info .quoto {
text-align: center;
font-family: "Quicksand", sans-serif;
font-size: 26px;
color: var(--text-theme);
}
.info .h11 {
text-align: center;
position: relative;
top: 20px;
font-family: "Quicksand", sans-serif;
font-size: 20px;
color: var(--text-theme);
}
.info .h11 .h33 {
color: red;
}
.info .h11 .muchmore_txt {
color: red;
font-size: 17px;
}
.footer {
font-family: "Quicksand", sans-serif;
text-align: center;
background-color: gray;
height: 100px;
}
.anime {
font-size: 8vw;
cursor: cell;
line-height: 5.5vw;
}
/*MORE CONTENTS*/
.container2 {
width: 100%;
height: auto;
background-color: rgba(39, 41, 52, 255);
}
.title2 {
font-size: 10px;
font-family: "Quicksand", sans-serif;
color: white;
text-align: center;
border-style: groove;
}
.hideme {
opacity: 0;
}
.minecraft {
margin-top: 10%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.mcimg {
width: 95%;
height: 80%;
border-color: red;
}
.mcpara {
font-size: 15px;
}
.joke {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.jokeimg {
width: 95%;
height: 80%;
}
.jokepara {
font-size: 15px;
}
.roast {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.roastimg {
width: 95%;
height: 80%;
}
.roastpara {
font-size: 15px;
}
.animegif {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.animeimg {
width: 95%;
height: 80%;
}
.animapara {
font-size: 15px;
}
.meme {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.memeimg {
width: 95%;
height: 80%;
}
.memepara {
font-size: 15px;
}
.fact {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.factimg {
width: 95%;
height: 80%;
}
.factpara {
font-size: 15px;
}
}
/*Tablets*/
#media screen and (min-width: 768px) and (max-width: 1023px) {
.container {
height: auto;
width: 100%;
background-image: var(--normal);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title {
font-family: "Quicksand", sans-serif;
font-size: 72px;
color: black;
position: relative;
top: 200px;
margin-left: 200px;
user-select: none;
color: var(--text-theme);
}
/* Add a black background color to the top navigation */
.topnav {
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #0087ca;
text-align: center;
font-family: "Nunito", sans-serif;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: #0087ca;
}
.title .img {
width: 400px;
height: 400px;
left: 600px;
bottom: 250px;
position: relative;
}
.infotit {
font-size: 10px;
color: var(--text-theme);
}
.hover-underline-animation a {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation a:after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 6px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.title .img {
display: none;
}
.title {
font-size: 42px;
position: relative;
right: 95px;
top: 100px;
text-align: center;
color: var(--text-theme);
}
.trust {
font-size: 16px;
font-family: "Quicksand", sans-serif;
position: relative;
top: 180px;
color: var(--text-theme);
text-align: center;
}
.info .quote {
font-size: 26px;
font-family: "Quicksand", sans-serif;
position: relative;
text-align: center;
color: var(--text-theme);
}
.info .btn {
text-align: center;
position: relative;
}
.info .quoto {
text-align: center;
font-family: "Quicksand", sans-serif;
font-size: 26px;
color: var(--text-theme);
}
.info .h11 {
text-align: center;
position: relative;
top: 20px;
font-family: "Quicksand", sans-serif;
font-size: 20px;
color: var(--text-theme);
}
.info .h11 .h33 {
color: red;
}
.info .h11 .muchmore_txt {
color: red;
}
.footer {
font-family: "Quicksand", sans-serif;
text-align: center;
background-color: gray;
height: 100px;
}
.anime {
font-size: 8vw;
cursor: cell;
line-height: 5.5vw;
}
/*MORE CONTENTS*/
.container2 {
width: 100%;
height: auto;
background-color: rgba(39, 41, 52, 255);
}
.title2 {
font-size: 10px;
font-family: "Quicksand", sans-serif;
color: white;
text-align: center;
border-style: groove;
}
.hideme {
opacity: 0;
}
.minecraft {
margin-top: 10%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.mcimg {
width: 95%;
height: 80%;
border-color: red;
}
.mcpara {
font-size: 15px;
}
.joke {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.jokeimg {
width: 95%;
height: 80%;
}
.jokepara {
font-size: 15px;
}
.roast {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.roastimg {
width: 95%;
height: 80%;
}
.roastpara {
font-size: 15px;
}
.animegif {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.animeimg {
width: 95%;
height: 80%;
}
.animapara {
font-size: 15px;
}
.meme {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.memeimg {
width: 95%;
height: 80%;
}
.memepara {
font-size: 15px;
}
.fact {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.factimg {
width: 95%;
height: 80%;
}
.factpara {
font-size: 15px;
}
}
dont read the whole style.css just check the one with breakpoint of 1024
my index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="btn.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1592285788506158"
crossorigin="anonymous"></script>
<meta name="author" content="CaptainBeast#1394">
<meta name="description" content="Beast Bot.beast bot is a moderation and fun bot for your discord server make your discord server a fun and safe place">
<meta name="keywords" content="Discord bot, bot,beast bot,server,discord server">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="google-site-verification" content="VbhoNStFz2rn8d52JV_RzL_0uAG7thWedllzb16m-wA" />
<link rel="icon" href="images/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
</script>
<div class="topnav">
<div class="hover-underline-animation">
<a class="active" href="index.html">Home</a>
Contact
About Us
Status
<img src="images/moon.png" id="icon">
</div>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Beast Bot</title>
</head>
<body>
<div class="container">
<div class="title">
<p class="infotit">Hover the title</p>
<P class="anime"><span>Beast Bot :)</span></P>
<div class="hideme">
<img class="img" src="images/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png">
</div>
</div>
<div class="hide me">
<h1 class="trust">Trusted by 10,000+ people</h1>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="hideme">
<div class="info">
<div class="hideme">
<p class="quote">A perfect moderation and fun bot<br>for your Discord Server</p>
</div>
<div class="btn">
<button onclick="location.href='https://discord.com/api/oauth2/authorize?client_id=876824416531664896&permissions=536870907895&scope=bot'" class="bttn-slant bttn-lg bttn-royal">Invite</button>
</div>
<br>
<BR>
<br>
<p class="quoto">Beast Bot is trusted by more than 10,000 people</p>
<div class="h11">
<h1>Features</h1>
<br>
<h3 class="h33">Moderation</h3>
<img src="images/features.png" class="features_img">
<p class="f_txt">A perfect moderation bot for your discord server with commands like ban,kick,mute,lock</p>
<br>
<br>
<h3 class="muchmore_txt">Much More</h3>
<img src="images/muchmore.png" class="muchmore">
<P class="more_txt">Many more fun and anime commands like animegif,meme,cute and many more</P>
</div>
</div>
</div>
<br>
<br>
</div>
<!--Updates-->
<div class="container2">
<div class="hideme">
<div class="title2">
<h1>The bot that makes your server a safe place</h1>
</div>
</div>
<div class="minecraft">
<p class="hideme" >Get status of any minecraft servers</p>
<div class="hideme">
<img class="mcimg" src="images/mcstats.PNG">
<div class="mcpara">
<p class="hideme">Beast bot gives you the ability to know the status of any minecraft server</p>
</div>
</div>
</div>
<div class="joke">
<p class="hideme">Have a nice laugh everyday</p>
<div class="hideme">
<img class="jokeimg" src="images/joke.PNG">
</div>
<div class="jokepara">
<p class="hideme">Have a good laugh every day with a Beast Bot use $joke for joke </p>
</div>
</div>
<div class="roast">
<p class="hideme">Roast your friends</p>
<div class="hideme">
<img class="roastimg" src="images/roast.PNG">
</div>
<div class="roastpara">
<p class="hideme">Hmm.Want a revenge on your firend do $roast #user to take a revenge on him</p>
</div>
</div>
<div class="animegif">
<p class="hideme">Sad anime gif</p>
<div class="hideme">
<img class="animeimg" src="https://media.tenor.com/images/8fef3aa41f9d27021e5f4105a7bd6768/tenor.gif">
</div>
<div class="animapara">
<P class="hideme">Sad :( emotional anime gif :( do $animegif</P>
</div>
</div>
<div class="meme">
<p class="hideme">Memes</p>
<div class="hideme">
<img class="memeimg" src="images/meme.jpeg">
</div>
<div class="memepara">
<P class="hideme">Cool memes for your discord server</P>
</div>
</div>
<div class="fact">
<p class="hideme">Random Facts</p>
<div class="hideme">
<img class="factimg" src="images/fact.PNG">
</div>
<div class="factpara">
<p class="hideme">Some cool random fact for you do $fact</p>
</div>
</div>
</div>
<script src="script.js"></script>
<script>
var icon = document.getElementById("icon");
icon.onclick = function(){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src = "images/sun.png";
}else{
icon.src = "images/moon.png"
}
}
</script>
</body>
<script src="cookies.js"></script>
<div class="footer">
<br>
<br>
<footer><P><i class="fa fa-github" ></i> <i class="fa fa-copyright"></i> CaptainBeast#1394 - 2021</P></footer>
Join our official server
</div>
</html>
Here is a image of the problem - container2 is the thing with the text "The bot that makes your server a safe place"
I've trying to make a website just for a home project but having some trouble with the css for mobile.
There seems to be a lot of whitespace surrounding the elements to the right and bottom of the site. I'm newer to the world of CSS so any help would be appreciated.
Screenshot of what chrome shows in developer mode.
#media screen and (max-width:450px) {
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
max-width: 100vw;
overflow-x: hidden;
}
html{scroll-behavior:smooth}
.navbar {
background-color: #008B8B;
position: fixed;
top: 0;
z-index: 100;
width: 100vw;
}
.navbar a {
text-decoration: none;
display: inline-block;
float: center;
padding-bottom: 20px;
}
.logo{
display: none;
}
.loginLogo{
width = 1px;
height = 1px;
visibility: hidden;
}
.navbar-name{
color: #f2f2f2;
font-size:25px;
padding-left: 25%;
font-family: 'Lobster', cursive;
}
.navbar-home{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-products{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-about{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-contact{
font-size: 17px;
padding-top: 5px;
padding-right: 17.5%;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-login{
font-size: 1px;
padding-top: 1px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
visibility: hidden;
}
/* Change the color of links on hover */
.navbar-home:hover {
color: black;
}
.navbar-products:hover {
color: black;
}
.navbar-about:hover {
color: black;
}
.navbar-contact:hover {
color: black;
}
.navbar-login:hover {
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
/*--------HOME PAGE------------*/
.homePage{
margin: 0 0 0 0;
padding: 0;
width: 100vw;
height: 820px;
background-image: url(multiGrain.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.homePageH1{
position: absolute;
text-align: center;
overflow: hidden;
white-space: nowrap;
top: 26%;
left:50%;
transform: translateX(-50%) translateY(-50%);
font-size: 40px;
color: white;
}
.homePageH2{
position: absolute;
text-align: center;
display: inline;
top: 28%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
font-size: 20px;
color: white;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: inline-block;
}
.aboutUsButton{
position: absolute ;
text-align: center;
top: 31%;
left:30%;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(0, 159, 159);
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
text-decoration: none;
}
.ourProductsButton{
position: absolute ;
text-align: center;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: inline-block;
top: 31%;
left:70%;
padding: 10px;
padding-right: 18px;
padding-left: 18px;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(0, 159, 159);
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
text-decoration: none;
}
/*-------ABOUT US PAGE----------*/
.aboutUsPage{
margin: 0 0 0 0;
padding: 0px;
background-color: white;
height: auto;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.aboutUsH1{
position: relative;
padding-top: 20px;
padding-left: 20px;
margin: 0px;
text-align: left;
display: block;
width: 90%;
top: 20%;
font-size: 20px;
font-family: 'Lobster', cursive;
color: black;
background-color: rgb(255,255,255);
}
.aboutUsP{
position: relative;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 30px;
margin: 0px;
text-align: left;
float: bottom;
display: block;
width: 90%;
top: 5%;
font-size: 15px;
font-family: 'Lobster', cursive;
color: black;
background-color: rgb(255,255,255);
}
.mixerImage{
position: relative;
object-fit: cover;
width: 100%;
height: 150px;
}
/*--------PRODUCTS PAGE------------*/
.productsPage{
position: relative;
margin: 0px;
padding: 0px;
background-color: white;
height: 300px;
width: auto;
}
.productsH1{
position: relative;
text-align: left;
top: 5%;
left: 4%;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
color: black;
}
.productsP{
position: relative;
padding: 10px;
padding-top: 15px;
text-align: left;
float: inherit;
width: 45%;
left: 2%;
font-size: 15px;
font-family: 'Titillium Web', sans-serif;
color: black;
background-color: white;
}
.productListButton{
position: absolute ;
text-align: center;
left: 2%;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
background-color: black;
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
letter-spacing: 5px;
color: white;
text-decoration: none;
}
.slideshowImage1{
position: absolute;
width: auto;
left: 55%;
top: 15%;
height: 100px;
float: right;
margin: 10px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.slideshowImage2{
width = 0px;
height = 0px;
visibility: hidden;
}
/*-------CONTACT US PAGE---------*/
.contactPage{
margin: 0 0 0 0;
padding: 0px;
background-image: url(rollingPin2.JPG);
height: 700px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-size: 200% 100%;
}
.contactH1{
position: relative;
text-align: center;
overflow: hidden;
white-space: nowrap;
top: 10%;
left:0%;
font-size: 70px;
letter-spacing: 3px;
color: white;
font-family: 'Dancing Script', cursive;
}
.contactP1{
position: relative;
text-align: center;
top: 10%;
left:0%;
font-size: 18px;
color: white;
font-family: 'Slabo 27px', serif;
}
.contactP2{
position: relative;
text-align: center;
top: 10%;
left:0%;
font-size: 18px;
color: white;
font-family: 'Slabo 27px', serif;
}
.contact-form{
position: relative;
top: 15%;
width: 80%;
left: 47.5%;
transform: translateX(-50%);
}
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
font-family: 'Titillium Web', sans-serif;
border-radius: 4px; /* Rounded borders */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: none; /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
width: 105%;
background-color: #008B8B;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: black;
}
.nameInput{
position: relative;
top: 0px;
color: white;
}
.emailInput{
position: relative;
top: 5px;
color: white;
}
.messageInput{
position: relative;
top: 5px;
color: white;
}
.submitButton{
position: relative;
top: 5px;
}
/*--------FOOTER---------*/
.facebookLogo{
width: 0%;
height: 0%;
visibility: hidden;
}
.footer {
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp1{
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp2{
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp3{
width: 0px;
height: 0px;
visibility: hidden;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap" rel="stylesheet">
<title>Doughboys Bakery</title>
<link href="StyleSheet.css" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav class="navbar">
<img class = "logo" src="Doughboys Logo - Website Version.png" alt="Logo" width="80"height="45.109">
<a class="navbar-name" href="">Doughboy's Bakery.</a>
<a class="navbar-login" href="">Log In</a>
<img class = "loginLogo" src="loginLogo2.png" onmouseover="this.src='loginLogo2Black.png';" onmouseout="this.src='loginLogo2.png';" width="50"height="28.889"/>
<a class="navbar-contact" href="#contactPage">Contact</a>
<a class="navbar-products" href="#productsPage">Products</a>
<a class="navbar-about" href="#aboutUsPage">About</a>
<a class="navbar-home" href="#homePage">Home</a>
</nav>
</header>
<div class = "homePage" id="homePage">
<h1 class="homePageH1">Quality or Quantity</h1>
<h2 class="homePageH2">We're here to give you both</h2>
<div class = "homePageButtons">
<a class="aboutUsButton" href="#aboutUsPage">About Us</a>
<a class="ourProductsButton" href="#productsPage">Our Products</a>
</div>
</div>
<div class = "aboutUsPage" id="aboutUsPage">
<div class = "aboutUsText">
<h1 class="aboutUsH1">Who we are.</h1>
<p class="aboutUsP">Doughboys Bakery is a locally owned and operated wholesale bakery located near the city centre of Palmerston North. We produce traditional bakery goods like the classic Mince and Cheese Pies and Custard Squares. <br/><br/>We deliver actively in the Manawatu-Whanganui, Horowhenua & Wairarapa regions. (T's & C's Apply)<br/><br/>Use the contact section below to see how we can help suit your baking needs.</p>
</div>
</div>
<div class = "productsPage" id="productsPage">
<h1 class="productsH1">What we make.</h1>
<p class="productsP">At Doughboys' we supply traditionally sold bakery goods all the way from the classic Mince and Cheese Pie to the humble Scone.</p>
<button class="productListButton" type="submit" onclick="window.open('ProductList.doc')">Full Product List</button>
<div id="slideshow">
<div>
<img class="slideshowImage1" src="fruitPies.jpeg">
</div>
<div>
<img class="slideshowImage2" src="pies.jpg">
</div>
</div>
</div>
<div class="contactPage" id="contactPage">
<h1 class="contactH1">Contact Us.</h1>
<p class="contactP1">ADDRESS: 15 Johnston St </p>
<p class="contactP2">TEL: (06) 123 1234 | doughboys#gmail.net.nz</p>
<div class = "contact-form">
<form id = "contact-form" method="post" action="contactForm.php">
<input class= "nameInput" type="text" id="name" name="name" placeholder="Your name...">
<input class= "emailInput" type="text" id="email" name="email" placeholder="Your email...">
<textarea class= "messageInput" id="message" name="message" placeholder="Write something..." style="height:100px"></textarea>
<input class= "submitButton" type="submit" value="Submit">
</form>
</div>
</div>
<div class="footer">
<a href="https://www.facebook.com/Doughboys-Bakery-Ltd-216199385212667">
<img class = "facebookLogo" src="facebookLogo.png" >
</a>
<p class="footerp1">(06) 123 1234</p>
<p class="footerp2">doughboys#gmail.net.nz</p>
<p class="footerp3">15 Johnston St</p>
</div>
</body>
</html>
I have this website with a showcase div, within the div I have a "Get Started" button. I am able to vertically align the button with the margin attribute. However I do not want to horizontally align the button with margin as this will lead to some trouble for me in the future, I've tried align: center; and align="center" but the button sticks to the left side of the showcase. How can I unstick this button and horizontally align it without having to use a margin attribute?
html,
body,
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
h1 {
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2 {
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight {
color: #45d845;
}
.heading {
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet {
font-size: 65px;
margin-left: 20px;
}
.showcase {
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
}
.showcase h2 {
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verdana;
text-align: center;
text-shadow: 1px 3px #000;
}
#start {
align: center;
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#start:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2>
<button id="start" align="center">Get Started</button>
</div>
You can wrap your button in a div with the style text-align: center; to horizontally center your button. Example:
html, body, header{
position:absolute;
left:0;
top:0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
/*Heading*/
h1{
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2{
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight{
color: #45d845;
}
.heading{
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet{
font-size: 65px;
margin-left: 20px;
}
/*Showcase*/
.showcase{
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
}
.showcase h2{
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verndana;
text-align: center;
text-shadow: 1px 3px #000;
}
#start{
align: center;
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
#start:hover{
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen.
Interested has all devonshire difficulty jay
assistance joy. Unaffected at ye </h2>
<div style="text-align: center;">
<button id="start">Get Started</button>
</div>
</div>
You can consider using a flexbox. Documentation in the CSS source.
/* Global Sets */
html,
body,
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
/*Heading*/
h1 {
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2 {
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight {
color: #45d845;
}
.heading {
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet {
font-size: 65px;
margin-left: 20px;
}
/*Showcase*/
.showcase {
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
display: flex; /* Added */
flex-direction: column; /* Added */
align-items: center; /* Added, horizonal alignment */
}
.showcase h2 {
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verndana;
text-shadow: 1px 3px #000;
text-align: center;
}
#start {
/* align: center; Not valid CSS */
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
/* text-align: center; No longer required */
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
}
#start:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2>
<button id="start" align="center">Get Started</button>
</div>
I'm trying to position a circular instagram icon so it is always centered towards the bottom of a landing page. All my efforts so far such as using position:fixed; have resulted in the icon not remaining underneath the rest of my content when the screen size changes.
My html is like this:
<!DOCTYPE html>
<html>
<head>
<title>RBM Makeup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
</body>
</html>
And my CSS is like this:
:root{
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face{
font-family: 'milkshake';
src:url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face{
font-family: 'amble';
src:url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro{
height:100%;
width:100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1{
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container{
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a{
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover{
opacity:0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
left: 47.5%;
}
Any help would be greatly appreciated, thanks :)
Modified two places of your code.
1. .foot
left: 50% plus margin-left: - { width } / 2 can make footer align center no matter how the window changes.
```
.footer {
position: fixed;
bottom: 0;
width: 95px; // here
height: 100px;
left: 50%; // here
margin-left: calc(-95px / 2); // here
}
```
2. .fa
In your code, the Instagram icon is not aligning center inside the black circle, so I make some changes for it.
As the Instagram icon is square, you should not set the width 40px when it's font-size is 55px.
```
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* here */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
```
If you have more questions about my answer, feel free to contact me :)
:root {
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face {
font-family: 'milkshake';
src: url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: 'amble';
src: url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro {
height: 100%;
width: 100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1 {
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a {
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* need to fit the font-size */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover {
opacity: 0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer {
position: fixed;
bottom: 0;
width: 95px;
height: 100px;
left: 50%;
margin-left: calc(-95px / 2);
}
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
set the parent as
.intro {
width:100%;
height:100vh;
position:relative;
}
and the icon element as
.footer {
position:absolute;
bottom:0;
left:50%;
width:40px;
margin-left:-20px;
}
as an alternative:
.footer {
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
.footer > div {
display:inline-block;
}
this will do better as you can add other elements if you end up wanting to add other links
I'm trying to center this icon inside its div but can't seem to do that.
I tried top: 50% but that doesnt work.
The class is ion-images and I know I can send a margin-top to it but I want to know how to properly set it in the middle.
body {
margin: 0;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
/*-------------------HEADER*----------------*/
header {
position: relative;
width: 100%;
height: 100vh;
}
.header-bg {
position: absolute;
width: 100%;
height: 100%;
background-image: url(main-bg.jpg);
background-size: cover;
background-position: center;
}
.header-wrapper {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.title-wrapper {
position: relative;
width: 320px;
height: auto;
margin: 0 auto;
top: -10%;
}
.title-wrapper h1 {
text-align: center;
color: white;
letter-spacing: 5.45px;
margin-bottom: -10px;
font-size: 62px;
font-family: 'Raleway', sans-serif;
border-top: 3px solid white;
font-weight: 500;
}
.title-wrapper h3 {
text-align: center;
color: #35E2FF;
letter-spacing: 3.45px;
font-family: 'Raleway', sans-serif;
font-size: 15px;
}
.title-wrapper h2 {
color: white;
font-size: 50px;
margin-top: 80px;
font-family: 'Raleway', sans-serif;
}
.title-wrapper h4 {
color: white;
font-family: 'Raleway', sans-serif;
font-weight: 400;
text-align: center;
font-size: 25px;
margin-bottom: 50px;
}
#download {
text-align: center;
;
}
#demo:link {
text-decoration: none;
color: white;
border: 2px solid white;
text-align: center;
padding: 20px 40px;
text-transform: uppercase;
font-size: 25px;
font-family: 'Raleway', sans-serif;
transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
}
#demo:hover {
background-color: #35E2FF;
}
/*------------------------------DESCRIPTION---------------*/
#description-wrapper {
position: relative;
width: 100%;
top: 0;
}
.desc-card {
position: relative;
width: 50%;
height: 450px;
margin: 0;
}
.desc-card.left {
float: left;
left: 0;
background-color: #000;
}
.desc-card.right {
float: right;
right: 0;
background-color: #282828;
}
#features-content {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#features-content h3 {
color: white;
font-family: 'Raleway', sans-serif;
letter-spacing: 3.5px;
font-weight: 500;
font-size: 32px;
}
#features-content p {
color: white;
font-family: 'Raleway', sans-serif;
font-weight: 300;
letter-spacing: 3.5px;
}
#features-img {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}
.square {
width: 50%;
height: 50%;
}
.square.first {} .square.second {
background-color: #4A4A4A;
}
.square.third {
background-color: #4A4A4A;
}
.img-cont {
position: relative;
width: 100%;
height: 100%;
}
.ion-images {
/*THIS IS WHAT IM TRYING TO CENTER */
color: #35E2FF;
text-align: center;
font-size: 115px;
}
#under-img {
font-size: 25px;
color: #35E2FF;
margin-top: -10px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
<!----HEADER------>
<header>
<div class="header-bg"></div>
<div class="header-wrapper">
<div class="title-wrapper">
<h1>ATLAS</h1>
<h3>BETA</h3>
<h4>Create Professional Digital Design in any Operating System</h4>
<div id="download">Download Now
</div>
</div>
</div>
</header>
<div id="description-wrapper" class="clearfix">
<div class="desc-card left" id="features">
<div id="features-content">
<h3>The All In One Tool for Creative Designers In Any Operating System</h3>
<p>ATLAS provides users the best software to do what they do best. Design</p>
</div>
</div>
<div class="desc-card right" id="features-des">
<div id="features-img">
<div class="square first">
<div class="img-cont">
<div class="ion-images">
<!--Trying to center this--->
<p id="under-img">Photo Editing</p>
</div>
</div>
</div>
<div class="square second">
</div>
<div class="square third">
</div>
<div class="square fourth">
</div>
</div>
</div>
</div>
Try
.ion-images{ /*THIS IS WHAT IM TRYING TO CENTER */
color: #35E2FF;
text-align: center;
font-size: 115px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Reference
If you can use Flex, try whit this.
.ion-images {
height: 100%;
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
}
Hope can i help you. Regards.