Animation deactivation

Hello!
How to deactivate an animation (slide in left/right) of a widget style only on mobile view?
Thank you in advance!

Hello,

Can you please provide a link to your website and specify the widget that you want to affect?

Kind Regards, Roman.

Hello,
The webpage is this one https://www.drphysio.gr/Χρονολόγιο/
On desktop/tablet I want the animation effect but not on mobile.
Thank you in advance!

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (max-width: 780px) {
	.panel-widget-style {
		animation: none !important;
	}
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

I tried it but it still animates!

Hello,

I’ve just checked your website once again and didn’t see that code applied in Customize → Additional CSS section. How did you add it exactly?

Kind Regards, Roman.

Hello and sorry for the delay!
The code you provided is applied in Customize-Additional CSS and on mobile view the effect is still enabled!
Thank you in advance

Hello, here is what I see in your Additional CSS:

				/*
You can add your own CSS here.
Click the help icon above to learn more.
*/

#mainnav #menu-item-1884 {
	padding-left: 30px !important;
}

#menu-item-1884 a {
	border: 1px solid #ff3314;
	padding: 2px 20px;
	border-radius: 3px;
	transition: all 0.3s;
	background-color: #ff3314 !important;
	font-family: "Raleway", sans-serif
	!important;
	font-size: 13px !important;     line-height: 15px;
	font-weight: 700 !important;
	text-transform: none;
}

#menu-item-1884 a:hover {

	background-color: #ff3314 !important;
	color: #fff !important;
}

/*
ΤΟ ΠΑΡΑΚΑΤΩ ΕΙΝΑΙ ΤΟ BUTTON HOVER */

#menu-item-1884 a:hover {
	background-color: transparent
!important;
}

.footer-widgets {
	padding: 20px 0;
}

/* το παρακατω ειναι για τα buttons των υπηρεσιων */

[role=button] {
	border-radius: 5px;
	font-weight: bold;
}

/* το παρακατω ειναι για το κενο κατω απο menu και πανω απο footer
*/

.page-wrap {
	padding: 0 !important;
}

.home .entry-header {
	margin-bottom: 0 !important;
}

#pl-7652 .lsow-hero-header {
	margin-top: 0 !important;
}

@media screen and (min-width: 992px){
	.sow-slider-image {
		min-height: 504px;
	}
}			

You can try to clear your Hummingbird cache and see if it helps.

Kind Regards, Roman.

Well…I cleared hummingbird cache , chrome’s cache and history and now the effect is disabled only on tablet view

Hello,

  1. I checked mobile view and didn’t see animation. Do you still see animation on mobile devices?

  2. You can try to reduce max-width value in the code I provided above to achieve what you want.

Kind Regards, Roman.