Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 7, 2016 at 1:58 am #669369
    goldengate415

    I have a page where I’ve inserted a video using Avia Layout builder — > Media Elements –> Insert Video

    Is it possible to somehow only display this video if user is on mobile, and ignore it otherwise?

    Thanks

    August 7, 2016 at 4:41 pm #669484
    Vinay

    Hey goldengate415,

    To display only in mobile or desktop please enable custom css class name support http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    /*Show only in mobile or desktop*/

@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}

@media only screen and (max-width: 768px) {
.only_desktop { display: none !important; }}

    Best regards,
    Vinay

    August 7, 2016 at 5:08 pm #669495
    goldengate415

    Thank you, Vinay! And this will allow me to only do this on one page of my site with one element, not the entire site, correct?

    August 7, 2016 at 5:31 pm #669504
    goldengate415

    Vinay, nevermind above, I added the code to functions.php and see that it will indeed allow me to select this only on certain pages / elements.

    I don’t know css at all so it’s just like looking at letters to me, so forgive my continued questions… I’m a newbie on this.

    In the Enfold link / tutorial from Yigit it says to give the custom class a special name prefixed with initials, so are we creating two custom classes, one called “.only_mobile” and one called “.only_desktop”?

    And then once I add the code to the custom css file, how do I make the element display only on mobile? Do I just type in “.only_mobile” in the custom css class field of the element?

    Thanks!!!!!

    August 7, 2016 at 5:47 pm #669507
    goldengate415

    I played around with it and figured it out… works perfectly, thank you!!

    August 10, 2016 at 8:20 am #670684
    Vinay

    Hi,

    Glad you got it sorted :)

    Thank you for using Enfold.

    If you need any further help please feel free to get in touch with us via new ticket.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Avia Layout Builder: Possible to Display Video Element on Mobile Only?’ is closed to new replies.