CSS media query not working properly using elementor

Question

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.

score 0 · Answer 1 · answered Jan 26 '23 at 17:49

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!

CSS media query not working properly using elementor

1 Answers1