Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 2, 2016 at 1:36 pm #719667
    HannaVogt

    Hi!
    I have a problem with two links on my mobile page, one on the front page, one on the navigation menu. The reason is, that I had to double an element and adjust it for mobile. I gave it another ID (technology_mobile instead of technology) to be able to define it for mobile only in the quick CSS field. The problem now is, that the general navigation link and the one on the front page goes to #technology, so on mobile, where I use the technology_mobile element, the link doesn’t work.
    Do you have any advice for me what I can do?

    Thanks!
    Best,
    Hanna

    December 2, 2016 at 4:18 pm #719774
    Nikko

    Hey HannaVogt,

    I would suggest enabling Custom Css Classes, you can check it here: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
    Then instead of having 2 color sections with different ids, you can have 1 section, then on the elements inside it you can add classes which you can use to hide/show on desktop or mobile.

    Best regards,
    Nikko

    December 3, 2016 at 12:31 am #719950
    HannaVogt

    Hi Nikko,

    I just added the code to my functions.php file and got a http 500 error afterwards when opening the page. I tried several times to make sure it is really caused by the code. Is this something you can help me with or should I ask the host instead?

    Thanks!
    Best,
    Hanna

    December 3, 2016 at 12:59 am #719968
    Nikko

    Hi,

    At the bottom of your functions.php, you should see this code:

    // add_theme_support('avia_template_builder_custom_css');

    You just need to remove the // and the Custom Css Classes should be enabled. Let us know if doing so still causes 500 error.

    Best regards,
    Nikko

    December 4, 2016 at 12:48 pm #720205
    HannaVogt

    Ok, that worked, thanks! I got the CSS class entry field and tried the following:
    – I deleted the second color section and put the video of the deleted color section into the first color section. I kept the video in the background of the first color section, as I want fullscreen for desktop.
    – I gave the color section for the desktop where I use the video as a background the class technology_desktop and the video element itsself that is for mobile the class technology_mobile
    – I changed the css code to this:
    @media only screen and (min-width: 768px) {
    .technology_desktop {
    display:block !important;
    }
    .technology_mobile {
    display:none !important;
    }
    }

    @media only screen and (max-width: 767px) {
    technology_desktop {
    display:none !important;
    }
    .technology_mobile {
    display:block !important;
    }
    }

    The result was, that I had two videos on my desktop version and no video on my mobile version. Is that caused by me putting a wrong code, by the fact, that the color element is superior to the video element or that background video and video player within one color section just don’t work?

    Thanks!
    Best,
    Hanna

    December 5, 2016 at 12:49 pm #720442
    Nikko

    Hey!

    Looking at the code you missed 1 .. I reviewed the page and it seems the solution I gave isn’t possible since you need both color sections and it really needs different id, what I did was to show-desktop class to the main menu link for Technology and created another main menu link, same label Technology, but link is for technology_mobile then added this class show-mobile. I modified your css code in Quick CSS from:

    @media only screen and (min-width: 768px) {
#technology {
 display:block !important;
}

#technology_mobile {
 display:none !important;
}
}

@media only screen and (max-width: 767px) {
#technology {
 display:none !important;
}

#technology_mobile {
 display:block !important;
}
}

    to

    @media only screen and (min-width: 768px) {
.show-desktop,
#technology {
 display:block !important;
}

.show-mobile,
#technology_mobile {
 display:none !important;
}
}

@media only screen and (max-width: 767px) {
.show-desktop,
#technology {
 display:none !important;
}

.show-mobile,
#technology_mobile {
 display:block !important;
}
}

    I tested it and it’s working fine. Let us know if its good on your end :)

    Regards,
    Nikko

    December 5, 2016 at 3:12 pm #720478
    HannaVogt

    Wow! This is great! It works and the best is, I learned so many new things:-)

    Unfortunately, it still doesn’t help me with the “Learn more” button on the first screen, within the Fullscreen slider. This button works perfectly in the desktop version but not on mobile, as I would need to add _mobile and can’t. Also, there is no way to give the fullscreen slider an ID – only classes work. What do you recommend in that case? Should I give the slider a class name and create a new slider for mobile with _mobile as a class name?

    Thanks so much!
    Best,
    Hanna

    December 5, 2016 at 4:13 pm #720514
    Nikko

    Hey!

    You can use existing classes, for example you can add the class show-desktop to your current slider, then create another slider and add the technology_mobile link then add the class show-mobile, no need to add more classes, the existing ones should work just fine :)

    Regards,
    Nikko

    December 6, 2016 at 11:58 am #720941
    HannaVogt

    It works! I’m so happy! Thanks! You did an amazing support job!

    Best,
    Hanna

    December 6, 2016 at 3:02 pm #721032
    Nikko

    Hi Hanna,

    You’re very much welcome. Glad we could help and thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.