I'm very new at CSS so please be patient with me. I am trying to set a video background for a section with a semi transparent text box over the video. After wrestling with it for a while, I finally got the video fitted to the screen and resizing when the screen shrinks.
The problem is, now the section containing the text doesn't resize when the screen becomes narrower. Instead, the text disappears under the next div down.
I presumed this is because the aspect ratio of the video can't be modified. The best solution I could come up with is to set a media query to replace the video with a static background when the screen is under 700 pixels wide. I was hoping that the normal properties of auto;" would then kick in and accommodate the additional length of the text. However, the video doesn't respond to the "display: none;" tag when placed in a media query.
I'm kind of stuck as to what to do.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, `enter code
here`initial-scale=1.0">
<title>Jamaa</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul class="navbar">
<li><p href="#home" style="margin-left: 20px;">JAMAA</p></li>
<li style="float:right">Contact</li>
<li style="float:right">News</li>
<li style="float:right"><a class="left" href="#about">Blog</a></li>
</ul>
<section class="intro">
<div class="content">
<img src="images/jamaalogo.png"
style="height:300px; margin-top: 5%; align-content: center; "
class="center">
<h1 class="motto">Share. Profit.</h1>
<h2 style="text-align: center;">Using finance to increase cryptocurrency
access for those who need it most.</h2>
</div>
</section>
<div class="video_wrapper">
<video preload="auto" autoplay="true" loop="loop" muted="muted"
volume="0" poster="images/relief.jpg" style="height:auto; ">
<source src="images/fountain.mp4" type="video/mp4">
<div class="problem_box"><h2>We Have a Problem</h2><p>People are
losing their savings. Governments are collapsing. The threat of war is
looming on the horizon. All of these problems have a common source- bad
money. And yet most of us don't know what we can do about it.</p></div>
</video>
Here is the CSS:
#font-face {
font-family: 'textabold';
src: url('fonts/texta-bold-webfont.woff2') format('woff2'),
url('fonts/texta-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono"
rel="stylesheet">
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
}
h2 {
font-size: 2em;
display: block;
color: white;
font-weight: 300;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1 em;
font-weight: 500;
color: white;
}
a {
font-weight: 700;
color: #333;
&:hover{
opacity: 0.8;
}
&:active {
top: 1px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.container {
display: flex;
color: white;
justify-content: space-between;
align-items: center;
padding: 2px 44px;
}
.navbar {
position: fix
}
#media screen and (max-width : 760px){
ul {
display: none;
}
.intro { background: red;}
.video_wrapper {
height:auto;
background: url("images/relief.jpg") no-repeat center center;
background-size: cover;
}
.video {
display: none;
}
}
.title {
display: block;
color: white;
align-items: center;
padding: 12px 44px;
font-size:;
}
li a:hover {
background-color: #4CAF50;
}
.intro {
height: 92vh;
background-color: #4CAF50;
display: block;
overflow: hidden;
}
.problem {
max-height: 60vh;
background-size: cover;
opacity: 0.8;
z-index: -100;
}
.problem_box {
height:70%;
z-index: 2;
}
.video_wrapper{
width: auto;
position: relative;
overflow: hidden;
z-index: -1;
margin-bottom: -30px;
text-align: center;
}
.video_wrapper video{
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 1;
height: auto;
overflow: auto;
}
.video_wrapper .problem_box {
height: auto;
width: 70%;
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
background: #333;
opacity: 0.9;
display: inline-block;
margin-top: 8%;
margin-left: 15%;
box-sizing: content-box;
}
I suppose I could just give up and use static background, but it took me so long to figure out the video background I'd hate to throw it away it this point... any help is much appreciated!
you forgot to put the video class on the video tag
<video preload="auto" autoplay="true" loop="loop" muted="muted"
volume="0" poster="images/relief.jpg" style="height:auto; " class="video">
Related
I'm trying to make the text-info element display only when I hover over the container element using only CSS and no JS and it doesn't work, would love some advice.
I was assuming it had something to do with the display flex instead of display block so I attempted that too, but it didn't help.
Note that even without the hover, the text doesn't display on the page and I can't tell why.
body {
color: #2f80ed;
font-family: Avenir, Helvetica, Arial, sans-serif;
margin: 0;
display: flex;
height: 100vh;
}
p {
margin: 0;
}
.container {
width: 520px;
margin: auto;
}
.container img {
width: 100%;
}
.text {
width: 400px;
margin: 0 auto;
cursor: pointer;
}
.text-code {
text-align: center;
font-size: 120px;
font-weight: 400;
}
.container:hover+.text-info {
display: flex;
}
.text-info {
display: none;
text-align: center;
font-size: 20px;
font-weight: 400;
opacity: 0;
transition: opacity .4s ease-in-out;
}
footer {
width: 100%;
position: absolute;
bottom: 30px;
}
footer p {
margin: auto;
font-size: 16px;
}
footer a {
color: #2f80ed;
}
<div class="container">
<img src="empty-boxes.svg" alt="error" />
<div class="text">
<p class="text-code">404</p>
<p class="text-info">
404 is an error.
</p>
</div>
</div>
<footer>
<p>Go back.</p>
</footer>
You are using the wrong css selector for your hover style. You are using the + selector which is the sibling selector and .text-info is a child not a sibling of .container.
Also, you would need to set your opacity to 1 on hover so that you can see it.
Like this:
.container:hover .text-info {
display: flex;
opacity: 1;
}
body {
color: #2f80ed;
font-family: Avenir, Helvetica, Arial, sans-serif;
margin: 0;
display: flex;
height: 100vh;
}
p {
margin: 0;
}
.container {
width: 520px;
margin: auto;
}
.container img {
width: 100%;
}
.text {
width: 400px;
margin: 0 auto;
cursor: pointer;
}
.text-code {
text-align: center;
font-size: 120px;
font-weight: 400;
}
.container:hover .text-info {
display: flex;
opacity: 1;
}
.text-info {
display: none;
text-align: center;
font-size: 20px;
font-weight: 400;
opacity: 0;
transition: opacity .4s ease-in-out;
}
footer {
width: 100%;
position: absolute;
bottom: 30px;
}
footer p {
margin: auto;
font-size: 16px;
}
footer a {
color: #2f80ed;
}
<div class="container">
<img src="empty-boxes.svg" alt="error" />
<div class="text">
<p class="text-code">404</p>
<p class="text-info">
404 is an error.
</p>
</div>
</div>
<footer>
<p>Go back.</p>
</footer>
As long as text-info opacity is set to 0 normally, you can use the following sibling selector ~ in your CSS to set the opacity to 1 on hover. See below.
.text-code:hover ~ .text-info {
opacity: 1;
}
See it in action
body {
color: #2f80ed;
font-family: Avenir, Helvetica, Arial, sans-serif;
margin: 0;
display: flex;
height: 100vh;
}
p {
margin: 0;
}
.container {
width: 520px;
margin: auto;
}
.container img {
width: 100%;
}
.text {
width: 400px;
margin: 0 auto;
cursor: pointer;
}
.text-code {
text-align: center;
font-size: 120px;
font-weight: 400;
}
.text-info {
color: black;
text-align: center;
font-size: 20px;
font-weight: 400;
opacity: 0;
transition: opacity .4s ease-in-out;
}
footer {
width: 100%;
position: absolute;
bottom: 30px;
}
footer p {
margin: auto;
font-size: 16px;
}
footer a {
color: #2f80ed;
}
.text-code:hover ~ .text-info {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>404 Page</title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<img src="empty-boxes.svg" alt="error" />
<div class="text">
<p class="text-code">404</p>
<p class="text-info">
404 is an error.
</p>
</div>
</div>
<footer>
<p>Go back.</p>
</footer>
</body>
</html>
I try to better understand how CSS works. I have the following code:
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300;400;700;900&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
}
/* typography
================== */
h1 {
font-weight: 300;
font-size: 1.7rem;
margin-top: 0;
}
p {
margin-top: 0;
line-height: 1.5;
}
p:last-of-type {
margin-bottom: 0;
}
.title {
font-size: 2.5em;
margin-top: 1em;
margin-bottom: 1.5em;
font-weight: 900;
}
.title span {
font-weight: 300;
display: block;
font-size: .9em;
}
#media(min-width:60rem) {
p {
font-size: 1.2rem;
line-height: 1.6;
}
.title {
font-size: 3.7em;
margin-bottom: 1em;
margin-top: 0;
font-weight: 900;
}
}
/* buttons */
.button {
display: inline-block;
font-size: 1.15em;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
padding: .5em 1.75em;
color: #00ff6c;
border-color: #00ff6c;
}
#media (min-width: 60rem) {
.button {
font-size: 1.5rem;
}
.button-small {
font-size: .7rem;
font-weight: 700;
}
.button-accent {
color: #00ff6c;
border-color: #00ff6c;
}
.button-accent:hover,
.button-accent:focus {
background: #00ff6c;
color: #232323;
}
}
/* header
================== */
header {
position: absolute;
margin-top: 1em;
left: 0;
right: 0;
margin: 1em;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
padding: .5em;
text-transform: uppercase;
color: #FFF;
font-size: .8rem;
}
nav a: hover,
nav a: focus {
color: #DDD;
}
#media(min-width:60rem) {
.logo {
float: left;
}
nav {
float: right;
}
}
/* home-hero
================== */
.home-hero {
background-image: url(https://i.postimg.cc/XY54RwQY/hero-bg.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
color: #FFF;
}
#media (min-width: 60rem) {
.home-hero {
height: 100vh;
padding-top: 35vh;
}
}
/* hero-home
======================== */
.home-about-textbox {
background-color: #232323;
padding: 4em;
margin: 0 -2.5vw;
outline: 2px solid #00ff6c;
outline-offset: -2.5em;
color: #FFF;
position: relative;
}
.home-about-textbox h1 {
color: #00ff6c;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
white-space: nowrap;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: mediumvioletred;
color: magenta;
}
#media (min-width: 25rem) {
h1 {
font-size: 2 rem;
}
.home-about-textbox h1 {
top: .6em;
padding: 0 .325em;
}
}
#media (min-width: 60rem) {
h1 {
font-size: 2.5rem;
}
.home-about {
background-image: url();
background-repeat: no-repeat;
padding-bottom: 10em;
}
.home-about-textbox {
width: 50%;
padding: 7em;
outline-offset: -3.75em;
margin-left: -2.5%;
top: -5em;
text-align: left;
box-shadow: 0 0 4em 0 rgba(0, 0, 0, .3);
}
.home-about-textbox h1 {
top: .75em;
left: 6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
}
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: coral;
font-weight: 100;
color: blue;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creative Inc.</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<img src="https://i.postimg.cc/NFtwcdYg/logo.png" alt="Creative inc. logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">Making things looks great
<span>for companies who make great stuff</span>
</h1>
See Our Work
</div>
</section>
<div class="container">
<section class="home-about">
<div class="home-about-textbox">
<h1>Who we are</h1>
<p>Sit by the fire drink water out of the faucet hide head under banket so no one can see cat is love, cat is life.Knock dish off table eating always hungry so favor packaging over toy.</p>
<p>
<srong>Rub face on owner.</srong>Peer out window, chatter at birds, lure then to mouth. Chase ball of string eat a plant, kill a hand, i am the best have secret plans.
</p>
</div>
</section>
</div>
</body>
</html>
Here, the home-about-textbox is defined in three different ways with the class attribute :
`<div class="container">
<section class="home-about"> for pc media
<div class="home-about-textbox">`for mobile media
But the container also selects the "home-hero" section: <section class="home-hero"> <div class="container">.
I tried to figure out what is the role of the container. When I select the .container in the css style sheet just the "home-about-textbox" becomes blue on the browser so I tried to change color of the container to see if this class truly selects both of the sections( "home-hero" & "home-about-textbox") how it seems to be.
I selected the container again at the end of the code to make sure that nothing else overrides it (the last media declaration is closed) and I styled with crazy colors but nothing change. I even tried !important rule and the style is the same. My question is:
What exactly this container class selects in the code and why I can't style it?
container is a class that is given to a div tag to define your web page size, and all of the other elements should be inside of it so they will have all styles given to their parent ( container)
you use the !important wrong, you should use it this way:
background-color: red !important;
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I would like to put a header and a button on the same horizontal line but on opposite sides of the page (left and right). I'm using Twitter Bootstrap so I've put them in a .row and then specified that they each are .col.sm-6. I put the button in a div, so I could move it to the right of that column with text-align:right.
How could I make that button center itself on mobile? When the window gets smaller and the second column jumps under the first, the button is still right-aligned.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button style="text-align:right">Sign up your event</button>
</div>
</div>
You can define a class for your button like <button class="button">Sign up your event</button> and then use #media-queries to center it using the following CSS when the window size is reduced to mobile width, like this:
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
Here's a working demo (view as full page and then reduce your browser window):
.outfitcontainer {
position: relative;
width: 200px;
height: 80%;
background-color: #FFFFFF;
display: inline-block;
margin-left: 60px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
.outfit img {
display: inline-block;
}
.outfit,
.overlay {
position: absolute;
width: 200px;
height: auto;
left: 0;
}
.outfit {
z-index: 10;
background-color: white;
}
.outfitcontainer:hover .outfit {
opacity: .5;
cursor: pointer;
}
.outfit:hover + .overlay {
z-index: 50;
}
.overlay:hover {
z-index: 50;
}
.overlay {
z-index: 0;
text-align: center;
font-weight: bold;
}
.overlay p {
display: block;
padding: 10px 0;
color: black;
opacity: 1;
line-height: 50%;
}
.overlay p:nth-child(1) {
margin-top: 50%
}
.price,
.item {
font-family: "Brandon Grotesque Medium";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -10px;
}
.oldprice {
text-decoration: line-through;
color: #383838;
font-size: .75em;
line-height: 25%;
}
.designer {
font-family: "Didot Light Italic";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -15px;
}
.second-section {
width: 100%;
height: auto;
z-index: 50;
background-color: #000000;
}
.button {
text-align: right;
}
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button class="button">Sign up your event</button>
</div>
</div>