I got a hero with two columns. One has text, other has a video embed from youtube with an iframe. The video should always keep it's ratio and dictate the text block size. Not gone lie I thought this would be easy peazy but... Any ideas on how to solve it? Can it be done? I'm going down to IE11.
Also at jsfiddle (included as video won't play)
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.hero {
display: flex;
flex-wrap: nowrap;
}
.hero__content {
flex: 1;
background-color: deeppink;
}
.hero__media {
flex: 1;
flex-grow: 2;
background-color: deepskyblue;
}
.video-embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
max-width: 950px;
width: 100%;
}
.video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section class="hero">
<div class="hero__content">
<h2>This is a awesome movie!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos excepturi molestiae rerum commodi animi, qui vel esse hic facilis facere!
</p>
</div>
<div class="hero__media video-embed">
<iframe src="https://www.youtube-nocookie.com/embed/ue80QwXMRHg?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</section>
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.hero {
display: flex;
flex-wrap: nowrap;
background-color: deeppink;
}
.hero__content {
flex: 1 0 150px;
}
.hero__media {
flex: 1 1 auto;
background-color: deepskyblue;
}
.video-embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
max-width: 950px;
width: 100%;
}
.video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section class="hero">
<div class="hero__content">
<h2>This is a awesome movie!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos excepturi molestiae rerum commodi animi, qui vel esse hic facilis facere!
</p>
</div>
<div class="hero__media video-embed">
<iframe src="https://www.youtube-nocookie.com/embed/ue80QwXMRHg?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</section>
Fiddle
Related
I have a hero image that has a text box overlapping the hero a little bit but when I add any content below the box it appears under the text box. Some media queries are added in my code below and it works but I feel like there has to be a way to contain the hero and overlapping text box into its own section. If had to add more text I'd have to go through and adjust all of the media queries to make it look good again so how can I achieve this without using media queries?
Here is my code:
.shell {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
/* overlap */
.shell:before {
content: "";
background-image: url(https://i.ibb.co/x866XdV/test-hero.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
position: relative;
height: 300px;
width: 100%;
}
.shell-header {
color: #fff;
padding: 0px 20px;
}
.shell-body {
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
background-color: #fff;
max-width: 85%;
position: absolute;
top: 80%;
}
img {
width: 20%;
height: 20%;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
margin: 0;
font-family: sans-serif;
}
.wrapper {
padding-top: 12rem;
}
#media only screen and (min-width: 800px) {
.wrapper {
padding-top: 8rem;
}
}
#media only screen and (max-width: 360px) {
.wrapper {
padding-top: 11rem;
}
}
<div class="shell">
<div class="shell-header"></div>
<div class="shell-body">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
</div>
</div>
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="">
</div>
Using padding is ideal. But you can play around with the positioning of your elements. For instance, you can set body to position: relative; & then nest .wrapper within .shell and set .wrapper to position: absolute;.
.shell {
display: flex;
flex-direction: column;
align-items: center;
}
/* overlap */
.shell:before {
content: "";
background-image: url(https://i.ibb.co/x866XdV/test-hero.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
position: relative;
height: 300px;
width: 100%;
}
.shell-header {
color: #fff;
padding: 0px 20px;
}
.shell-body {
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
background-color: #fff;
max-width: 85%;
position: absolute;
top: 80%;
}
img {
width: 20%;
height: 20%;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
margin: 0;
font-family: sans-serif;
position: relative;
}
.wrapper {
position: absolute;
bottom: -80%;
}
<div class="shell">
<div class="shell-header"></div>
<div class="shell-body">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
</div>
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="">
</div>
</div>
Example using negative margin.
.shell {
display: flex;
flex-direction: column;
align-items: center;
}
/* overlap */
.shell:before {
content: "";
background-image: url(https://i.ibb.co/x866XdV/test-hero.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
position: relative;
height: 300px;
width: 100%;
}
.shell-header {
color: #fff;
padding: 0px 20px;
}
.shell-body {
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
background-color: #fff;
max-width: 85%;
margin-top: -6.375rem;
position: relative;
z-index: 1;
}
img {
width: 20%;
height: 20%;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
margin: 0;
font-family: sans-serif;
position: relative;
}
.wrapper {
margin-top: 1em;
}
<div class="shell">
<div class="shell-header"></div>
<div class="shell-body">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
</div>
</div>
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="">
</div>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed last month.
I am not able to get the ellipses to work inside a flex box. I have gone over a ton of examples and answers on how to do this but nothing is working. I need to shorten the long text with an ellipses in column 2.
* {
box-sizing: border-box;
}
.application {
display: flex;
width: 100%;
height: 100%;
border: 2px solid red;
margin: 10px;
}
.container1,
.container2 {
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: 10px;
border: 1px solid green;
}
.container2 {
border: 1px solid purple;
}
.row {
display: flex;
width: 100%;
padding: 5px;
}
.col1 {
width: 100px;
background: lightgreen;
}
.col2 {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col3 {
width: 60px;
background: yellow;
}
<div class="application">
<div class="container1">
<div class="row">
<div class="col1"> </div>
<div class="col2">This is a short Text</div>
<div class="col3"></div>
</div>
<div class="row">
<div class="col1"></div>
<div class="col2">
Lorem ipsum dolor sit amet. Id totam perspiciatis qui adipisci delectus id molestiae quas et voluptatem tenetur est provident rerum. Et error molestiae sed nihil suscipit et ullam galisum et ratione nesciunt!
</div>
<div class="col3"></div>
</div>
</div>
<div class="container2"></div>
</div>
You need to add a specific width in px.
max-width: value; / width: value;
Either width or max-width works well.
Here is the new code :)
* {
box-sizing: border-box;
}
.application {
display: flex;
width: 100%;
height: 100%;
border: 2px solid red;
margin: 10px;
}
.container1,
.container2 {
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: 10px;
border: 1px solid green;
}
.container2 {
border: 1px solid purple;
}
.row {
display: flex;
width: 100%;
padding: 5px;
}
.col1 {
width: 100px;
background: lightgreen;
}
.col2 {
flex: 1;
min-width: 0;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col3 {
width: 60px;
background: yellow;
}
<div class="application">
<div class="container1">
<div class="row">
<div class="col1"> </div>
<div class="col2">This is a short Text</div>
<div class="col3"></div>
</div>
<div class="row">
<div class="col1"></div>
<div class="col2">
Lorem ipsum dolor sit amet. Id totam perspiciatis qui adipisci delectus id molestiae quas et voluptatem tenetur est provident rerum. Et error molestiae sed nihil suscipit et ullam galisum et ratione nesciunt!
</div>
<div class="col3"></div>
</div>
</div>
<div class="container2"></div>
</div>
I placed a text over an image, but when I increase the screen size the image won't follow, its just stuck at the same place, contrary to the text that responds to the screen-size and moves to the center.
.section2{
max-height: 20rem;
padding-top: 20px;
position: relative;
}
.section2 img{
padding: 20px
}
.abtus {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 60%;
font-size: 1rem;
text-align: center;
padding-top: 6rem;
}
<div class="section2">
<img src="assets/script.png" alt="">
<div class="abtus">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad cum architecto eius molestiae dolore est id vero voluptatem
repellat voluptas quo beatae nulla ex soluta deleniti impedit maxime, enim omnis?</p>
</div>
</div>
If you want to position an absolute element on a picture then you should:
1- put the image and the element in one container.
.container {
height: fit-content;
width: fit-content;
position: relative;
}
2- the image width should be 100% so it can resize according to its parent's width.
3- Use the container to resize the image, don't resize the image itself.
.section2{
max-height: fit-content;
width: 100vw;
position: relative;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.container {
height: fit-content;
width: fit-content;
position: relative;
border: 1px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
.section2 img {
height: auto;
width: 80%;
border: 1px solid red;
}
.abtus {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 60%;
font-size: 1rem;
text-align: center;
padding-top: 6rem;
}
<div class="section2">
<div class="container">
<img src="https://cdn.pixabay.com/photo/2016/01/08/15/18/lizard-1128263_960_720.jpg" alt="">
<div class="abtus">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad cum architecto eius molestiae dolore est id vero voluptatem
repellat voluptas quo beatae nulla ex soluta deleniti impedit maxime, enim omnis?</p>
</div>
</div>
</div>
I think img tag must have width: 100% to follow the parent element size.
img {
width: 100%;
padding: 20px;
}
Check out this fiddle: https://jsfiddle.net/8dvhx0ap/1/
Or here the HTML:
.sidenav {
height: 100%;
width: 160px;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
}
.smallDiv {
background-color: green;
padding: 10px;
}
.bigDiv {
background-color: blue;
padding: 10px;
width: 60vw;
height: 60vh;
}
.main {
margin-left: 160px;
flex: 1 1 auto;
}
.container {
width: 100%;
display: block;
box-sizing: border-box;
padding: 20px;
}
.grid {
justify-content: center !important;
width: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
<div id="app">
<div style="height: 50px; background-color: red;"></div>
<aside class="sidenav"></aside>
<div class="main">
<div class="container">
<div class="grid">
<div class="smallDiv">
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
</div>
<div class="bigDiv">
</div>
</div>
</div>
</div>
</div>
I want the blue div to fill the empty space. On a normal screen, the green div should be on the left, and the big right space should be filled entirely by the blue div (use the space to the right and bottom but without scrollbars). Changing the page size would result in the blue div getting bigger / smaller. If the screen becomes too small (e.g. I use a phone), the 2 divs should be below each other (like currently).
How can I make the blue div fill the space?
I noticed that the top red div was actually partially hidden by the black sidenav div. So, this meant that the HTML needed to be refactored. Adding content makes it possible to see how it should behave.
You probably also want the black sidenav div to disappear on mobiles, and that can be achieved with a suitable media query.
.container {
display: flex;
flex-direction: row;
}
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.sidenav {
flex-basis: 160px;
flex-shrink: 0;
color: white;
background-color: black;
display: flex;
}
.topDiv {
flex-grow: 1;
height: 60px;
background-color: red;
}
.grid {
display: flex;
flex-direction: row;
}
.smallDiv {
background-color: green;
padding: 10px;
}
.bigDiv {
background-color: blue;
}
#media only screen and (max-width: 600px) {
.grid {
flex-direction: column;
}
}
<div class="container">
<aside class="sidenav">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel facilis alias incidunt aperiam sequi a earum delectus nam similique nostrum, tenetur esse aliquid veritatis dicta tempore? Error asperiores tempore illo!</aside>
<div class="main">
<div class="topDiv">
<h1>A Heading</h1>
</div>
<div class="grid">
<div class="smallDiv">
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
</div>
<div class="bigDiv">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet ab doloribus nostrum deleniti debitis, et odit tempora obcaecati perferendis dolorum ratione asperiores odio ipsum. Sequi consequatur qui nisi quibusdam praesentium!
</div>
</div>
</div>
</div>
I've got a layout, here's my css:
body {
background-color: #16193B; /* Old browsers */
margin: 0;
padding: 0;
color: white;
background-attachment: fixed;
overflow: hidden;
}
html {
min-height: 100%;
height: 100%;
margin: 0;
padding: 0;
background-attachment: fixed;
}
#content {
width: 80%;
height: 1000px;
margin: 0 auto;
background-color: #ADD5F7;
overflow : hidden;
}
#wrap div{
height:100%;
width:100%;
}
#b1 {
width: 80%;
height: 1000px;
margin: 0 auto;
background-color: #35478C;
position:relative;
}
#b2 {
width: 90%;
height: 1000px;
margin: 0 auto;
background-color: #4E7AC7;
position:relative;
}
#b3 {
width: 90%;
height: 1000px;
margin: 0 auto;
background-color: #7FB2F0;
position:relative;
}
#b4 {
width: 90%;
height: 1000px;
margin: 0 auto;
background-color: #ADD5F7;
overflow : auto;
position:relative;
}
And thats in the body of the HTML-File:
<div id="b1">
<div id="b2">
<div id="b3">
<div id="b4">
<div id="content">
</div>
</div>
</div>
</div>
</div>
This is my layout, but it should just be the background of the page... Unfortunately if I add text to some other div then "content" the rectangle overlays the others. How can I fix this? Actually I want a menu bar which is the top "layer" and overlays all under it...
Ok, before you look at my jsFiddle-Solution:
Be aware that using divs for such backgrounds is not a beautiful solution. Best would be using a background-image on your body-tag, which you stretch with background-size. It's supported in all modern browsers. The only problem would be IE8 and downwards.
Your CSS is a mess. When styling elements with similar attributes, use a class instead styling every ID by itself.
I basically created a new div with your custom content and a class on your background-divs. I also had to clean up your CSS and deleted unnecessary statements:
-> jsFiddle <-
HTML:
<div class="centerIt" id="b1">
<div class="centerIt" id="b2">
<div class="centerIt" id="b3">
<div class="centerIt" id="b4">
<div id="content"></div>
</div>
</div>
</div>
</div>
<div id="contentContainer">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam excepturi laboriosam illum esse voluptas libero aperiam voluptate omnis dolor odio natus tempore sunt doloribus. Suscipit iure vel totam eius reprehenderit.</div>
</div>
CSS:
.centerIt {
position: relative;
margin-left: auto;
margin-right: auto;
}