Kadeem L
Reputation: 863
Body white space appearing below content
Firstly some background. I created a fixed footer, which is revealed when the user scrolls to the bottom of the page which works fine. Now the problem. When the user scrolls to the bottom, they are met with a space just above the footer which is highlighted in red.
I've tried to place the footer higher in order to overlap the space through adding pixels inbottom:to the .goodbye tag but this hasn't helped. Here is the JSFiddle in fullscreen, to give you an idea of what I'm talking about. Note the awkward red space. How can I remove this completely and responsively also, so there is also no space when the viewport is resized?
UPDATE:
Please find code attached below.
html body {
width:100%;
max-height: 400px;
position: relative;
background-color:red;
}
.goodbye {
position: fixed;
bottom: 0;
background-color: #f4f4f4;
z-index: -9;
width: 100%;
height: 500px;
padding: 2rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: center;
}
.goodbye a {
font-size: 4em;
font-family:'brandon-grotesque';
}
.text-go {
color: red;
background-color: pink;
height: 80%;
width: 100%;
}
.social-links {
background-color: yellow;
height: 20%;
widows: 100%;
}
.lineout {
width: 30%;
background-image: url(http://kadeem.london/Image/line-out.png);
}
@charset"UTF-8";
.Second-Header, .row, sub, sup {
position: relative
}
.Intro-Video, body {
-webkit-backface-visibility: hidden
}
.byebye {
position: relative;
}
.contact ul, ul, ul.proficient {
list-style-type: none
}
.menubutton, html {
-webkit-text-size-adjust: 100%
}
.menubutton, .row {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none
}
.Biographical-Content a, .contact li, .contact li a, .contact ul, .endh4 a, .footer, .item-type-double .item-hover, .overlay ul li a, .registry-description p a, .registry-description p a:hover {
text-decoration: none
}
.width (@cols:1) {
width: (@cols * (@column +@gutter) -@gutter) /@em;
}
article, aside, blockquote, body, dd, div, dl, dt, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, label, legend, li, menu, nav, ol, p, pre, section, td, th, ul {
margin: 0;
padding: 0;
border: 0
}
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, nav, section, video {
display: block
}
html {
height: 100%;
-ms-text-size-adjust: 100%
}
body {
min-height: 100%
}b, strong {
font-weight: 700
}
abbr[title] {
border-bottom: 1px dotted
}
table {
border-collapse: collapse;
border-spacing: 0
}
a img, img {
-ms-interpolation-mode: bicubic;
border: 0
}
button, input, select, textarea {
margin: 0;
font-size: 100%;
line-height: normal;
vertical-align: baseline
}
button, html input[type=button], input[type=reset], input[type=submit] {
cursor: pointer;
-webkit-appearance: button
}
input[type=radio], input[type=checkbox] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box
}
textarea {
overflow: auto
}
::selection {
background: #e94378;
color: #fff
}
::-moz-selection {
background: #e94378;
color: #fff
}
img::selection {
background: 0 0
}
img::-moz-selection {
background: 0 0
}
@media screen and (max-width: 1px) {
body {
font-size: (@font-size + 2)/16*1em
}
}
body {
-webkit-tap-highlight-color: rgba(255, 0, 0, .62);
font: 100%/1.5 serif
}
@media (min-width: 600px) {
body {
font: 112.5%
}
}
::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
width: 7px;
height: 7px;
border-radius: 4px
}
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
background: #fff
}
::-webkit-scrollbar-thumb {
background: #232323
}
::-webkit-scrollbar-button {
display: none
}
.row {
display: block;
margin-bottom: 1em;
margin-top: 5em;
color: #000
}
.Second-Header {
display: block;
margin-bottom: 5em;
margin-top: 4em;
color: #fff
}
.Second-Header h2 {
font-family:'Abril Fatface', cursive;
font-size: 2.5em;
font-weight: 400;
color: fff
}
body, h1, h2, h3, h4, h5, h6 {
font-size: 1rem;
font-weight: 500;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif
}
@media (max-width: 777px) {
.Second-Header {
margin-bottom: 4em;
margin-top: 3em
}
.Second-Header h2 {
font-size: 2em
}
}
@media (max-width: 666px) {
.Second-Header {
margin-bottom: 3em;
margin-top: 2em
}
.Second-Header h2 {
font-size: 1.8em
}
}
@media (max-width: 555px) {
.Second-Header {
margin-bottom: 2em;
margin-top: .5em
}
.Second-Header h2 {
font-size: 1.5em
}
}
@media (max-width: 444px) {
.Second-Header h2 {
font-size: 1.3em
}
}
@media (max-width: 333px) {
.Second-Header h2 {
font-size: 1.2em
}
}
@media (max-width: 222px) {
.Second-Header h2 {
font-size: 1em
}
}
@media (max-width: 888px) {
.row {
margin: 3em 0 0
}
}
@media (max-width: 666px) {
.row h2 {
margin-top: 1.5em
}
}
@media (max-width: 555px) {
.row h2 {
margin-top: 1em
}
}
.row h2 {
font-family:'Abril Fatface', cursive;
font-size: 2.5em;
font-weight: 400;
color: #000
}
@media (max-width: 777px) {
.row h2 {
font-size: 2em
}
}
@media (max-width: 666px) {
.row h2 {
font-size: 1.8em
}
}
@media (max-width: 555px) {
.row h2 {
font-size: 1.5em
}
}
@media (max-width: 444px) {
.row h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 1.3em
}
}
@media (max-width: 333px) {
.row h2 {
font-size: 1.2em
}
}
@media (max-width: 222px) {
.row h2 {
font-size: 1em
}
}
.row h2 span:after {
content:'The Man'
}
h1 {
font-size: 2.5em
}
h2 {
font-size: 1.875em
}
p {
font-size: .875em
}
.My-Gems {
width: 100%;
height: 100%;
margin-top: -360px;
overflow: hidden;
}
@media screen and (max-width: 444px) {
.My-Gems {
width: 100%
}
}
@media screen and (max-width: 333px) {
.My-Gems {
width: 100%
}
}
.global-container {
width: 100%;
position: relative;
background-color: #fff;
}
.high-container {
width: 100%;
position: relative;
background-color: transparent;
height: 3200px;
}
.content-container, .post-container {
text-align: center;
padding: 0;
width: 100%;
background-color: #50b796;
height: 100%;
margin: 0;
position: relative
}
.content-container {
min-height: 600px;
max-width: 1359px
}
.post-container {
z-index: 0;
top: 400px;
max-height: 100%
}
.Well-Aligned {
position: absolute;
left: 0;
top: -280px;
width: 100%;
height: 600px;
background-color: #fff;
z-index: 0;
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg)
}
@media (max-width: 999px) {
.Well-Aligned {
height: 560px
}
}
@media (max-width: 777px) {
.Well-Aligned {
height: 520px
}
}
@media (max-width: 666px) {
.Well-Aligned {
height: 470px
}
}
@media (max-width: 555px) {
.Well-Aligned {
height: 420px
}
}
@media (max-width: 333px) {
.Well-Aligned {
height: 380px
}
}
.Biographical-Content {
z-index: 99999;
display: block;
top: -350px;
position: relative;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif;
width: 65%;
margin-left: auto;
text-align: center;
padding: 0;
margin-right: auto
}
@media (max-width: 444px) {
.Biographical-Content {
top: -365px
}
}
@media (max-width: 333px) {
.Biographical-Content {
top: -375px
}
}
.Biographical-Content p {
margin-top: 20px;
padding: 0;
transition: all .3s ease-out;
font-size: 20px;
line-height: 2em
}
.Biographical-Content a, .Biographical-Content p {
color: #fff;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out
}
@media (max-width: 1111px) {
.Biographical-Content {
width: 70%
}
.Biographical-Content p {
font-size: 18px;
line-height: 1.8em
}
}
@media (max-width: 999px) {
.Biographical-Content {
width: 75%
}
.Biographical-Content p {
font-size: 16px;
line-height: 1.6em
}
}
@media (max-width: 555px) {
.Biographical-Content p {
font-size: 14px;
line-height: 1.4em
}
.Biographical-Content {
width: 80%
}
}
@media (max-width: 444px) {
.Biographical-Content p {
font-size: 12px;
line-height: 1.4em
}
.Biographical-Content {
width: 85%
}
}
.Biographical-Content a {
cursor: pointer;
border-bottom: 2px solid #fff;
transition: all .3s ease-out
}
.Biographical-Content a:hover {
background-color: #e94378;
color: #fff;
transition: all .3s ease-out
}
.Biographical-Content a:hover, .item {
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out`;
-webkit-transition: all .3s ease-out
}
#intro-text {
color: #f3f3f3;
font-size: 2em;
}
.Intro-Video, .step {
overflow: hidden;
position: relative;
background-color: #fff
}
.step {
width: 75%;
-webkit-background-size: cover;
z-index: 999999999999999;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(http://kadeem.london/Image/Kadeem-Lisbon-min.jpg);
margin: 0 auto;
text-align: center;
background-repeat: no-repeat
}
.step:nth-child(odd) {
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left
}
.step:nth-child(even) {
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right
}
.step.out-view:nth-child(odd) {
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg)
}
.step.out-view:nth-child(even) {
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg)
}
.Kadeem-Logo {
position: relative;
top: 0;
width: 100%;
display: block
}
.Kadeem-Logo img {
display: block;
width: auto;
max-width: 100%
}
.Intro-Video {
z-index: 9999;
width: 100%;
display: block
}
.video-box {
height: 100%;
width: 100%;
position: relative
}
#video-container {
height: 100%;
width: 100%;
overflow: hidden
}
@media (max-width: 600px) {
.Intro-Video {
background-image: url(http://kadeem.london/Image/kadeem-bg-min.jpg);
width: 100%;
background-size: cover
}
.video-box {
visibility: hidden
}
#video-container {
visibility: visible
}
}
.hide, .overlay-hugeinc {
visibility: hidden
}
video {
position: absolute;
z-index: 0;
background: url(http://kadeem.london/Image/kadeem-bg.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
video.fillWidth {
width: 100%
}
@media (max-width: 600px) {
video {
visibility: hidden
}
}
.item {
text-align: center;
transition: all .3s ease-out;
float: left;
position: relative;
width: 50%;
height: 100%
}
.item-hover, .item-hover .mask, .item-img, .item-info {
width: 100%;
height: 100%
}
.item-hover, .item-hover .mask {
position: absolute;
top: 0;
height: 100%;
left: 0
}
.item-type-double .item-hover {
z-index: 5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
cursor: pointer;
display: block;
text-align: center
}
.item-type-double .item-info {
color: #fff;
display: table;
position: relative;
z-index: 5
}
.item-type-double .item-info div.mycell {
vertical-align: middle;
height: 100%;
display: table-cell
}
.item-type-double .item-info .headline {
font-size: 2.4em;
font-family:'Proxima Nova' sans-serif;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
@media (max-width: 500px) {
.item {
width: 100%;
height: 100%
}
}
@media (max-width: 888px) {
.item-type-double .item-info .headline {
font-size: 1.8em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 666px) {
.item-type-double .item-info .headline {
font-size: 1.4em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 444px) {
.item-type-double .item-info .headline {
font-size: 1.3em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 390px) {
.item-type-double .item-info .headline {
font-size: .8em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 333px) {
.item-type-double .item-info .headline {
font-size: .6em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 222px) {
.item-type-double .item-info .headline {
font-size: .5em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
.item-type-double .item-info .date {
font-size: 20px;
font-family: Canter;
text-transform: uppercase
}
@media (max-width: 444px) {
.item-type-double .item-info .date {
font-size: 16px;
text-transform: uppercase
}
}
@media (max-width: 333px) {
.item-type-double .item-info .date {
font-size: 10px;
text-transform: uppercase
}
}
.item-type-double .item-hover .mask {
background-color: #000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5;
z-index: 0
}
.item-type-double .item-hover:hover .line {
width: 90%
}
.item-type-double .item-hover:hover {
opacity: 1
}
.item-img {
width: 100%;
z-index: 0
}
.item-img img {
width: 100%;
display: block
}<body>
<div class="high-container">
<div class=global-container>
<div class=Intro-Video>
<div class=video-box>
<div id=video-container>
<video autoplay class=fillWidth>
<source src=Video/Trailer.mp4 type="video/mp4" />
</video>
<div class=Kadeem-Logo>
<img src=http://www.google.com>
</div>
</div>
<!-- Video Container -->
</div>
<!-- Video Box-->
</div>
<!-- Intro Video -->
<div class=content-container>
<div class=post-container>
<div class=Biographical-Content>
<div class="step out-view"></div>
<!--Image-->
<br>
<p>Hello Stackers</p>
</div>
<div class=My-Gems>
<div class=Second-Header>
<h2><img src="www.google.com"/></h2>
</div>
<div class="item item-type-double">
<div class=item-img>
<img src=http://www.google.com class=menukadeem title=Piggy-Box-Logo />
</div>
<a class=item-hover href=designs.html>
<div class=item-info>
<div class=mycell>
<div class=headline>Designs</div>
</div>
</div>
<div class=mask></div>
</a>
</div>
<div class="item item-type-double">
<div class=item-img>
<img src=www.google.com alt=Metaphon-Fitness title=Metaphon-Fitness alt=Kadeem-Metaphon-Fitness style="width:100%" />
</div>
<a class=item-hover href=#>
<div class=item-info>
<div class=mycell>
<div class=headline>Events</div>
</div></div>
<div class=mask></div>
</a>
</div>
</div>
<!--My Gems-->
</div>
<!--Post Container-->
</div>
<!--Content Container-->
<footer class="goodbye">
<div class="text-go"><a></a>
</div>
<hr>
<div class="social-links"></div>
</footer>
</div>
<!-- Global Container-->Upvotes: 0
Views: 954
Answers (1)
Jupe
Reputation: 31
Looks like the problem is a wonky box model. Fortunately, it's fixable!
Once you refactor your CSS to make the .content-container's contents fit within it (you can test pretty quickly and easily by hovering over elements in chrome's inspector), you can add a bottom margin to the .content-container that's the same height as the footer. Then you'll be able to keep your cool scroll-to-reveal layout from the position:fixed, and you won't need the fixed pixel height from the .high-container (which is causing the white space) because the bottom margin will reserve space for the footer.
Edit - Here's a link to a fiddle with some quick alterations.
And here's the CSS from that fiddle:
html body {
width:100%;
max-height: 400px;
position: relative;
background-color:red;
}
.goodbye {
position: fixed;
bottom: 0;
background-color: #f4f4f4;
z-index: -9;
width: 100%;
height: 500px;
padding: 2rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: center;
}
.goodbye a {
font-size: 4em;
font-family:'brandon-grotesque';
}
.text-go {
color: red;
background-color: pink;
height: 80%;
width: 100%;
}
.social-links {
background-color: yellow;
height: 20%;
widows: 100%;
}
.lineout {
width: 30%;
background-image: url(http://kadeem.london/Image/line-out.png);
}
@charset"UTF-8";
.Second-Header, .row, sub, sup {
position: relative
}
.Intro-Video, body {
-webkit-backface-visibility: hidden
}
.byebye {
position: relative;
}
.contact ul, ul, ul.proficient {
list-style-type: none
}
.menubutton, html {
-webkit-text-size-adjust: 100%
}
.menubutton, .row {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none
}
.Biographical-Content a, .contact li, .contact li a, .contact ul, .endh4 a, .footer, .item-type-double .item-hover, .overlay ul li a, .registry-description p a, .registry-description p a:hover {
text-decoration: none
}
.width (@cols:1) {
width: (@cols * (@column +@gutter) -@gutter) /@em;
}
article, aside, blockquote, body, dd, div, dl, dt, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, label, legend, li, menu, nav, ol, p, pre, section, td, th, ul {
margin: 0;
padding: 0;
border: 0
}
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, nav, section, video {
display: block
}
html {
height: 100%;
-ms-text-size-adjust: 100%
}
body {
min-height: 100%
}b, strong {
font-weight: 700
}
abbr[title] {
border-bottom: 1px dotted
}
table {
border-collapse: collapse;
border-spacing: 0
}
a img, img {
-ms-interpolation-mode: bicubic;
border: 0
}
button, input, select, textarea {
margin: 0;
font-size: 100%;
line-height: normal;
vertical-align: baseline
}
button, html input[type=button], input[type=reset], input[type=submit] {
cursor: pointer;
-webkit-appearance: button
}
input[type=radio], input[type=checkbox] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box
}
textarea {
overflow: auto
}
::selection {
background: #e94378;
color: #fff
}
::-moz-selection {
background: #e94378;
color: #fff
}
img::selection {
background: 0 0
}
img::-moz-selection {
background: 0 0
}
@media screen and (max-width: 1px) {
body {
font-size: (@font-size + 2)/16*1em
}
}
body {
-webkit-tap-highlight-color: rgba(255, 0, 0, .62);
font: 100%/1.5 serif
}
@media (min-width: 600px) {
body {
font: 112.5%
}
}
::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
width: 7px;
height: 7px;
border-radius: 4px
}
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
background: #fff
}
::-webkit-scrollbar-thumb {
background: #232323
}
::-webkit-scrollbar-button {
display: none
}
.row {
display: block;
margin-bottom: 1em;
margin-top: 5em;
color: #000
}
.Second-Header {
display: block;
margin-bottom: 5em;
margin-top: 4em;
color: #fff
}
.Second-Header h2 {
font-family:'Abril Fatface', cursive;
font-size: 2.5em;
font-weight: 400;
color: fff
}
body, h1, h2, h3, h4, h5, h6 {
font-size: 1rem;
font-weight: 500;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif
}
@media (max-width: 777px) {
.Second-Header {
margin-bottom: 4em;
margin-top: 3em
}
.Second-Header h2 {
font-size: 2em
}
}
@media (max-width: 666px) {
.Second-Header {
margin-bottom: 3em;
margin-top: 2em
}
.Second-Header h2 {
font-size: 1.8em
}
}
@media (max-width: 555px) {
.Second-Header {
margin-bottom: 2em;
margin-top: .5em
}
.Second-Header h2 {
font-size: 1.5em
}
}
@media (max-width: 444px) {
.Second-Header h2 {
font-size: 1.3em
}
}
@media (max-width: 333px) {
.Second-Header h2 {
font-size: 1.2em
}
}
@media (max-width: 222px) {
.Second-Header h2 {
font-size: 1em
}
}
@media (max-width: 888px) {
.row {
margin: 3em 0 0
}
}
@media (max-width: 666px) {
.row h2 {
margin-top: 1.5em
}
}
@media (max-width: 555px) {
.row h2 {
margin-top: 1em
}
}
.row h2 {
font-family:'Abril Fatface', cursive;
font-size: 2.5em;
font-weight: 400;
color: #000
}
@media (max-width: 777px) {
.row h2 {
font-size: 2em
}
}
@media (max-width: 666px) {
.row h2 {
font-size: 1.8em
}
}
@media (max-width: 555px) {
.row h2 {
font-size: 1.5em
}
}
@media (max-width: 444px) {
.row h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 1.3em
}
}
@media (max-width: 333px) {
.row h2 {
font-size: 1.2em
}
}
@media (max-width: 222px) {
.row h2 {
font-size: 1em
}
}
.row h2 span:after {
content:'The Man'
}
h1 {
font-size: 2.5em
}
h2 {
font-size: 1.875em
}
p {
font-size: .875em
}
.My-Gems {
width: 100%;
height: 100%;
overflow: hidden;
}
@media screen and (max-width: 444px) {
.My-Gems {
width: 100%
}
}
@media screen and (max-width: 333px) {
.My-Gems {
width: 100%
}
}
.global-container {
width: 100%;
position: relative;
background-color: #fff;
}
.high-container {
width: 100%;
position: relative;
background-color: transparent;
}
.content-container, .post-container {
text-align: center;
padding: 0;
width: 100%;
background-color: #50b796;
height: 100%;
margin: 0;
position: relative
}
.content-container {
max-width: 1359px;
margin-bottom:500px;
}
.post-container {
z-index: 0;
max-height: 100%;
padding-top:3em;
}
.Well-Aligned {
position: absolute;
left: 0;
top: -280px;
width: 100%;
height: 600px;
background-color: #fff;
z-index: 0;
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg)
}
@media (max-width: 999px) {
.Well-Aligned {
height: 560px
}
}
@media (max-width: 777px) {
.Well-Aligned {
height: 520px
}
}
@media (max-width: 666px) {
.Well-Aligned {
height: 470px
}
}
@media (max-width: 555px) {
.Well-Aligned {
height: 420px
}
}
@media (max-width: 333px) {
.Well-Aligned {
height: 380px
}
}
.Biographical-Content {
z-index: 99999;
display: block;
position: relative;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif;
width: 65%;
margin-left: auto;
text-align: center;
padding: 0;
margin-right: auto
}
.Biographical-Content p {
margin-top: 20px;
padding: 0;
transition: all .3s ease-out;
font-size: 20px;
line-height: 2em
}
.Biographical-Content a, .Biographical-Content p {
color: #fff;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out
}
@media (max-width: 1111px) {
.Biographical-Content {
width: 70%
}
.Biographical-Content p {
font-size: 18px;
line-height: 1.8em
}
}
@media (max-width: 999px) {
.Biographical-Content {
width: 75%
}
.Biographical-Content p {
font-size: 16px;
line-height: 1.6em
}
}
@media (max-width: 555px) {
.Biographical-Content p {
font-size: 14px;
line-height: 1.4em
}
.Biographical-Content {
width: 80%
}
}
@media (max-width: 444px) {
.Biographical-Content p {
font-size: 12px;
line-height: 1.4em
}
.Biographical-Content {
width: 85%
}
}
.Biographical-Content a {
cursor: pointer;
border-bottom: 2px solid #fff;
transition: all .3s ease-out
}
.Biographical-Content a:hover {
background-color: #e94378;
color: #fff;
transition: all .3s ease-out
}
.Biographical-Content a:hover, .item {
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out`;
-webkit-transition: all .3s ease-out
}
#intro-text {
color: #f3f3f3;
font-size: 2em;
}
.Intro-Video, .step {
overflow: hidden;
position: relative;
background-color: #fff
}
.step {
width: 75%;
-webkit-background-size: cover;
z-index: 999999999999999;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(http://kadeem.london/Image/Kadeem-Laurie-Lisbon-min.jpg);
margin: 0 auto;
text-align: center;
background-repeat: no-repeat
}
.step:nth-child(odd) {
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left
}
.step:nth-child(even) {
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right
}
.step.out-view:nth-child(odd) {
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg)
}
.step.out-view:nth-child(even) {
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg)
}
.Kadeem-Logo {
position: relative;
top: 0;
width: 100%;
display: block
}
.Kadeem-Logo img {
display: block;
width: auto;
max-width: 100%
}
.Intro-Video {
z-index: 9999;
width: 100%;
display: block
}
.video-box {
height: 100%;
width: 100%;
position: relative
}
#video-container {
height: 100%;
width: 100%;
overflow: hidden
}
@media (max-width: 600px) {
.Intro-Video {
background-image: url(http://kadeem.london/Image/kadeem-bg-min.jpg);
width: 100%;
background-size: cover
}
.video-box {
visibility: hidden
}
#video-container {
visibility: visible
}
}
.hide, .overlay-hugeinc {
visibility: hidden
}
video {
position: absolute;
z-index: 0;
background: url(http://kadeem.london/Image/kadeem-bg.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
video.fillWidth {
width: 100%
}
@media (max-width: 600px) {
video {
visibility: hidden
}
}
.item {
text-align: center;
transition: all .3s ease-out;
float: left;
position: relative;
width: 50%;
height: 100%
}
.item-hover, .item-hover .mask, .item-img, .item-info {
width: 100%;
height: 100%
}
.item-hover, .item-hover .mask {
position: absolute;
top: 0;
height: 100%;
left: 0
}
.item-type-double .item-hover {
z-index: 5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
cursor: pointer;
display: block;
text-align: center
}
.item-type-double .item-info {
color: #fff;
display: table;
position: relative;
z-index: 5
}
.item-type-double .item-info div.mycell {
vertical-align: middle;
height: 100%;
display: table-cell
}
.item-type-double .item-info .headline {
font-size: 2.4em;
font-family:'Proxima Nova' sans-serif;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
@media (max-width: 500px) {
.item {
width: 100%;
height: 100%
}
}
@media (max-width: 888px) {
.item-type-double .item-info .headline {
font-size: 1.8em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 666px) {
.item-type-double .item-info .headline {
font-size: 1.4em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 444px) {
.item-type-double .item-info .headline {
font-size: 1.3em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 390px) {
.item-type-double .item-info .headline {
font-size: .8em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 333px) {
.item-type-double .item-info .headline {
font-size: .6em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
@media (max-width: 222px) {
.item-type-double .item-info .headline {
font-size: .5em;
text-transform: uppercase;
width: 90%;
margin: 0 auto
}
}
.item-type-double .item-info .date {
font-size: 20px;
font-family: Canter;
text-transform: uppercase
}
@media (max-width: 444px) {
.item-type-double .item-info .date {
font-size: 16px;
text-transform: uppercase
}
}
@media (max-width: 333px) {
.item-type-double .item-info .date {
font-size: 10px;
text-transform: uppercase
}
}
.item-type-double .item-hover .mask {
background-color: #000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5;
z-index: 0
}
.item-type-double .item-hover:hover .line {
width: 90%
}
.item-type-double .item-hover:hover {
opacity: 1
}
.item-img {
width: 100%;
z-index: 0
}
.item-img img {
width: 100%;
display: block
}
Upvotes: 1
Related Questions
- Why there is a strange white space above the body tag?
- How can I get rid of this space between body and div?
- Unwanted Space next to main content on website
- whitespace out of html body
- Strange white space between html tag and body
- Random white space in body element
- Strange CSS Behaviour, white space on top of body
- Whitespace being added to bottom of body
- Strange whitespace after body tag
- White spaces added at end of body