Issues with CSS

Hi Guys,

Hope you’re doing well.

I would need some support with CSS styling where I am getting crazy because i haven’t found the cause why it didn’t work as it should. I know it’s specific Theme related, but perhaps you can help. In Private Content section I added the URL to our DEV Environment as well as a screenshot of the affected element which brings me into the madhouse ;).

The following styles were defined for this element:

@media only screen and (min-width: 360px) and (max-width: 422px) {
	canvas#canvas.animation2 {
		   background-color: rgb(251, 250, 250) !important;
    max-width: 224px;
    max-height: 152px;
    position: absolute !important;
    top: 10%;
    left: 15%;
	}}

@media only screen and (min-width: 423px) and (max-width: 767px) {
	canvas#canvas.animation2 {
		    background-color: rgb(251, 250, 250) !important;
    max-width: 224px;
    max-height: 152px;
    position: absolute !important;
    top: 30%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%,-50%);
	}
}

@media only screen and (min-width: 768px){
	canvas#canvas.animation2 {
	background-color: rgb(251, 250, 250) !important;
    max-width:448px;
    max-height:302px;
    position: absolute !important;
    top: 10%;
    left: 15% !important;
	}}

The issues i experience is that the last definition doesn’t work. Means even on wider screens the element will remain in width: 224px; and height: 152px;. It seems as only the latest one “(min-width: 423px) and (max-width: 767px)” keeps active.

Would be glad if you have an idea.

Best regards,
Frank