Hi all,
I have a design like an image and used bootstrap 5 for coding. I want to carry the sticky div area from the number one to the first div after on mobile. I can't use js. I tried to use CSS flexbox order but how can ı do that with only CSS?
I look forward to your ideas and suggestions.
Thank you so much!
body {
padding-top: 50px;
padding-bottom: 600px;
}
.box {
width: 100%;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size:92px;
}
.box:nth-of-type(1) {
background-color: #A7A7A7;
height: 232px;
}
.box:nth-of-type(2) {
background-color: #A7A7A7;
height: 250px;
}
.box:nth-of-type(3) {
background-color: #A7A7A7;
height: 500px;
}
.sticky {
background-color: #DDBEBE;
width: 100%;
height: 300px;
position: sticky;
top:0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
</div>
<div class="col-lg-6">
<div class="sticky">
sticky area
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
I doubt this is achieveable with flexbox alone.
However, I managed to address your requirements with display: grid and some fiddling with grid-areas on the elements. This solution also defines a specific grid-template per screen resolution.
.container {
display: grid;
grid-template-areas:
"box1 sticky"
"box2 sticky"
"box3 sticky";
}
#media (max-width: 1024px) {
.container {
grid-template-areas:
"box1"
"sticky"
"box2"
"box3";
}
}
The caveat here is that each element has to have its dedicated grid-area value for the template, so won't work for the cases where you don't know the exact number of containers in play or such number is unreasonably high.
Hope this helps!
body {
padding-top: 50px;
padding-bottom: 600px;
}
.box {
width: 100%;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 92px;
}
.box:nth-of-type(1) {
background-color: #A7A7A7;
height: 232px;
grid-area: box1;
}
.box:nth-of-type(2) {
background-color: #A7A7A7;
height: 250px;
grid-area: box2;
}
.box:nth-of-type(3) {
background-color: #A7A7A7;
height: 500px;
grid-area: box3;
}
.sticky {
order: 1;
background-color: #DDBEBE;
width: 100%;
height: 300px;
position: sticky;
top: 0;
grid-area: sticky;
}
.container {
display: grid;
grid-template-areas:
"box1 sticky"
"box2 sticky"
"box3 sticky";
}
#media (max-width: 1024px) {
.container {
grid-template-areas:
"box1"
"sticky"
"box2"
"box3";
}
.sticky {
position: static;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="sticky">
sticky area
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
Related
I am building a very simple web page with the purpose of using it later for javascript.
It is an image with a button that will perform functions later, however, as soon as I was able to center my background, it overlaps the content and does not let me see it or interact with it.
* {
box-sizing: border-box;
}
.bg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src="https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src="https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/2000/0000FF/808080" style="width: 150px">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
The idea is of course to be able to visualize all the content.
As a side note, the image that I am using to make the button (container) is in png so that it does not stain my background
This is because you have set the position property on .bg to be fixed. Once you do that the div gets fixed on the top left corner and takes the topmost position on the stack order of elements and hence hiding other elements.
Kindly make the following changes to the code and it should work.
* {
box-sizing: border-box;
}
.bg {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index:-1;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src= "https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src= "https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/150/0000CC/808080" style= "width: 150px" >
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
My css and html is as below but when I shrink the screen size, content columns are not working as I want them one below another.
To be more clear, I want the screen divided into two columns on bigger display. But on smaller screens each content column should occupy hundred percent width of the screen.
.page-container {
position: relative;
min-height: 100vh;
}
.content-wrapper {
padding-bottom: 100px;
}
.left-content {
width: 75%;
float: left;
background-color: red;
}
.right-content {
width: 25%;
float: left;
background-color: green;
}
.content-wrapper:after {
content: "";
display: table;
clear: both;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
color: white;
text-align: center;
}
#media screen and (max width: 800px) {
.left-content, .right-content {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<div class="page-container">
<div class="content-wrapper">
<div class="left-content">
<p>This is left content.</p>
</div>
<div class="right-content">
<p>This is right content.</p>
</div>
</div>
<div class="footer">
This is footer.
</div>
</div>
</body>
</html>
I want the green right column below the red left column when the screen size is small.
There is a syntax error in the media feature part of your media query. It must be #media screen and (max-width: 800px), with a -.
Here is a solution using flexbox instead of relying on float
You had an error in your media query as well. You were missing the dash in max-width
.page-container {
position: relative;
min-height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.content-wrapper {
padding-bottom: 100px;
display: flex;
flex-flow: row nowrap;
flex: 1;
}
.left-content {
width: 75%;
background-color: red;
}
.right-content {
width: 25%;
background-color: green;
}
.content-wrapper::after {
content: "";
display: table;
clear: both;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
color: white;
text-align: center;
}
#media screen and (max-width: 800px) {
.left-content, .right-content {
width: 100%;
}
.content-wrapper {
flex-flow: column nowrap;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<div class="page-container">
<div class="content-wrapper">
<div class="left-content">
<p>This is left content.</p>
</div>
<div class="right-content">
<p>This is right content.</p>
</div>
</div>
<div class="footer">
This is footer.
</div>
</div>
</body>
</html>
This question already has answers here:
Why does minmax(0, 1fr) work for long elements while 1fr doesn't?
(1 answer)
Prevent content from expanding grid items
(3 answers)
Equal height rows in CSS Grid Layout
(2 answers)
Closed 4 years ago.
Hi I am currently working on a small web interface.
My problem is a vertical scrollbar which appears even though I have set the
body{
height:100vh;
margin:0;
padding:0;
}
For my understanding this should set the height of the body to the full height of the viewport while removing every margin / padding. This means that there is no space around the body so there shouldn't be any scrolling.
Here is a screenshot from the current view.
As you can see there is a vertical scrollbar aswell as the footer not being shown correctly.
My Current code can be found here:
:root {
--white: #FFFFFF;
--grey_237: #EDEDED;
--grey_220: #DCDCDC;
--grey_178: #B2B2B2;
--grey_107: #6B6B6B;
--functional_red: #D90000;
--fucntional_yellow: #FECB00;
--functional_green: #46A800;
--functional_blue: #009DE0;
--company: #544b83
}
.card-3 {
grid-column-end: span 3
}
.card-4 {
grid-column-end: span 4
}
.card-5 {
grid-column-end: span 5
}
.card-10 {
grid-column-end: span 10
}
.justify_right {
justify-items: end;
text-align: end
}
.no_margin {
margin: 0
}
.no_padding {
padding: 0
}
.start-1 {
grid-column-start: 1
}
.start-2 {
grid-column-start: 2
}
.start-3 {
grid-column-start: 3
}
.start-4 {
grid-column-start: 4
}
.start-5 {
grid-column-start: 5
}
.deep-2 {
grid-row-end: span 2
}
.uppercase {
text-transform: uppercase
}
.card {
background-color: #fff
}
body {
background-color: var(--grey_237);
display: grid;
grid-template-rows: auto 1fr auto;
grid-gap: 25px;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
max-width: 90%
}
#content {
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 25px
}
.color_bg {
background-color: var(--company);
color: var(--white)
}
#brand_header {
display: grid;
height: 70px;
text-align: center;
align-content: center
}
#slogan {
display: grid;
align-content: center;
font-weight: 900
}
#branding_title {
font-weight: 700;
color: var(--company)
}
#content_title {
color: var(--company);
font-size: 3em;
font-weight: 900;
}
.card_title {
font-weight: 600!important;
font-size: 2em
}
.card-right {
display: grid;
grid-template-columns: 1fr 1fr
}
.card-right .card-body {
display: grid;
grid-gap: 5px
}
.card_change {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 5px;
align-items: center
}
.card_value {
display: grid;
align-self: end
}
.card_change {
display: grid;
align-self: start
}
.card_graph {
background-image: url(https://via.placeholder.com/150x150?text=graph);
background-size: cover;
background-position: center
}
#trends {
background-image: url(https://via.placeholder.com/550x350?text=graph);
background-size: cover;
background-position: center
}
#footer {
display: grid;
height: 40px;
background-color: white;
display: grid;
align-items: center
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<title>Site</title>
</head>
<body>
<div id="header">
<div id="brand_header" class="color_bg">
<div class="container">
<div id="header_text" class="row justify-content-between">
<div id="slogan" class="justify_right">
<p class="no_margin uppercase">Our slogan</p>
</div>
</div>
</div>
</div>
<div id="navbar">
<nav class="navbar navbar-light bg-light">
<div class="container no_padding">
<span class="navbar-brand no_margin uppercase" id="branding_title">
Our Team
</span>
</div>
</nav>
</div>
</div>
<div id="content" class="container no_padding">
<div class="card-3 start-1">
<h2 id="content_title">title</h2>
</div>
<div id="card_1" class="card card-3 start-1 card-right">
<div class="card-body">
<h5 class="card_title text-muted">Card 3</h5>
<h2 class="card_value no_margin">Data</h2>
<div class="card_change">
<span id="card_1_change_value" class="change_value">change</span>
</div>
</div>
<div id="card_1_graph" class="card_graph thumbnail ">
<div class="chart-container" style="position: relative; width:99%; height:99%;">
<canvas id=""></canvas>
</div>
</div>
</div>
<div id="trends" class="card card-10 deep-2 ">
<div class="chart-container" style="position: relative; width:99%; height:99%;">
<canvas id=""></canvas>
</div>
</div>
</div>
<div id="footer">
<div class="container">
footer
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
A link to codepen can be found here:
Codepen Link
There will be some charts inside the cards. That is the reason why there is the following snippet:
<div class="chart-container" style="position: relative; width:99%; height:99%;">
<canvas id=""></canvas>
</div>
It was created according to the documentation of chart.js
My Idea of the problems cause
My current idea is that the content of the body is to big in order to be rendered correctly. While this sounds like a reasonable cause I don't know why this occured since I was using relative units.
I'd be happy for your assistance and I'd like to thank everybody in advance.
Added later:
I tried to use
overflow:hidden;
The problem here is, even though it solves the scrollbar problem the webpage is still not showing the while view (only half the footer)
I was looking through the dev tools when I've been seeing this:
It seems like the body is scaling correctly (100vh) but the footer seems to be partially rendered outside the body.
Don't know why this is happening but it seems interesting.
There was the idea that my grid-gap is causing the issue since it forces a gap.
I was testing this here and it's not the problem since the fr unit is adjusting accordingly.
body {
margin: 0;
padding: 0;
height: 100vh;
}
.content {
height: 100%;
display: grid;
grid-template-rows: 1fr 1fr;
grid-gap: 25px;
}
#div1 {
background-color: aquamarine;
}
#div2 {
background-color: blanchedalmond;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="content">
<div id="div1">
This is div 1
</div>
<div id="div2">
This is div 2
</div>
</div>
</body>
</html>
I then tried the same but with margin instead of grid-gap.
The result is still the same as fr is not only adjusting to grid-gap but also all the other paddings / margins.
body {
margin: 0;
padding: 0;
height: 100vh;
}
.content {
height: 100%;
display: grid;
grid-template-rows: 1fr 1fr;
}
#div1 {
background-color: aquamarine;
}
#div2 {
margin-top: 25px;
background-color: blanchedalmond;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="content">
<div id="div1">
This is div 1
</div>
<div id="div2">
This is div 2
</div>
</div>
</body>
</html>
I'm new here in Stack Overflow and I have a problem with flexbox.
I want to use a <main> and <footer> with display: flex; where each row of main has 2 columns with height: 100% of the browser and footer has 2 rows, first with 3 columns and the second only one column, both with height: auto;
But when I do this my footer overlaps <main> because its height is 100%, but I need it for the 100% of the children. Am I clear?
#font-face {
font-family: "Open Sans";
src: url(../fonts/OpenSans-Regular.ttf);
}
#font-face {
font-family: "Time Burner";
src: url(../fonts/TimeBurner-Regular.ttf);
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Open Sans";
scroll-behavior: smooth;
}
main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.flex {
height: 100%;
flex-basis: 50%;
box-sizing: border-box;
padding: 20px;
}
.home {
background-attachment: fixed;
background-image: url("../img/bg.jpg");
background-position: 50%;
background-size: cover;
}
.flex:nth-child(even) {
border: 5px solid blue;
}
.flex:nth-child(odd) {
border: 5px solid red;
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
width: 200px;
height: 50px;
background-color: gray;
text-align: center;
}
footer {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.footer {
flex-basis: 100%;
height: auto;
}
.thumb {
position: fixed;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: gray;
right: 20px;
bottom: 20px;
}
#media (max-width: 768px) {
.flex {
flex-basis: 100%;
}
.arrow {
bottom: -100%;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- ¿Qué hacés en mi código? ¿Te gustó algo?
Bueno, como sea, que tengas una linda visita :) -->
<meta charset="UTF-8">
<title>OnePage</title>
<meta name="theme-color" content="#34a853" />
<meta name="viewport" content="width=device-width" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="icon" href="img/favicon.png" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/dist/css/bootstrap.css" />
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<main>
<section class="flex home" id="inicio">
1 - Izquierda
</section>
<section class="flex home">
2 - Derecha
</section>
<a class="arrow" href="#3">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</a>
<section class="flex" id="3">
3 - Izquierda
</section>
<section class="flex">
4 - Derecha
</section>
</main>
<footer>
<section class="flex footer">
5 - Footer
</section>
</footer>
<a class="thumb" href="#inicio">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
</a>
</body>
</html>
Here is my solution for you layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
main,
footer {
display: flex;
flex-wrap: wrap;
}
.main-item {
flex:0 1 50%;
height: 100vh;
background-color: tomato;
}
.footer-item {
flex: 1;
background-color: lightsalmon;
}
.footer-item:last-child {
flex: 0 0 100vw;
background-color: blue;
}
</style>
<body>
<main>
<div class="main-item">m1</div>
<div class="main-item">m2</div>
<div class="main-item">m3</div>
<div class="main-item">m4</div>
</main>
<footer>
<div class="footer-item">f1</div>
<div class="footer-item">f2</div>
<div class="footer-item">f3</div>
<div class="footer-item">f4</div>
</footer>
</body>
</html>
Thanks(Gracias), T04435.
Put min-height:100% on body
Remove height:100% from body
I'm unable to move .intro .inner to the middle so my writing are in the middle. Please help how I can move my content to the middle. It's just stuck on the top left and won't move with the CSS I have added.
#import url("https://fonts.googleapis.com/css?family=Lato" rel="stylesheet");
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/images/landing-screen.png);
display:table;
top: 0;
background-size: cover;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
padding-left: 100px;
text-align: center;
padding-bottom: 28%;
}
/*---Media Queries---*/
#media screen and (max-width: 900px) {
}
#media screen and (max-width: 768px) {
}
#media screen and (max-width: 480px) {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jamshid Ebadi's Portolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta Charset='uft-8'>
<link rel='shortcut icon' href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/images/favicon.png">
<link rel="stylesheet" href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/index.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/animate.css" rel="stylesheet"/>
<link href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/waypoints.css" rel="stylesheet"/>
<script src="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/waypoints.js" type="text/javascript"></script>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="pulse" data-os-animation-delay="0s">
<h1> Animate Easy</h1>
</section>
<section class="os-animation" data-os-animation="pulse" data-os-animation-delay="1s">
<a class="btn" href="#">Get Started</a>
</section>
</div>
</div>
</section>
</body>
<html>
Each element has a container.
For example we have this:
.item {
position: absolute;
top: 50%;
left: 50%;
margin-top: -height_size/2;
margin-left: -width_size/2;
}
<div class="container">
<div class="item"></div>
</div>
you must determine item size(width and height)
You must declare width of your content to center it. Try this solutions
.middle{
margin-left:auto;
position: relative;
display:block;
margin-right:auto;
width:25%}
<div class="middle">
<p>content</P>
</div>
Better you try Below Example in your code.
.middle {
margin-left:auto;
margin-right:auto;
padding:50%;
}
<div class="middle">
<p>Text</P>
</div>