Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • December 30, 2014 at 2:42 am #372958
    daniejm

    Hi there,

    I am trying to mimic the slider style of Vertafore.com. They have a slider at the top of the page, but also content boxes with clickable buttons. Is this possible with the Layerslider?

    Thank you,

    Joe

    December 30, 2014 at 5:15 pm #373191
    Elliott

    Hi Joe!

    Yes, you can add HTML and shortcodes into the LayerSlider layers. When you edit the layer switch to the “HTML / Video / Audio” tab and insert whatever you need.

    Regards,
    Elliott

    January 3, 2015 at 7:34 pm #374540
    daniejm
    This reply has been marked as private.
    January 5, 2015 at 6:00 pm #375205
    Elliott

    Hey!

    Try adding this to your custom CSS.

    .ls-wp-fullwidth-container, .ls-wp-fullwidth-helper, .ls-container, .ls-container * { box-sizing: none !important; }

    If that’s not what your referring to then take a screenshot and highlight what your trying to do so we can get a better idea.

    Best regards,
    Elliott

    January 6, 2015 at 1:41 am #375435
    daniejm

    Hi, Elliott,

    My browser must’ve been caching when I originally made this thread because the Promobox is displaying properly now. The issue has evolved a bit.

    1. First, I’ve assigned a custom class to the Promobox in the slider. The class is “slider-promobox1.” How do I note the CSS to begin styling the Promobox, such as changing the background color?

    2. The Promobox is not resizing in mobile. Here is a screenshot of how the code is currently reacting on mobile:

    The ultimate goal is to mimic the concise layout of Vertafore.com, where they have modifiable content boxes within their slider, and the content boxes optimize for mobile also. Desktop and mobile examples below:

    January 6, 2015 at 7:42 pm #375810
    Elliott

    Hey!

    The class I saw assigned to the promobox was, “slider-promobox”. You can target it via CSS like so.

    .slider-promobox {  }

    Use this CSS to limit it’s width.

    .ls-slide .av_promobox {
    max-width: 200px;
}

    Cheers!
    Elliott

    January 9, 2015 at 2:56 pm #377362
    daniejm

    Hi Elliott,

    This code allows the desktop view to look great. For example: right now at prospxd, the Promobox width is set at 850px.

    However, this is how its showing on mobile. The text is impossible to read and the 850px extends off the slider. Can the mobile version be adjusted without affecting the desktop version?

    Mobile version

    January 9, 2015 at 9:38 pm #377604
    Elliott

    Hey!

    Add this.

    @media only screen and (max-width: 767px) {
.avia-promocontent p {
    line-height: 30px;
}
}

    Regards,
    Elliott

    January 10, 2015 at 4:13 am #377682
    daniejm

    Hi Elliott,

    Thanks for continuing to look into this. This fixes the line-spacing on mobile, but does not seem to correct the width of the promobox. Also, now the promobox is blocking out nearly the entire slider. Please reference the desktop / mobile pictures above from Vertafore. That’s the goal. :)

    Do you think it’s possible?

    Here is a current screenshot from mobile:

    January 10, 2015 at 4:37 am #377695
    Josue

    Hey!

    Try with this code:

    @media only screen and (max-width: 767px) {
	.avia-promocontent p {
		line-height: 18px;

	}
	.ls-slide .av_promobox {
		width: 250px;
		padding: 10px 20px;
	}
}

    Regards,
    Josue

    January 10, 2015 at 2:51 pm #377771
    daniejm

    Hi Josue,

    This will be close enough, I think. I appreciate your and Elliott’s help on this.

    To have the CSS in my backpocket, in case the client opts to go that way, is there a way to hide the Layerslider Promobox on mobile only? That promobox has been assigned a custom CSS class of “slider-promobox.”

    Thanks a bunch,

    Joe

    January 12, 2015 at 4:13 am #378100
    Josue

    Hey!

    Try something like this:

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

    Best regards,
    Josue

    January 17, 2015 at 11:57 pm #381332
    daniejm

    Thanks, Josue. This looks good. :)

    This thread can be closed. Thanks again for all of your help.

    January 19, 2015 at 11:38 pm #382171
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Adding content boxes to LayerSlider’ is closed to new replies.