Enfold theme layerslider image not responsive
-
I hope someone here might be able to help me out. I tried the slider support already with no success.
I’m using the layersider5 plugin that came with the Enfold theme. I have 4 slides created for my slider at https://www.virginiamortgageguru.com
The slider allows content to be added in 4 ways via image, text, html/video, or dynamic content from posts. I have buttons (which are image files) on each slide. If I add the image as was designed by the slider, the button image is responsive for mobile and shrinks down in relation to the rest of the content on the slider.
When an image is put in through the image module as the slider was designed and linked, this is the code that the slider puts out:
<a href="https://www.sherisdolls.com" target="_self" class="ls-l" style="top:361px;left:35px;" data-ls="offsetxin:left;durationin:1500;delayin:600;offsetxout:left;" alt=""><img style="white-space: nowrap;" src="https://virginiamortgageguru.com/wp-content/themes/enfold/config-layerslider/LayerSlider/static/img/blank.gif" data-src="https://virginiamortgageguru.com/wp-content/uploads/2014/04/startbutton.png"></a>
However, I wish to open external links with 2 of those buttons. The slider has a link options section, (see below) but I need one of the buttons to open into a lightbox and the other into a popup. To accomplish this, I added the buttons to a blank test page on wordpress and copy/pasted the html markup into the html section available on the slider for content. The button works great, but the image is no longer responsive so on mobile it either only shows a corner of the button or it covers other content.
So far the slider developer hasn’t been able to find a workaround for this. When I enter the content via html, the slider wraps it in a <div> tag automatically. Here are my examples:
Slide 1 button “Let’s get started” – this button links to the next slide. I just used the link option in the slider. This button would be fine as just a linked image, but it’s not stable and won’t show up on my page on a refresh so I inserted the html instead to stabilize it.
inserted code:<img class="alignnone size-full wp-image-13" src="https://virginiamortgageguru.com/wp-content/uploads/2014/04/startbutton.png" alt="startbutton" style="width:100%;height:100" />
code converted by slider:
<div class="ls-l ls-linkto-2" style="top:362px;left:41px;white-space: nowrap;" data-ls="offsetxin:left;durationin:1500;delayin:700;offsetxout:left;"><img class="alignnone size-full wp-image-13" src="https://virginiamortgageguru.com/wp-content/uploads/2014/04/startbutton.png" alt="startbutton" style="width:100%;height:100"> </div>
Slide 2 button “Register now” – this one opens into a lightbox with an external link
inserted code:
<a class="lbp_secondary" href="https://secure.web-loans.com/secure.aspx?p=11&u=virginiamortgageb.instantlender.com"><img class="alignnone size-full wp-image-45" src="https://virginiamortgageguru.com/wp-content/uploads/2014/04/registernew.png" alt="registernew" width="200" height="100" /></a>
code converted by slider: <div class=”ls-l” style=”top:300px;left:738px;height: ;white-space: nowrap;” data-ls=”offsetxin:right;durationin:1500;delayin:1300;offsetxout:right;”><img class=”alignnone size-full wp-image-45″ src=”https://virginiamortgageguru.com/wp-content/uploads/2014/04/registernew.png” alt=”registernew” width=”200″ height=”100″> </div>`
Slide 3 button “Pull my credit” – this button opens a popup window with an external link.
<strong>inserted code:</strong>
<a href="https://spedick.startmyapplication.com/smaweb/index.jsp" class="popup" data-height="900" data-width="900"><img class="alignnone size-full wp-image-46" src="https://virginiamortgageguru.com/wp-content/uploads/2014/04/creditnew.png" alt="registernew" width="200" height="100" /></a>
<strong>code converted by slider:</strong>
<div class="ls-l" style="top:300px;left:738px;white-space: nowrap;" data-ls="offsetxin:right;durationin:1500;delayin:1300;offsetxout:right;"><a href="https://spedick.startmyapplication.com/smaweb/index.jsp" class="popup" data-height="900" data-width="900"><img class="alignnone size-full wp-image-46" src="https://virginiamortgageguru.com/wp-content/uploads/2014/04/creditnew.png" alt="registernew" width="200" height="100"></a> </div>
These options are available in the slider for the content
These are the styling options
These are the attribute options but they apply to the image itself and not the link.
These are additional slide options the ID options states “You can apply and ID attribute on the HTML element of this slide to work with it in your custom CSS or Javascript code.”
These are the link options
Now if you’re still reading this, my client likes the look and the function of the page with the exception of the buttons not shrinking with the rest of the slider contents. I need to find a way to fix this and unfortunately, I’m a complete novice. I can edit some html and I can cut and paste, but writing code is way beyond my skillset.
I had changed my height and width attributes for the images on a previous version of this site (which I lost)and that worked, but I can’t remember what it was and I can’t find where I found it.
Can anyone help me out with this??
Thank you in advance
- The topic ‘Enfold theme layerslider image not responsive’ is closed to new replies.