So I have this background video on my wordpress CMS, and now I want to tell it to go into hiding on smaller devices, however; it keeps showing up. What is going wrong here? Here's the code:
.header-unit {
height: 618px;
border: 0px solid #000;
border-right:none;
border-left: none;
position: relative;
padding: 20px;
}
#video-container {
position: absolute;
}
#video-container {
top:0%;
left:0%;
height:100%;
width:100%;
-webkit-filter: blur(7px);
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
overflow: hidden;
}
#video-container:hover {
-webkit-filter: blur(0px);
-moz-opacity: 1;
opacity: 1;
}
video {
position:absolute;
z-index:0;
}
video.fillWidth {
width: 100%;
#media only screen and (max-width: 479px) and (min-width: 0px)
.video-container {
background:none;!important
}
By the way I've seen similar questions asked but the answers didn't help me :-)
And here's the HTML :
<div class="header-unit">
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src=".../uploads/2015/03/test.mp4" type="video/mp4"/>
</video>
</div><!-- end video-container -->
</div><!-- end .header-unit -->
Your media queries are targeting .video-container class not #video-container id and your video is a html element not a background element
Change
#media only screen and (max-width: 479px) and (min-width: 0px)
.video-container {
background:none;!important
}
to
#media only screen and (max-width: 479px) and (min-width: 0px)
#video-container {
display:none;!important
}
Try using #video-container instead of .video-container in your media query.
Related
I'm having an issue while coding an animation for an element on an Elementor website.
I created an animation on mobile and one for desktop/tablet.
However only one of the animation works depending on which one is placed at the top.
/* for tablet*/
#media (min-width: 415px) and (max-width: 800px){
.text-aboutus {
background-color: #F1E3D6;
border-radius: 10px
}
}
/* for mobile*/
#media (max-width: 414px){
.text-aboutus-mobile {
background-color: #F1E3D6;
border-radius: 10px;
margin-left: 5% ;
margin-top: 60%;
}
/* animation for mobile */
#media (max-width:414px) {
.text-aboutus-mobile {
background-color: #F1E3D6;
border-radius: 10px;
margin-left: 5% ;
margin-top: 60%;
animation: fade-in-about-us-mobile 1.5s ease-in forwards;
opacity: 0;
transform: translateX(100%);
}
#keyframes fade-in-about-us-mobile {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0%);
}
}
/* animation for desktop/tablet */
#media (min-width:415px) {
.text-aboutus {
animation: fade-in-about-us 2s ease-in forwards;
opacity: 0;
}
#keyframes fade-in-about-us {
from { opacity:0; }
to {opacity: 1; }
}
It can't be a class issue since if I swap the two animation the code works fine for the one been read at the top.
It's probably a media query but I don't know how to fix it.
Any idea on how I should do it?
Thank in advance.
Whenever I run into an unexpected problem with my code, the first thing I do is make sure that all required semicolons and brackets are in place. Media queries are especially tricky because you need 2 curly brackets at the end instead of just one and that's easily overlooked. :)
It should look something like this:
#media only screen and (max-width: 600px) {
.class-name {
color: #fff;
font-size: 12px;
text-decoration: underline;
}
}
I also noticed that you use #media without the "only screen" prefix, which is not an issue per se but you might want to have a look at this thread that explains the difference and when to use what: What is the difference between "screen" and "only screen" in media queries?
Hope this helps!
As part of making our websystem responsive to mobile devices, I'm using CSS media queries to alternate between having a header bar and a hamburger menu.
Now I thought it'd be a nice gimmick if it animated between the two layouts when desktop users adjusted the size of their browser window beyond the bounds defined by the media queries. As a proof-of-concept test I've been experimenting with the transition between our large logo and the small one.
My animations.scss file contains these two animations:
#mixin ToSmallLogo() {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-name: SwapToSmallLogo;
#keyframes SwapToSmallLogo {
0% {
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
100% {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
}
}
}
#mixin SwapToBigLogo() {
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-name: SwapToBigLogo;
#keyframes SwapToBigLogo {
0% {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
100% {
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
}
}
Then I've got a SCSS file specifically for the media queries, containing:
#import '../../Variables/Sizes.scss';
#import '../Animations/animations.scss';
#media screen and (max-width: $bigToSmallFISLogo) {
#franklin {
#include ToSmallLogo();
}
}
#media screen and (min-width: $bigToSmallFISLogo){
#franklin{
#include SwapToBigLogo();
}
}
While the CSS before application of the media queries is this:
#franklin {
display: block;
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
background-repeat: no-repeat;
background-size: 100%;
height: 72px;
}
My issue is, while shrinking the screen past the defined size works perfectly, going back up just snaps to the larger image with no animation. I'd thought that the culprit was that I had the image defined in the CSS before application of the media queries, so I removed that part of it; but that just resulted in having no image.
Then while typing this question I had the idea use a media query to determine the direction of the animation, like so:
#mixin SwapLogo() {
/* background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;*/
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-name: SwapLogo;
#media screen and (max-width: $bigToSmallFISLogo) {
animation-direction: normal;
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
}
#media screen and (min-width: $bigToSmallFISLogo) {
animation-direction: reverse;
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
#keyframes SwapLogo {
0% {
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
100% {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
}
}
}
That resulted in the animation being ran on page load, but not at the resize.
Is there any way to do what I'm looking for?
Option 1 contains some faulty css
You've set the starting to width: 100%; on your SwapToBigLogo
#keyframes SwapToBigLogo {
0% {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
width: 100%; <---- culprit
background-image: url('../../../PageAssets/Fis.png');
}
Essentially, you're animation from width: 100% to width:100%. If you remove that line, it will probably work.
Option 2 tricky with reversing
When you reverse an animation, it will not reset iteration count and progress of the animation.
IE if you 'reverse' an animation at 100% finished. it will just apply the 100% finished of the 'reverse' state. not start from 0% reverse and animate to 100% reversed
see my answer to this question if you want to circumvent that
Alternative, use Transitions instead
If you have no need for complex animations and just want to smoothly transition from one state to another.
I would prefer to use css transitions.
#franklin {
display: block;
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
background-repeat: no-repeat;
background-size: 100%;
height: 72px;
transition: width 2s ease-in; // <--- this will animate when the media query kicks in.
}
#media screen and (max-width: $bigToSmallFISLogo) {
#franklin {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
}
}
#media screen and (min-width: $bigToSmallFISLogo){
#franklin{
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
}
Bonus
You can apply transitions to a * selector. (I would not recommend that for production grade websites, but it's fun to toy with.) It will cause everything to smoothly transition when your media query changes widths/layouts.
* {
transition: all 2s;
}
body {
background-color: red;
color: black;
font-size: 30px;
}
.logo {
width: 200px;
border: 5px solid black;
border-radius: 30px;
padding:20px;
}
/* On screens that are 992px wide or less, the background color is blue */
#media screen and (max-width: 630px) {
body {
background-color: blue;
color: white;
font-size: 20px;
}
.logo {
width: 100px;
border: 3px solid orange;
border-radius: 10px;
padding:10px;
}
}
/* On screens that are 600px wide or less, the background color is olive */
#media screen and (max-width: 400px) {
body {
background-color: lime;
color: white;
font-size: 12px;
}
.logo {
width: 50px;
border: 1px solid indigo;
border-radius: 5px;
padding:2px;
}
}
<h1>Resize window</h1>
<p>
<img class="logo" src="http://placekitten.com/200/300" alt="logo">
</p>
After a lot of experimentation, I've finally sussed it out. Essentially, as Lars pointed out, I'd forgotten to delete a couple of bits; but the solution I ended up with (which seems a bit smoother, as it fades one image into the other) is to have the base CSS as:
#franklin {
display: block;
background-repeat: no-repeat;
background-size: 100%;
height: 72px;
}
Then the mixin to apply the animation as follows:
#mixin SwapLogo($img, $width, $startIMG, $startWidth, $animationName) {
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-name: $animationName;
background-image: $img;
width: $width;
#keyframes #{$animationName} {
0% {
width: $startWidth;
background-image: $startIMG;
}
100% {
background-image: $img;
width: $width;
}
}
}
With the media queries being:
#media screen and (max-width: calc($bigToSmallFISLogo + 10px)) { //This overlap of 10px basically allows for the animation to take effect as the other animation is removed.
#franklin {
#include SwapLogo(url('../../../../PageAssets/fissmall.png'), 7%, url('../../../../PageAssets/Fis.png'), 100%, LogoGoSmall);
margin-top: 13px;
}
}
#media screen and (min-width: $bigToSmallFISLogo) {
#franklin {
#include SwapLogo(url('../../../../PageAssets/Fis.png'), 100%, url('../../../../PageAssets/fissmall.png'), 7%, LogoGoBig);
}
}
#media screen and (max-width: $minSizeForDesktopMenu) and (min-width: $bigToSmallFISLogo) {
#franklin {
margin-top: 26px;
}
}
#media screen and (min-width: $minSizeForDesktopMenu) {
#franklin {
margin-top: 13px;
}
}
I have these class, so hen I hover an item it do a transition, the problem is when I´m in mobile view, it exit of browse
.ftContainerOut {
padding-right:10px;
padding-bottom:20px;
transition: all 0.5s ease-in-out;
position: relative;
cursor:pointer;
z-index:1;
}
.ftContainerOut:hover {
transform: scale(1.5);
z-index:10;
}
I'm trying this to disable it on mobile, but it doesn´t work, only in normal view the transition gets stuck
#media screen and (min-width: 600px){
.ftContainerOut:hover {
display: none;
}
}
Help is very appreciated. Regards
First change your media query to max-width and then reset the properties that you want to reset for mobile.
#media screen and (max-width: 600px){
.ftContainerOut:hover {
transform: scale(1);
z-index:1;
}
}
Also if you want to remove transition in mobile you can also add
#media screen and (max-width: 600px){
.ftContainerOut {
transition: none;
}
}
You don't want to use display:none on the :hover, as this will make the div hide on hover, which wont work. Instead I suggest making it do nothing.
On desktop, you transform: scale the item by 1.5, so on mobile transform: scale it by 1, which as it is already 1, it will not change.
Same principle for z-index, on desktop :hover changes it to 10, so on mobile make it "change" to 1, but as it is already 1, again there is no change.
So the CSS would be:
#media screen and (max-width: 600px) {
.ftContainerOut:hover {
transform: scale(1);
z-index: 1;
}
}
Here's a snippet to try it out.
.ftContainerOut {
padding-right: 10px;
padding-bottom: 20px;
transition: all 0.5s ease-in-out;
position: relative;
cursor: pointer;
z-index: 1;
}
.ftContainerOut:hover {
transform: scale(1.5);
z-index: 10;
}
#media screen and (max-width: 600px) {
.ftContainerOut:hover {
transform: scale(1);
z-index: 1;
}
}
<div class="ftContainerOut" style="width: 100px; height: 100px; background: green;"></div>
So I made two animations for tablet using css animation and media query.
The main thing animation does is animate the div from top to center in tablet portrait and from left to center in tablet landscape.
When the page loads in portrait it animates correctly from top to center. But when the orientation is changed to landscape it starts the second animation from left to center. The same if it is in landscape first.
What I want is to animation to run only once on page load, and not trigger every time orientation changes.
Preferably without javascript, only css.
Here is a bit of code of how it works:
#keyframes leftToCenter {
from {
margin-left: -100vw;
}
to {
margin-left: 0;
}
}
#keyframes topToCenter {
from {
margin-top: -100vh;
}
to {
margin-top: 0;
}
}
#media only screen and (orientation: portrait) {
.div {
animation-name: topToCenter;
animation-duration: 1s;
}
}
#media only screen and (orientation: landscape) {
.div {
animation-name: leftToCenter;
animation-duration: 1s;
}
}
Edit:
The animation must not be done with jQuery, it should be done only with css animation. This is the requirement.
Also, the animation is a bit more complicated, I just put the simplest version of it here.
The main thing is that it runs only on page load, and not on orientation change.
The only way that I can think of to do that in pure CSS involves the use of a single animation.
This way the browser asumes the animation has finished, and won't trigger it again.
In one orientation, we will use half of the animation, beginning at the middle, and ending at the end.
In the other orientation, we will begin also at the middle, but we will execute it in reverse and end at he beginning
#keyframes dual {
from {
margin-left: 0;
}
49.9% {
margin-left: -100vw;
margin-top: 0;
}
50% {
margin-left: 0;
margin-top: -100vh;
}
to {
margin-top: 0;
}
}
#media only screen and (orientation: portrait) {
.element {
animation-name: dual;
animation-duration: 2s;
animation-delay: -1s;
}
}
#media only screen and (orientation: landscape) {
.element {
animation-name: dual;
animation-duration: 2s;
animation-delay: -1s;
animation-direction: reverse;
}
}
.element {
width: 100px;
height: 100px;
background-color: lightblue;
}
<div class="element"></div>
In case anyone's interested, I found another solution to this problem.
You have to move the keyframes declaration inside the media query and give them the same name. That way the right animation still gets triggered when needed, and as they have the same name animation count will increese to 1 after first animation and won't trigger again after orientation change.
#media only screen and (orientation: portrait) {
#keyframes animation{
from {
margin-top: -100vh;
}
to {
margin-top: 0;
}
}
.div {
animation-name: animation;
animation-duration: 1s;
}
}
#media only screen and (orientation: landscape) {
#keyframes animation{
from {
margin-left: -100vw;
}
to {
margin-left: 0;
}
}
.div {
animation-name: animation;
animation-duration: 1s;
}
}
There is probably a CSS way to do it but it is very easy to create your effect using jQuery:
$(document).ready( function(){
$('#yourdiv').show().animate({top:'50%'},1000);
});
Just set #yourdiv's style this way in order to center it when position is absolute:
display: none;
position: absolute;
z-index: 100000; /* on top of all others element */
top: -50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
The effect will occur only when thee page is refreshed.
You can even add an other div called shadow to make it even better looking :)
I am changing the width of a DIV with the following CSS:
div { width:100px; }
#media only screen and (min-width: 400px) {
div { width:300px; }
}
#media only screen and (min-width: 600px) {
div { width:500px; }
}
Is it possible to use CSS transitions to animate the change in width from 300 to 500 and from 500 to 300, without animating the change from 100 to 300 and from 300 to 100?
JSFiddle
You can just put the transition on last media query http://jsfiddle.net/T7A5v/1/
EDIT: I see what you mean, you can give this a try instead: http://jsfiddle.net/T7A5v/2/ The trick is to transition a min-width instead of the width itself.
div {
background: red;
width: 100px;
}
#media only screen and (min-width: 400px) {
div {
width: 300px;
min-width: 300px;
-webkit-transition: min-width 3s;
-moz-transition: min-width 3s;
-o-transition: min-width 3s;
transition: min-width 3s;
}
}
#media only screen and (min-width: 600px) {
div {
min-width: 500px;
-webkit-transition: min-width 3s;
-moz-transition: min-width 3s;
-o-transition: min-width 3s;
transition: min-width 3s;
}
}