I have a colour section with a video background, but obviously video backgrounds don’t work on mobiles. So, is there a way that when viewed on mobiles, the colour section is hidden, and replaced by a layer slider?
Hey kieranvyas,
In order to achieve that ; you should give an “id” or “class” to your elements.
See – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Just an example :
Color section (Give a class : desktop)
> Put the elements that you want to show only on desktop
Layer Slider (Give another class : mobile)
> Put other elements that you want to show only on mobile
In the css style :
/*HIDE ON DESKTOP*/
#mobile {display: none !important;}
@media only screen and (max-width: 767px) {
/*HIDE ON MOBILE*/
#desktop {display: none !important;}
/*SHOW ON MOBIL*/
#mobile {display: block !important;}
}
Best regards,
Jordan
Thank you! Perfect
hi, please help if posssible
i followed same process:
– first i activated the ALB
– i gave a name “ktf-darkborder ” to custom css , in the coloured section i want to hide in mobile view
– i included this CSS in “quick CSS” field :
#top .ktf-darkborder {
border: 11px solid #333;
/*HIDE ON DESKTOP*/
#mobile {display: none !important;}
@media only screen and (max-width: 767px) {/*HIDE ON MOBILE*/#desktop {display: none !important;}}
}
Unfortunatly the result show only the sction with border , but do not hide the section in case of mobile phone navigation
what’s the mistake ido in code?
thank you for your support
Simone
i uderstood now ithat the case was very different
my case is more easy..
i have a coloured section i want this section to be hide during mobile navigation
can you hlep me ?
sorry for my misunderstand
thank you
Simone
i solved using explanation present on this link
sorry for disturb you
Simone