I have a two column section on a homepage, with a responsive video.
The goal is to get the text in absolute center on the left column, and have the video take up 100% of the right column but have it be responsive.
I have achieved this somewhat.... But the video height shrinks and eventually the right column is smaller then the left.
I still need to add media queries to fix the text at certain points, but I have no idea what to do with the video.
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
.group:after {
content:"";
display: table;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
#media screen and (max-width: 480px) {
.left,
.right {
float: none;
width: auto;
}
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.financingBlock{
height: 100%;
min-height:100%;
position: relative;
}
.financingText{
padding:90px 0 0 104px;
}
.financingText p{
line-height: 30px;
font-size: 14px;
padding-right:70px;
}
.clearer {
clear: both;
}
<div class="financingBlock">
<div class="left">
<div class="financingText">
<p>SLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum luctus ex, at bibendum dolor feugiat vel. Mauris sit amet ante interdum, varius nibh vitae, condimentum nunc.</p>
<p>usce posuere tempus tempus. Sed nec nibh justo. Vestibulum nec eleifend libero, tempus elementum quam. Nulla a facilisis sem, vitae imperdiet diam. Pellentesque faucibus porta facilisis. Vestibulum quis augue a nunc euismod hendrerit. </p>
</div>
</div>
<div class="right">
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="600" src="https://www.youtube.com/embed/nDY8b68oLA0?rel=0&hd=1" frameborder="0" allowfullscreen> </iframe>
</div>
</div>
<div class="clearer"></div>
</div>
it seems you have given a static padding for each screen size
like:
.financingText{padding:90px 0 0 104px;}
instead use:
.financingText{padding:0;vertical-align:middle;text-align:center;margin:0auto;}
Related
I'm trying to create a website where the first part is a video, on top of it is a navigation bar and description sentence. The second part is a div with a picture and a lorem ipsum paragraph. But the two-part is mushed together. Do you know why?
The first part is the video-container div. It contains a video, a navigation bar and some introductory words
The second part is the intro div which has an image and a paragraph side by side
<style>
html,
body {
border: 1px solid blue;
min-height:100%;
padding:0;
margin:0;}
* {
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
border: 0;
outline: 0;
margin-top: -5px;
}
.nav {
border: 1px solid red;
margin-right: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav li {
list-style-type: none;
}
.nav li a {
text-decoration: none;
font-size: 23px;
font-weight: 600;
color: #C71585;
letter-spacing: 0.03em;
}
.nav img {
width: 150px;
}
video {
width: 100%;
position: absolute;
object-fit: cover;
background-size: cover;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
box-sizing: content-box;
}
.video-container {
position: relative;
height: 100%;
border: 1px solid yellow;
}
.content {
border: 1px solid yellow;
position: absolute;
left: 50px;
top: 150px;
margin: 10px;
padding: 5px 20px;
font-size: 20px;
overflow: none;
}
.content h1 {
font-size: 100px;
color: #C71585;
}
#myBtn {
margin-left: 20px;
margin-top: 40px;
border: 1px solid #C71585;
font-size: 26px;
font-weight: 800;
color: #e827a0;
padding: 15px 60px;
background-color: transparent;
transition: 0.2s ease-in;
}
#myBtn:hover {
background-color: rgba(199, 21, 133);
color: white;
}
.intro {
overflow: none;
margin-top: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.intro img {
width: 500px;
}
.intro-text {
width: 30%;
}
</style>
</head>
<body>
<div class="video-container">
<video autoplay muted loop id="video">
<source src="video.mp4" type="video/mp4">
</video>
<div class="nav">
<img src="logo.png" alt="logo">
<li>About me</li>
<li>My Portfolio</li>
<li>My resume</li>
<li>Contact me</li>
</div>
<div class="content">
<h1>Avid learner and</h1>
<h1>Constant striver</h1>
<button id="myBtn">Who am I</button>
</div>
</div>
<div class='intro'>
<img src="01.jpeg" alt="">
<div class="intro-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque ex a felis laoreet, ut bibendum sem eleifend. Quisque egestas sem sed velit molestie tincidunt. Phasellus at pellentesque odio. Phasellus sem leo, hendrerit et massa vehicula, iaculis cursus erat. Vestibulum et viverra nisi, sit amet condimentum sem. Duis gravida faucibus nisl nec pharetra. Curabitur convallis risus enim, nec semper lorem cursus varius. Quisque feugiat vitae dui non ultricies. Integer ipsum quam, dictum et quam nec, imperdiet euismod nulla. Nam bibendum sagittis orci, eget tincidunt risus luctus nec. Quisque lacus urna, tincidunt vel lobortis in, suscipit sit amet nunc. Fusce ultrices erat a nunc dignissim hendrerit. Maecenas sed pharetra quam, vitae suscipit nunc. Aenean molestie dui aliquet augue eleifend, quis congue ligula laoreet. Ut quis est pellentesque, fringilla odio ac, tincidunt nibh.
</div>
</div>
</body>
You can make use of css flex property, in your case please add
.flex-container {
display: flex;
flex-wrap: wrap;
}
under your style tags and assign this class to intro class div as <div class='intro flex-container'>, will this worked for you?
you can easily wrap the .video-container and .intro divs with a div tag and give it style display flex and make sure you add flex wrap also.
Then just give your video and intro containers width 100%
I'm trying to make my website responsive and I have already set the divs' min-height and set the display: inline-block. I already did it to one of the div but then when I tried to make it on the others, it just maintained its min-height. I can see the words adjust when I tried it out but the size/height of the div stayed the same. I think it's because the positions of the divs are in absolute but I also tried to set it to relative, but then the design messed up.
.fullbanner2 {
width: 95.2%;
min-height: 90vh;
}
.banner2left, .banner2right {
position: absolute;
display: inline-block;
min-height: 90vh;
overflow: hidden;
}
.banner2left {
width: 52%;
height: 90vh;
background: #FFFFFF;
letter-spacing: 2px;
}
.banner2left h1 {
font-size: 75px;
margin-top: 7.5%;
margin-left: 4%;
margin-right: 1.5%;
color: #333333;
font-family: 'Athena', sans-serif;
}
.banner2left p {
font-size: 25px;
margin-top: -2%;
margin-left: 4%;
color: #666695;
}
.banner2right {
background: url(../colors-n-pics/picture2.jpg) no-repeat 50% 50%;
margin-left: 52%;
background-size: cover;
width: 43.2%;
height: 90vh;
}
<div class="fullbanner2">
<div class="banner2left">
<h1>Lorem ipsum</h1>
<p>Curabitur congue non diam id venenatis. Ut eget dolor dictum, iaculis lacus quis, commodo justo.</p>
</div>
<div class="banner2right">
</div>
</div>
<div class="statement1">
<h2><center>Curabitur dolor erat, accumsan in elit vitae. Curabitur dolor erat, accumsan in elit vitae, finibus malesuada erat. Ut nibh enim, mollis vitae diam non, placerat fringilla nulla. Proin elementum, lectus sed mollis convallis. </h2>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to put three divs on my webpage, like this, the pink div is the container for two other divs and I want to center the div on the webpage (vertically and horizontally). I prepared some jsfiddle, but obviously I suck at css, so the effect is far from the expected one... So far my css looks like this:
#intro2{
background-color: #b0e0e6;
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
#intro2 .image{
position: absolute;
left: 0px;
background-color: #aaaae6;
}
#intro2 .text{
position: relative;
right: 0px;
background-color: #cccccc;
}
}
Could you help me with that?
Thanks.
Try like this:-
#intro2{
background-color: #b0e0e6;
width: 50%;
margin: 0 auto;
font-size: 1.5em;
padding: 5px;
}
.clear{
clear: both;
}
#intro2 .image{
float:left;
width:50%;
background-color: #aaaae6;
}
#intro2 .text{
float: right;
width:50%;
background-color: #cccccc;
}
<div class="intro" id="intro2">
<div class="image" id="image1">
<img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" alt="simple" />
</div>
<div class="text" id="text1">
<h1>Simple</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit amet mauris in blandit. Aenean sodales in dui eget facilisis. Vestibulum tempor risus dui, sed pharetra nulla auctor id. Sed purus odio, tempus et volutpat a, fermentum sit amet ante. Etiam eros mauris, rutrum at vehicula a, vehicula vitae nulla. Suspendisse non mattis turpis. Donec non convallis lacus. Nullam gravida diam et leo tempor vestibulum. Vivamus lorem nunc, bibendum eu lacinia quis, porta vel nisl. Sed vitae euismod augue. In at est lacinia ipsum feugiat feugiat. Praesent mollis posuere ante, eget maximus est mollis suscipit. Donec ullamcorper elit quis cursus gravida. Quisque leo risus, bibendum sed nisi ut, facilisis iaculis arcu. Pellentesque purus augue, fringilla tempus augue eget, ullamcorper condimentum leo.</p>
</div>
<div class="clear"></div>
</div>
Here:
#intro2{
background-color: #b0e0e6;
width: 50%;
left:50%;
font-size: 1.5em;
position:absolute;
margin-left:-25%;
}
That way your container is centered on the page.
I'm not sure I would go with the absaloute positioning method you've gone for on this occasion. I think perhaps a display:table on the wrapper and display:table-cell on the children would give you more control over your style.
#intro2{
background-color: #b0e0e6;
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
#intro2 .image{
background-color: #aaaae6;
display: table-cell;
vertical-align: top;
}
#intro2 .text{
background-color: #cccccc;
display: table-cell;
vertical-align: top;
}
Here's an example: http://jsfiddle.net/Lfyacy25/2/
http://jsfiddle.net/Lfyacy25/3/
#intro2{
background-color: #b0e0e6;
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
#intro2 .image{
float: left;
width: 50%;
background-color: #aaaae6;
}
#intro2 .text{
float: left;
width: 50%;
background-color: #cccccc;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.intro{
background-color: #b0e0e6;
width: 100%;
margin: 0 auto;
font-size: 1.5em;
padding: 5px;
}
.intro:before,.intro:after {
content: " ";
display: table;
}
.intro:after {
clear: both;
}
.image{
width: 50%;
background-color: #aaaae6;
float: left;
}
img{
margin: 0 auto;
display: block;
}
.text{
width: 50%;
background-color: #cccccc;
float: left;
}
Updated fiddle
try the following:
<div class="outter">
<div class="innerleft">image goes here</div>
<div class="innerright">text goes here</div>
</div>
.outter {width:100%; min-height:120px; background-color:red; padding:1% }
.innerleft {float:left; width:49%;background-color: green;min-height:120px; }
.innerright {float:right; width:49%;background-color: blue;min-height:120px; }
I’m working on a template which requires some background images of elements (h2, h3, etc.) to extend beyond the (centered) page width to fill the browser window.
I know a way to do that. I’ve seen this solution explained by Craig Buckler here :
http://www.sitepoint.com/css-extend-full-width-bars/
You can see a fiddle here :
http://jsfiddle.net/Vinyl/V8ps3/
Basically, we add a large amount of padding then move the element back to its original location
I think it’s a good solution but do you know another solution to do that ?
html :
<div id="main">
<div>lorem ipsum</div>
<div id="content">content which extend beyond the (centered) page width to fill the browser window</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nunc erat, at ornare nisl sollicitudin eget. Vestibulum aliquam massa sit amet fringilla ullamcorper. Curabitur libero arcu, suscipit eu convallis eget, sodales id ante. Vestibulum gravida massa vitae risus molestie egestas. Nullam mi elit, tempus nec eleifend non, vestibulum ac magna. Integer tortor diam, dapibus eu faucibus nec, ornare in ipsum.</div>
</div>
css :
body {
margin:0;
overflow-x: hidden;
background-color: #333333;
}
#main {
width:250px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
}
#content {
background-color: #999999;
padding: 20px;
width: 100%;
margin: 0 auto;
margin-right: -3000px;
padding-right: 3000px;
margin-left: -3000px;
padding-left: 3000px;
}
DEMO ..
This is another solution.. maybe simpler, it uses :before for the elements (h2, h3, etc.)
CSS
#content {
padding: 20px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
}
#content:before {
background: #999999;
content: "";
width: 1000%;
height: 100%;
position: absolute;
top: 0;
left: -500%;
z-index: -1;
}
Hope this will help you ..
I've looked around for similar issues here and in other places, but I can't seem to find a definitive answer. When I add enough text to a page that it would get to the footer, the footer simply overlaps the text. Same thing if I reduce the size of the browser window to force the footer and the container that holds the content to meet. Occasionally, this also manifests in the "container" aka the lighter gray part, shrinking for some reason, even though it should always be taking up 100% of the height.
This is the sort of stuff that keeps me up all night, so I'm not thinking very clearly. I'm sure it's something stupid and easy to fix, but I'm not a professional designer and am certainly missing what the issue is.
Below is my code, and a JSFiddle that I made with all the relevant parts of a page.
html, body {
margin: 0;
padding: 0;
}
html, body {
background: #252525;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
text-align: center;
}
body {
background: #363636;
border-left: 1px solid #111;
border-right: 1px solid #111;
margin: 0 22.5%;
}
#container {
color: white;
margin-bottom: 2em;
min-height: 100%;
overflow: auto;
padding: 0 2em;
text-align: justify;
}
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed;
font-size: small;
width:100%;
}
<body>
<div id="container">
<h1>A webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.
<p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div>
<div id="footer">This is a footer.</div>
</body>
Here is a JSFiddle example.
Change this:
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: relative; //changed to relative from fixed also works if position is not there
font-size: small;
width:100%;
}
Demo
Anyone stumbling upon this in 2017 should know that a great option was invented to alleviate layout headaches such as this, flexbox.
Essentially, all you have to do is set <body> to:
body {
display: flex;
flex-direction: column;
align-items: center;
}
Then apply flex:1 1 auto to the "main" or middle section, in this case #container, which will make it expand vertically to fill available space, assuring the footer will stick to the bottom:
#container {
flex: 1 1 auto; /*grow vertically*/
}
We added align-items:center in the flex parent to handle cross-axis centering (in our case, horizontal).
Here is an example snippet of the above:
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #252525;
border-left: 1px solid #111;
border-right: 1px solid #111;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
#container {
color: white;
background: #363636;
padding: 2em;
background: #363636;
flex: 1 1 auto;
/*grow vertically*/
width: 55%;
text-align: center;
}
#footer {
color: #707070;
height: 2em;
font-size: small;
}
<body>
<div id="container">
<h1>A webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
<p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
</div>
<div id="footer">This is a footer.</div>
</body>
See DEMO
I have made some CSS changes. Have a look. I hope it will help you.
Updated CSS
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed; /* OldProperty */
position: static;/* Updated Property */
font-size: small;
width:100%;
}
I believe you were looking for a sticky footer that stays while not being fixed to the bottom of the page (so no overlap).
Solution
The solution comes from Chris Bracco and I am going to detail what you need to reproduce the effect:
HTML
Your HTML be like:
<html>
<body class="body-for-sticky">
<...> your content </...>
<div class="footer sticky-footer"> your footer </div>
</body>
</html>
CSS
You will need to add in your css something like:
html {
height: 100%; /* for the page to take full window height */
box-sizing: border-box; /* to have the footer displayed at the bottom of the page without scrolling */
}
*,
*:before,
*:after {
box-sizing: inherit; /* enable the "border-box effect" everywhere */
}
.body-for-sticky {
position: relative; /* for the footer to move with the page size */
min-height: 100%; /* for the footer to be at the bottom */
padding-bottom: 6rem; /* Space available between last element and bottom border of the page */
}
.sticky-footer {
position: absolute; /* for it to disappear under last body element */
bottom: 0; /* so the footer can stick to the bottom*/
}
Example
That's like the basic you need to create the sticky footer. Here is an example (with some more CSS for better rendering).
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.body-for-sticky {
position: relative;
min-height: 100%;
padding-bottom: 6rem;
}
.sticky-footer {
position: absolute;
bottom: 0;
}
/* for the rendering */
body {
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
right: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer</title>
<style> </style>
</head>
<body class="body-for-sticky">
<div class="demo">
<h1 style="margin-top: 0">CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
<p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p>
</div>
<div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
</body>
</html>
Expand the snippet and watch the result full size to see how it works.
First write this code
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;
}
and now set media queries
#media only screen and (max-width: 767px){
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:static;
left:0;
bottom:0;
width:100%;
}
}
hope this will help you :)
#footer {
z-index: 1;
position: absolute;
right: 0;
bottom: 0;
left: -25%;
padding: 1rem;
background-color: black;
text-align: center;
height: 3em;
left: 0;
font-size: small;
width:100%;
}