Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 27, 2017 at 12:25 pm #767369
    jermainejulius

    Hi,

    I looking for a capture form to hover over the image on the homepage.

    Please see link for example:
    http://canvas84.com/EmrynWealth.jpg

    Is this possible and do you recommend using a plugin.

    Kind Regards
    Jermaine

    March 27, 2017 at 4:52 pm #767557
    Victoria

    Hey jermainejulius,

    You can build this with LayerSlider, no need for a plugin.
    You can find LayerSilder at the bottom of the sidebar menu in your WordPress admin panel.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 28, 2017 at 9:40 am #767999
    jermainejulius

    Thanks Victoria,

    This was very helpful. I was able to create the form, however it breaks on mobile and therefore has to hide it.

    Is there a way that I could add this form in the main content body using a layout element and then hide this element for desktop users because its already displaying in the advance layerslider.

    Kind Regards
    Jermaine

    March 29, 2017 at 6:20 pm #768974
    Victoria

    Hi jermainejulius,

    Yes, you can add it and hide for big screens. If you need help with media query and css give me the link, where you’ve added the form on the page in content :)

    Best regards,
    Victoria

    April 10, 2017 at 1:23 pm #775446
    jermainejulius

    Hi Victoria,

    My test page is http://canvas84.com/pages/. The form is labeled Send us mail. I would like to hide the form on desktop.
    Screenshots:
    canvas84.com/form.PNG
    canvas84.com/backend.PNG

    Kind Regards
    Jermaine

    April 11, 2017 at 7:01 am #775828
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 1024px) {
.page-id-1122 #layerslider_2 form {
  display:none;
}
}

    Best regards,
    Rikard

    April 12, 2017 at 2:51 pm #776675
    jermainejulius

    Hi Rikard,

    I added the code and unfortunate it does not work.
    The form still displays for the mobile format.

    J

    April 12, 2017 at 4:23 pm #776784
    Andy

    Hi,

    try to add an !important to Rikard’s code:

    @media only screen and (min-width: 1024px) {
.page-id-1122 #layerslider_2 form {
  display: none !important;
}
}

    Clear browser cache and refresh a few times.

    Best regards,
    Andy

    April 12, 2017 at 4:31 pm #776796
    jermainejulius

    Hi Andy,

    I’ve added it but its still not working.

    See the class below:
    <form action=”http://canvas84.com/pages/&#8221; method=”post” class=”avia_ajax_form av-form-labels-hidden avia-builder-el-9 avia-builder-el-no-sibling ” data-avia-form-id=”2″ data-avia-redirect=””>

    Kind Regards
    Jermaine

    April 13, 2017 at 4:34 pm #777371
    Victoria

    Hi Jermaine,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 768px) {

#top .avia_ajax_form.av-form-labels-hidden.avia-builder-el-9.avia-builder-el-no-sibling   {
  display: none;
}

}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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