This is my HTML code.
there was no problem with my project until i added bootstrap.
it seems the details is nt enough so iam writing this pls if u know anything pls correct my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
<title>test home</title>
</head>
<body>
<div class="hero">
<video autoplay loop muted plays-inline class="back-video">
<source src="Wolf.mp4" type="video/mp4">
</video>
<nav>
<img src="Wild logo2.png" class="logo">
<div class="menu-btn">
<div class="menu-btn_lines"></div>
</div>
<ul class="menu-items">
<li>HOME</li>
<li>MISSIONS</li>
<li>COURSE</li>
<li>CONTACT</li>
<li><a type="submit" class="cta" href="#"><button>LogIn</button></a></li>
</ul>
</nav>
<div class="content">
<h1>WILDPRO</h1>
READ
</div>
</div>
<div class="banner">
<h2>
Photography is life.
</h2>
<br><br><br>
<p>Wildlife photography is one of the most exciting photographic genres out there. But it can be difficult to get started as a wildlife photographer because of all the gear, technical know-how, and additional knowledge required.In the early days of photography, it was difficult to get a photograph of wildlife due to slow lenses and the low sensitivity of photographic media. Earlier photos of animals were often captive animals. These included photos of lion cubs taken at the Bristol zoo in 1854 and in 1864, photos of the last Quagga by Frank Hayes. Wildlife photography gained more traction when faster photography emulsions and quicker shutters came in the 1880s. Developments like these lead to photos such as the ones taken by German Ottomar Anschutz in 1884, the first shots of wild birds in action. Members of the Delaware Valley Ornithological Club (DVOC) captured early photographs of nesting songbirds in the Philadelphia area in 1897.In July 1906, National Geographic published its first wildlife photos.The photos were taken by George Shiras III, a U.S. Representative from Pennsylvania. Some of his photos were taken with the first wire-tripped camera traps.</p>
<div class="custom-shape-divider-bottom-1676808801">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
<div id="mission-id" class="mission">
<h2>
Missions.
</h2>
<br>
<p>
The website intends on to focus on many rescue missions,for a bright future for the wild animals and <span>SAVE</span> many animals from their existition.
</p>
</div>
</body>
</html>
This is my CSS code
the css code seem to have some position problem or something
this is a screenshot of my project
enter image description here
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
li, a, button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
.hero{
background:linear-gradient(rgba(0, 0, 0, 0.5),rgb(0, 150, 17));
width: 100%;
height: 100vh;
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
input{
display: block;
width: 400px;
height: 40px;
margin: 60px;
border: none;
outline: none;
font-size: 20px;
background: transparent;
color: #fff;
margin-bottom: 0%;
}
::placeholder{
color: rgba(211, 211, 211, 0.767);
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo{
margin-right:auto;
width: 100px;
cursor: pointer;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a{
transition: all 0.3s ease 0s;
text-decoration: none;
color: #fff;
font-size: 17px;
}
nav ul li a:hover {
color: #0ea900;
}
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 3;
}
.menu-btn_lines,
.menu-btn_lines::before,
.menu-btn_lines::after{
width: 1.5rem;
height: 0.1rem;
background-color: #ffffff;
transition: all 0.5s ease-in-out;
}
.menu-btn_lines::before,
.menu-btn_lines::after{
content: "";
position: absolute;
}
.menu-btn_lines::before{
transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
transform: translateY(0.5rem)
}
.menu-btn.open .menu-btn_lines{
transform: translateX(2rem);
background-color: transparent;
}
.menu-btn.open .menu-btn_lines::before{
transform: rotate(45deg) translate(-1.5rem,1.5rem);
}
.menu-btn.open .menu-btn_lines::after{
transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
}
button{
padding: 9px 25px;
background-color: rgb(54, 169, 0);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(6, 182, 0, 0.8);
}
.content{
position: relative;
text-align: center;
z-index: 1;
}
.content h1{
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.3s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
cursor: default;
}
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -2;
}
#media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.banner{
margin-top: 0;
background-color:rgb(0, 150, 17);
width: 100;
height: auto;
position: relative;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.banner h2{
text-align: center;
font-size: 50px;
}
.banner p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.custom-shape-divider-bottom-1676808801 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1676808801 svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1676808801 .shape-fill {
fill: #0b8500;
}
.mission{
margin-top: 0;
float: top;
background-color: #0b8500;
width: 100%;
height: auto;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.mission h2{
text-align: center;
font-size: 50px;
}
.mission p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.mission span{
font-size: 40px;
font-weight: 900;
background-image: linear-gradient(98deg,red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#media (max-width: 767px) {
.custom-shape-divider svg {
width: calc(250% + 1.3px);
height: 150px;
}
.menu-btn{
display: flex;
}
.menu-items {
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100vh;
transform: translateX(100vw);
background-color: #0ea900;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu-items.open {
transform: translateX(0);
}
.menu-items li {
width: 50vw;
height: 10%;
margin-top: 10%;
}
.menu-items li a {
color: #fff;
font-size: 2vh;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
.banner h2{
font-size: 30px;
text-align: center;
color: #ffffff;
}
.banner p{
font-size: 20px;
text-align: center;
color: white;
padding-bottom: 20%;
}
.content h1{
font-size: 80px;
}
nav .logo{
width: 20%;
}
}
Try adding class="m-0" to the p tag inside div.banner like this:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
li, a, button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
.hero{
background:linear-gradient(rgba(0, 0, 0, 0.5),rgb(0, 150, 17));
width: 100%;
height: 100vh;
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
input{
display: block;
width: 400px;
height: 40px;
margin: 60px;
border: none;
outline: none;
font-size: 20px;
background: transparent;
color: #fff;
margin-bottom: 0%;
}
::placeholder{
color: rgba(211, 211, 211, 0.767);
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo{
margin-right:auto;
width: 100px;
cursor: pointer;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a{
transition: all 0.3s ease 0s;
text-decoration: none;
color: #fff;
font-size: 17px;
}
nav ul li a:hover {
color: #0ea900;
}
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 3;
}
.menu-btn_lines,
.menu-btn_lines::before,
.menu-btn_lines::after{
width: 1.5rem;
height: 0.1rem;
background-color: #ffffff;
transition: all 0.5s ease-in-out;
}
.menu-btn_lines::before,
.menu-btn_lines::after{
content: "";
position: absolute;
}
.menu-btn_lines::before{
transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
transform: translateY(0.5rem)
}
.menu-btn.open .menu-btn_lines{
transform: translateX(2rem);
background-color: transparent;
}
.menu-btn.open .menu-btn_lines::before{
transform: rotate(45deg) translate(-1.5rem,1.5rem);
}
.menu-btn.open .menu-btn_lines::after{
transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
}
button{
padding: 9px 25px;
background-color: rgb(54, 169, 0);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(6, 182, 0, 0.8);
}
.content{
position: relative;
text-align: center;
z-index: 1;
}
.content h1{
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.3s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
cursor: default;
}
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -2;
}
#media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.banner{
margin-top: 0;
background-color:rgb(0, 150, 17);
width: 100;
height: auto;
position: relative;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.banner h2{
text-align: center;
font-size: 50px;
}
.banner p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.custom-shape-divider-bottom-1676808801 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1676808801 svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1676808801 .shape-fill {
fill: #0b8500;
}
.mission{
margin-top: 0;
float: top;
background-color: #0b8500;
width: 100%;
height: auto;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.mission h2{
text-align: center;
font-size: 50px;
}
.mission p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.mission span{
font-size: 40px;
font-weight: 900;
background-image: linear-gradient(98deg,red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#media (max-width: 767px) {
.custom-shape-divider svg {
width: calc(250% + 1.3px);
height: 150px;
}
.menu-btn{
display: flex;
}
.menu-items {
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100vh;
transform: translateX(100vw);
background-color: #0ea900;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu-items.open {
transform: translateX(0);
}
.menu-items li {
width: 50vw;
height: 10%;
margin-top: 10%;
}
.menu-items li a {
color: #fff;
font-size: 2vh;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
.banner h2{
font-size: 30px;
text-align: center;
color: #ffffff;
}
.banner p{
font-size: 20px;
text-align: center;
color: white;
padding-bottom: 20%;
}
.content h1{
font-size: 80px;
}
nav .logo{
width: 20%;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
<title>test home</title>
</head>
<body>
<div class="hero">
<video autoplay loop muted plays-inline class="back-video">
<source src="Wolf.mp4" type="video/mp4">
</video>
<nav>
<img src="Wild logo2.png" class="logo">
<div class="menu-btn">
<div class="menu-btn_lines"></div>
</div>
<ul class="menu-items">
<li>HOME</li>
<li>MISSIONS</li>
<li>COURSE</li>
<li>CONTACT</li>
<li><a type="submit" class="cta" href="#"><button>LogIn</button></a></li>
</ul>
</nav>
<div class="content">
<h1>WILDPRO</h1>
READ
</div>
</div>
<div class="banner">
<h2>
Photography is life.
</h2>
<br><br><br>
<p class="m-0">Wildlife photography is one of the most exciting photographic genres out there. But it can be difficult to get started as a wildlife photographer because of all the gear, technical know-how, and additional knowledge required.In the early days of photography, it was difficult to get a photograph of wildlife due to slow lenses and the low sensitivity of photographic media. Earlier photos of animals were often captive animals. These included photos of lion cubs taken at the Bristol zoo in 1854 and in 1864, photos of the last Quagga by Frank Hayes. Wildlife photography gained more traction when faster photography emulsions and quicker shutters came in the 1880s. Developments like these lead to photos such as the ones taken by German Ottomar Anschutz in 1884, the first shots of wild birds in action. Members of the Delaware Valley Ornithological Club (DVOC) captured early photographs of nesting songbirds in the Philadelphia area in 1897.In July 1906, National Geographic published its first wildlife photos.The photos were taken by George Shiras III, a U.S. Representative from Pennsylvania. Some of his photos were taken with the first wire-tripped camera traps.</p>
<div class="custom-shape-divider-bottom-1676808801">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
<div id="mission-id" class="mission">
<h2>
Missions.
</h2>
<br>
<p>
The website intends on to focus on many rescue missions,for a bright future for the wild animals and <span>SAVE</span> many animals from their existition.
</p>
</div>
</body>
Related
I think it's important to note that I'm a complete beginner in webdev.
However, the point is that I can't yet figure out how to start a new section after using position: absolute; on the previous one.
Each time I start writing something new, it ends up either on the top of the page, or on the center of the page.
I have tried using flexbox and grid, however that didn't help me either.
So I wonder how do I do it without affecting the layout of the webpage?
It is not even a question that I have to learn more about CSS positioning.
I know it looks a bit messy.
Here's the code:
:root {
/* colors */
--clr-white: rgb(235, 255, 209);
--clr-black: rgb(10, 10, 9);
--clr-gray: rgb(30, 30, 30);
--clr-green: rgb(173, 255, 47);
--clr-orange: rgb(255, 123, 25);
--ff-main: 'Montserrat', sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: var(--clr-black);
color: var(--clr-white);
font-family: var(--ff-main);
font-size: 1.1rem;
/* line-height: 1.5; */
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1rem 3rem;
z-index: 1000;
}
nav {
display: flex;
position: sticky;
align-items: center;
justify-content: space-around;
top: 100%;
}
nav li {
line-height: 1.5;
}
main {
display: flex;
justify-content: space-around;
align-items: center;
}
a {
text-decoration: none;
color: inherit;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
z-index: -2;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
z-index: -1000;
}
.background {
background-size: cover;
/* overflow: hidden; */
/* background-repeat: no-repeat; */
width: 100%;
filter: saturate(100%) contrast(100%) blur(0.3rem) hue-rotate(111deg);
z-index: -11;
}
.btn {
border: none;
border-radius: 6px;
background-color: var(--clr-green);
padding: 0.3rem 0.6rem;
color: var(--clr-black);
cursor: pointer;
}
.button {
border: 1px solid var(--clr-orange);
border-radius: 6px;
padding: 0.3rem 0.6rem;
color: var(--clr-green);
background-color: inherit;
cursor: pointer;
font-size: 1.1rem;
font-weight: 300;
transition: all 0.6s ease 0s;
}
.button:hover {
border: 1px solid var(--clr-green);
background-color: var(--clr-green);
color: var(--clr-black);
}
.heading {
font-size: 3rem;
font-weight: 900;
letter-spacing: 0.3rem;
}
.title {
position: static;
bottom: 1%;
font-weight: 100;
letter-spacing: 0.3rem;
right: 37.5%;
width: 100%;
}
.text {
position: absolute;
bottom: 9%;
/* left: 50%; */
right: 43%;
font-size: 1.1rem;
letter-spacing: 0.3rem;
font-weight: 100;
font-size: 700;
}
.uppercase {
text-transform: uppercase;
}
.touch {
position: absolute;
top: 27%;
left: 11%;
filter: blur(0.1rem);
}
.top-left {
position: absolute;
top: 11%;
left: 9%;
font-size: 11rem;
font-weight: 900;
}
.mid-left {
position: absolute;
top: 33%;
left: 33%;
font-size: 4.3rem;
font-weight: 400;
}
.mid-center {
position: absolute;
top: 42%;
left: 11%;
font-weight: 600;
}
.center {
position: absolute;
top: 44%;
font-size: 9rem;
font-weight: 900;
left: 38%;
}
.mid-right {
position: absolute;
top: 56%;
right: 18%;
font-weight: 200;
font-size: rem;
}
.down-right {
position: absolute;
top: 66%;
right: 11%;
font-size: 11rem;
font-weight: 900;
}
.main-content {
display: flex;
justify-content: center;
align-items: center;
}
.down {
position: absolute;
bottom: 3%;
left: 46.6%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>stombic</title>
</head>
<body>
<!-- BACKGROUND -->
<section class="showcase">
<video muted autoplay class="background">
<source src="videos/1.mp4" type="video/mp4" />
</video>
<!-- MAIN -->
<main>
<section class="left">
<div class="uppercase">
<h1 class="heading"><span class="top-left">art</span> <span class="mid-left">is</span>
<span class="mid-center">where</span>
<span class="center">work</span>
<span class="mid-right">meets</span> <span class="gradient down-right">love</span></h1>
<p class="text">created to create.</p>
<button type="button" class="button down">Learn More</button>
</div>
</section>
<!-- <section>
<img src="images/splash.png" class="top-left"/>
<img src="images/hands.png" class="down-right"/>
</section> -->
</main>
</section>
</body>
</html>
This is one of the longer codes I've seen on this platform. If anyone wants the files it is not a problem for me to send it.
make the two absolute position sections inside a container that has a relative position.
You can use position: absolute on a container.
For example, use position: absolute on the main and then position the sections 'normally'. But if you need sibling sections to go next to each other and not overlap, you'd not use position: absolute on one of them.
I'd highly recommend Kevin Powell's Youtube Channel, where he makes great videos about CSS and demystifies positioning.
I'm having a problem with my code and can't figure it out. I'm writing my own website and can't get my buttons to go to the center of the page. I tried almost everything I think but it always goes to about 30% or 70% for some reason... The website is not fully responsive for now I will work on that later. What's wrong with my code? What can I do to fix it next time? Thanks for any ideas!
function showHide() {
var navList = document.getElementById("nav-lists");
if (navList.className == '_Menus') {
navList.classList.add("_Menus-show");
} else {
navList.classList.remove("_Menus-show");
}
const body = document.querySelector('body')
const twitter = document.querySelector('.twitter')
twitter.addEventListener("mouseover", function () {
body.classList.add('linked')
},false)
twitter.addEventListener("mouseout", function () {
body.classList.remove('linked')
}, false)
}
#font-face {
font-family: 'familiar_probold';
src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'),
url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sansheavy_caps';
src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'),
url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'source_sans_problack';
src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'),
url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #f7f7f7;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
.navbar {
width: 100%;
background-color: #000;
}
.container {
max-width: 1140px;
margin: 0 auto;
height: 60px;
display: flex;
flex-wrap: wrap;
}
._Logo {
overflow: hidden;
text-align: center;
flex-basis: 230px;
}
._Logo img {
height: 100% !important;
width: 150px !important;
}
._Menus ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
._Menus ul li a {
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #FFF;
outline: none;
font-family: 'uni_sansheavy_caps';
}
._Menus ul li a:hover {
background-color: #FFF;
color: #000;
}
._Iconbar {
display: none;
background-color: #000;
}
.menu-bar {
width: 45px;
align-self: center;
cursor: pointer;
}
.icon-bar {
height: 3px;
width: 100%;
background: #FFF;
margin: 7px 0;
display: block;
border-radius: 2px;
}
.toppadding{
padding-top: 0;
}
.topbackround{
width: 100%;
height: auto;
position: relative;
text-align: center;
color: white;
}
.sloganlefttextfirst{
position: absolute;
top: 20%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: grey;
}
.sloganlefttextsecond{
position: absolute;
top: 25%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
}
.sloganlefttextthird{
position: absolute;
top: 35%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: #DCC98E;
border-bottom: 6px solid #DCC98E;
padding-bottom: 3px;
}
.howitworkslefttextfirst a{
position: absolute;
top: 51%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: #B9CDBE;
border-bottom: 3px solid #B9CDBE;
padding-bottom: 3px;
text-decoration: none;
}
.howitworkslefttextsecond{
position: absolute;
top: 57%;
left: 5%;
font-family: 'Arial';
font-size: 200%;
color: white;
}
hr{
color: black;
background-color: black;
height: 8px;
border: none;
}
.midbackground{
background-color: #1B1C1E;
padding-bottom: 100px;
}
.tutorial{
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.tutorial p{
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
left: 50%;
font-family: 'Arial';
color: white;
font-size: 50%;
width: 100%;
}
.circles{
margin: 0 auto;
}
.circles > div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #1B1C1E;
}
.circles > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'uni_sansheavy_caps';
font-size: 400%;
color: grey;
}
.circles > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circles > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circles > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circles > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circles{width:800px}
.circles > div {padding: 12.5%;}
}
.circlescontent{
margin: 0 auto;
}
.circlescontent > div {
overflow:hidden;
float:left;
width:auto;
height:auto;
position: relative;
background: #1B1C1E;
}
.circlescontent > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'familiar_probold';
font-size: 250%;
color: grey;
}
.circlescontent > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circlescontent > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circlescontent > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circlescontent > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circlescontent{width:800px}
.circlescontent > div {padding: 12.5%;}
}
.statement{
padding-top: 25%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.statement p{
padding-top: 20px;
padding-bottom: 0;
text-align: center;
left: 50%;
font-family: 'familiar_probold';
color: white;
font-size: 50%;
width: 100%;
}
.statementfinal{
padding-top: 0;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
} /*HERE*/
.buttonbkg{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
left: 50%;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: inline-block;
align-content: center;
}
.gradient {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
bottom: auto;
margin: auto;
z-index: -1;
background: radial-gradient(90px circle at top center, rgba(238,88,63,.8) 30%, rgba(255,255,255,0));
transition: all 0s ease-out 0s;
transform: translatex(-140px);
animation: 18s linear 0s infinite move;
display: inline-block;
align-content: center;
}
#keyframes move {
0% {
transform: translatex(-140px);
}
25% {
transform: translatex(140px);
opacity: 0.3;
}
50% {
transform: translatex(140px);
opacity: 1;
background: radial-gradient(90px circle at bottom center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
75% {
transform: translatex(-140px);
opacity: 0.3;
}
100% {
opacity: 1;
transform: translatex(-140px);
background: radial-gradient(90px circle at top center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
}
#media (max-width: 900px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
#media (max-width: 600px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
}}
/*
#0C0028
#1D5EC3
#181A1B
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reff Skins</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<nav class="navbar">
<div class="container">
<section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
<section class="_Iconbar">
<span class="menu-bar" onclick="showHide()">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</span>
</section>
<section class="_Menus" id="nav-lists">
<ul>
<li>ABOUT</li>
<li>HOW IT WORKS</li>
<li>FAQ</li>
<li>AVAILABLE SKINS</li>
<li>SIGN IN THROUGH STEAM</li>
</ul>
</section>
</div>
</nav>
<div class="toppadding"></div>
<div class="topbackround">
<img class="topbackround" src="images/awpasiimov.jpeg">
<div class="sloganlefttextfirst">WEBSITE WITH TRULY FREE SKINS</div>
<div class="sloganlefttextsecond">LOW ON SKINS?</div>
<div class="sloganlefttextthird">TIME TO GET NEW FREE!</div>
<div class="howitworkslefttextfirst">HOW IS THIS WORKING?</div>
<div class="howitworkslefttextsecond">check how it works page or visit our YouTube</div>
<!--<button class="btn1">HOW IT WORKS</button></div>
<button class="btn2">SKINS</button></div>
<button class="btn3">SIGN IN WITH STEAM</button></div>-->
</div>
<hr></hr>
<div class="midbackground">
<div class="tutorial">HOW CAN I DO IT?<p>If you want your new skins complete the four easy steps.</p></div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
1.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
2.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
3.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
4.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SIGN IN WITH STEAM
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
DO THE REFERR PROCESS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SELECT WANTED SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
GET YOUR SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="statement">IT'S THAT EASY<p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p></div>
<div class="statementfinal">WE SAID NO TO CATCHES!</div>
<div class="buttunbkg">
<span class="gradient"></span>SIGN IN WITH STEAM
<span class="gradient"></span>AVAILABLE SKINS
<span class="gradient"></span>HOW IT WORKS
</div>
</div>
</body>
</html>
Seems like you've got it half using flex, here's an answer sticking to it.
Firstly, you spelt buttonbkg wrong. Add flex-direction: column to it. Then like others said you will want to get rid of the left: 50%. On your .steam add your flex, and center align/justify.
.buttonbkg{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: flex;
justify-content: center;
align-items: center;
}
You need to add this to your button selector:
.button {
transform: translateX(-50%);
}
On your .button class you have left: 50%;, remove it. Also add margin: 3% auto
On you .steam class change display: inline-block; to display: block;
margin: 3% auto
3% -> top/bottom margin
auto -> left/right margin, auto will make left an right margin the same
Other solution would be to change your transform: translatez(0); to transform: translateX(-50%);, but I think transform is like shooting with a shotgun at a fly.
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
Basically what should I do to adjust it from (too small)to this (ideal)
Just change it:
.shots .shot {
overflow: hidden;
position: relative;
width: 33%; // <-- change it
height: 100px;
flex-grow: 1; // <-- add
}
I would use media queries and target the classes you want to amend on the different screen sizes to make it fit as you need. Some useful links:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your case, you would need to amend the width of the card to 100% on mobile to achieve the design on your screenshot. Hope that makes sense! :)
I have some divs and among them there's a small gap or whitespace.
I have tried changing margin top and bottom but it is not working. I think it's something to do with the image but I have not found a solution yet.
HTML
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Vizion Fitness</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "vizion.css">
</head>
<body>
<div class = "clearfix menu">
Vizion Fitness
Contact
Pricing
Trainers
Home
</div>
<div id = "header-bg">
<div id = "header-wrapper">
</div>
</div>
` <div class = "details-wrapper">
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: red;
}
p{
font-size: 16px;
}
a:link{
font-size: 16px;
text-decoration: none;
margin: 0;
padding: 0;
}
a:visited{
text-decoration: none;
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6,ul,ol,li{
margin: 0;
padding: 0;
}
ul, ol{
list-style-type: none;
}
::selection{
color: #fff;
background-color: #333;
}
::-moz-selection{
color: #fff;
background-color: #333;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.menu{
position:relative;
background-color: #666666;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: 150;
margin-bottom: 0;
}
.logo:link{
float: left;
font-size: 28px;
color: white;
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
.nav-links:link{
float: right;
font-size: 18px;
color: white;
margin-right: 20px;
margin-top: 30px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.nav-links:hover{
color: #ff5b5b;
}
#header-bg{
position: relative;
width: 100%;
height: 590px;
margin-top: 0;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
line-height: 0px;
}
#header-wrapper{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
line-height: 0px;
}
/*-----------------------------------------------------DETAILS----------------------------*/
.details-wrapper{
position: relative;
width: 100%;
height: 400px;
background-color: red;
}
There is a ` character in html, which makes extra space.
You have a ` between those divs
Replace those divs with this
<div id = "header-bg">
<div id = "header-wrapper">
</div>
</div>
<div class = "details-wrapper">
</div>
remove height from #header-bg. You set 590px for the height.
https://jsfiddle.net/owmbw4x6/
Poistioning and display:flex does not well together.
If you want to use position:absolute on the flexed container apply position:absolute on #header-bg,it is because of that you have the white space
check this snippet
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: red;
}
p {
font-size: 16px;
}
a:link {
font-size: 16px;
text-decoration: none;
margin: 0;
padding: 0;
}
a:visited {
text-decoration: none;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li {
margin: 0;
padding: 0;
}
ul,
ol {
list-style-type: none;
}
::selection {
color: #fff;
background-color: #333;
}
::-moz-selection {
color: #fff;
background-color: #333;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.menu {
position: relative;
background-color: #666666;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: 150;
margin-bottom: 0;
}
.logo:link {
float: left;
font-size: 28px;
color: white;
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
.nav-links:link {
float: right;
font-size: 18px;
color: white;
margin-right: 20px;
margin-top: 30px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.nav-links:hover {
color: #ff5b5b;
}
#header-bg {
position: relative;
width: 100%;
height: 590px;
margin-top: 0;
background-image: url(https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
line-height: 0px;
}
#header-bg {
position: absolute;
}
#header-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
line-height: 0px;
}
/*-----------------------------------------------------DETAILS----------------------------*/
.details-wrapper {
position: relative;
width: 100%;
height: 400px;
}
<html lang="en-us">
<head>
<title>Vizion Fitness</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vizion.css">
</head>
<body>
<div class="clearfix menu">
Vizion Fitness
Contact
Pricing
Trainers
Home
</div>
<div id="header-bg">
<div id="header-wrapper">
</div>
</div>
<div class="details-wrapper">
heyllo--details wrapper
</div>
</body>
</html>
Hope it helps
I am making a website and one of my biggest problem right now is making it fit on all screens and mobile friendly. One of my biggest problems with that is the horizontal scrollbar! I appreciate anything that can be offered.
here is my code:
<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>morgan</title>
<style>
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") white no-repeat center top;
background-size: 100%;
background-color: white;
margin: 0;
padding: 0;
overflow-x: none;
}
h2 {
Font-family: Arial;
top: 650px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h3 {
Font-family: Arial;
top: 900px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h1 {
position: absolute;
top: 21%;
left: 36%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 600px;
top: 720px;
left: 310px;
height: 25px;
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
ul {
margin-right: 10%;
}
.wrapper {
padding-top: 0%;
}
#media screen and (max-width: 300px) {
.wrapper {
padding-top: 40%;
}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 480%;
}
ul{
margin-top: 165px;
margin-left: 20px;
}
h1{
position:absolute;
top: 120px;
left: 150px;
font-size: 19px;
}
h2 {
font-size: 20px;
width: 200px;
left: 100px;
top: 200px;
}
p {
left: 30px;
top: 390px;
}
hr {
margin-right: 85px;
margin-left: 85px;
margin-top: 375px;
}
}
hr {
margin-right: 150px;
margin-left: 150px;
margin-top: 570px;
}
</style>
</head>
<body>
<center><h1>WHO I AM</h1></center>
<div class="wrapper">
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, I have a twin brother whose <br>
name is Pierson McNeal White, I have a older brother and sister who are also <br>
twins, I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
<hr>
<h3>Me In A Nutshell</h3>
</body>
Simply use
overflow-x: none;
for the horizontal scrollbar issue.
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-x: none;
}
Messed around with your code, didnt spend all day though. So there is still room for improvement, but fish around in here and pick what you like or build off of it.
body {
background-color: #e3e3e3;
margin: 0 auto;
padding: 0;
font-family: Arial;
}
.header {
background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #000;
text-align: center;
height: 400px;
}
.mobilelinks {display: none;}
.wrapper {
margin: 50px;
}
#footer {
text-align: center;
}
#footer a {
color: #666;
margin-left: 8px;
}
#footer a:hover {
color: #222;
text-decoration: underline;
}
h1 {
color: white;
font-family: Arial;
font-size: 72px;
letter-spacing: 1px;
}
h2 {
color: #525252;
font-size: 36px;
letter-spacing: 1px;
text-align: center;
}
p {
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
text-align: center;
line-height: 40px;
display: inline-block;
letter-spacing: 1px;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:hover {
background-color: white;
}
ul li:hover > a {
color: #000;
}
#media screen and (max-width: 750px) {
.header {height: 300px;}
}
#media screen and (max-width: 500px) {
h1 {
font-size: 52px;
}
.links {display: none;}
.mobilelinks {display: inline-block;}
}
#media screen and (max-width: 400px) {
.header {height: 200px;}
.mobile-terms { display: none;}
h1 {
font-size: 36px;
}
h2 {
font-size: 22px;
}
}
<head>
<title>Morgan the Great</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
<h1>Morgan White</h1>
<ul class="links">
<li><strong>MY LIFE</strong></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
<ul class="mobilelinks">
<li><strong>BUTTON</strong></li>
</ul>
</div>
<div id="mainwrapper">
<div class="wrapper">
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, <br>
I have a twin brother whose name is Pierson McNeal White, <br>
I have a older brother and sister who are also twins, <br>
I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
</div>
<hr>
<div class="wrapper">
<h2>Me In A Nutshell</h2>
<p>
Other Crap Here.
</p>
</div>
</div>
<div id="footer">
Copyright © <script>document.write(new Date().getFullYear())</script> Morgan.
<div>
Link
Privacy Policy
Terms<span class="mobile-terms"> of Service</span>
</div>
</div>
Works on mobile devices.