I am creating an animated logo for website running on WordPress and I want to know if it is possible to make the css animation possible only for desktop resolutions. I think the animation would not work for mobile version and I want to have different css for mobile versions.
Is it possible to put the #keyframes into #media screen and (min-width: 1000px){...} ? Just combine it somehow?
Thank you.
Just use the animation property inside a media query.
#keyframes myKeyframe {
from { top: 0; }
to { top: 100px; }
}
#media screen and (min-width: 1000px) {
#myDiv {
animation: myKeyframe 1s;
}
}
Related
Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>
.bg-img-1 {
background: url("../images/bg-img-01.jpg");
}
This is loading the background image in the site and I want to display an another image for mobile displays. How can I do it?
You can use media queries in your css:
// default image
.bg-img-1 {
background: url("../images/bg-img-01.jpg");
}
// for tablets and above
#media screen and (max-width: 768px){
.bg-img-1 {
background: url("../images/bg-img-01-tablet.jpg");
}
}
you can use multiple media queries for different screen resolutions.
you can used media and to another size review another image
#media screen and (max-width: 940px) {
.bg-img-1 {
background: url("another image");
}
}
You need to use media queries :)
For computer queries, you use one image, and for mobile queries, you use an other image :) Check W3C it can help you :)
I have a wordpress site running an ET Divi child theme and on mobile the main menu does not scroll on touch, instead the background (website) scrolls. I've been trying several media queries and such to fix but cannot figure it out, anyone have thoughts or run into this before? Here is my child theme stylesheet add-on code:
the website is wptemp.thereverendmichael.com (make sure to adjust width for mobile viewing only)
#media (max-width: 980px) {
#main-header {
position: fixed !important;
}
}
#media (max-width: 980px) {
.et_fixed_nav #top-header {
position:fixed !important;
}
#mobile-menu {
overflow-y:scroll!important;
-overflow-scrolling:touch!important;
-webkit-overflow-scrolling:touch!important;
}
}
.et_mobile_menu {
margin-left: -30px;
padding: 5%;
width: calc( 100% + 60px);
}
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}
Sorry, I figured it out with a bit more playing. Here was the solution
EDIT: Future Divi versions have changed .et-mobile-menu to .et_mobile_menu just thought I'd give a heads up.
.et_mobile_menu {
overflow-y:scroll!important;
max-height:80vh!important;
-overflow-scrolling:touch!important;
-webkit-overflow-scrolling:touch!important;
}
I'm trying to make a responsive index for my website, for this, i'm using Firefox Responsive Design Mode. In 1920x900px, my #media is working perfectly. The problem is when i change to 1280x600px. He keeps getting the images positioning like i order in 1920x900px. I made some tests and other attributes for 1280x600px works ! Here's the comments in my code:
/* Para monitores 1280x600px */
#media screen and (max-height:600px){
#slider{
/* If i change this to display:none; it really disappear the tag,
which makes me guess the screen calc is doing ok.*/
height:73.5vh;
}
}
#media screen and (max-width:1280px){
#mainAtc{
margin-left:2vw;
}
#othAtc{
margin-left:0;
}
}
/* Para monitores 1920x900px */
#media screen and (max-height: 900px){
#slider{
/* But, if in 1280x600 i got display:none, and here i got display:block, he shows me the image. It's like it doesn't work just when i give same attributes to differente #media. */
height:51.6vh;
}
}
#media screen and (max-width: 1920px){
#mainAtc{
margin-left:2vw;
}
#othAtc{
margin-left:7.6vw;
}
#atcRest{
margin-left:2vw;
}
}
Someone could help me ? Thanks!
I am trying to transition an element from top to bottom, (0 to 100vh). Internet explorer 11 is doing weird things, when transitioning transform property. It is going up when it should go down and not respecting the duration.
JSFIDDLE1
JSFIDDLE2
div{
width:200px;
height:200px;
background:black;
transition:transform 5s;
-ms-transition: -ms-transform 5s;
}
div:hover{
transform:translateY(100vh);
-ms-transform:translateY(100vh);
}
Why is this happening and how can I solve it?
I know this question is old, but I ran into this same issue today. I'm building a kind of slideshow that uses CSS transitions to animate slides in and out. Most browsers handle transform: translateX(-100vw) and transform: translateY(-100vh) to move slides left and up respectively, but IE has trouble calculating the correct start/end positions and gets confused on the timing just like #Alvaro mentioned.
The solution is to use absolute units (e.g., pixels) rather than relative. But, given the wide range of screen sizes I need to support, I can't use a single value.
My work around was to use a series of #media queries to define a set of translation rules that will always ensure the slide moves off screen, but doesn't go too far. For example:
/* Slide left */
#media (max-width: 480px) {
.slide.left {
transform: translateX(-480px);
}
}
#media (min-width: 481px) and (max-width: 960px) {
.slide.left {
transform: translateX(-960px);
}
}
#media (min-width: 961px) and (max-width: 1920px) {
.slide.left {
transform: translateX(-1920px);
}
}
#media (min-width: 1921px) and (max-width: 3840px) {
.slide.left {
transform: translateX(-3840px);
}
}
#media (min-width: 3841px) {
.slide.left {
transform: translateX(-7680px);
}
}
/* Slide up */
#media (max-height: 480px) {
.slide.up {
transforom: translateX(-480px);
}
}
/* Etc. */
These queries would support up to 8K resolution, albeit with significantly less granularity at higher resolutions. You'll want to adjust them based on your expected usage.