I cannot seem to get my background (the targets and the buck to resize with viewport change. I want to make sure that it looks good on a Macbook air as well as a Pro. I am a novice with Layerslider. I have tried settings like:
type: 'fullsize', or type: 'fullwidth', globalBGSize: 'contain', or slideBGSize: 'cover', responsiveUnder: 1281, or responsiveUnder: 1400
My next question relates to the items that i have entering into the viewport. The two yellow buttons are working well but the scope in the bottom left currently only moves to the right place on XXL screens. When resized to a MD i.e. bootstrap viewport size, it does not move to the same spot on the deer (background).
I have tried using a class and applying it to a slide or a <p> or <img>, but the slider seems to override any positions in a class using the style attribute. Any chance you could point me to some videos that would explain more about how the slide settings "work"? I get the key/value pairs for settings are all documented.
Do I have this straight?
1) top: and left: positions in the style tag are where the item(<p>, <img>, etc..) will end up. 2) the setting in the data-ls: tag are where the item comes from and how it gets to it's final resting place (lol)
If these are true, is there any way to change where the item will end up based on viewport?
As I can see, you've set the responsiveUnder to 1360 but the slider's width is only 1140px. I would suggest you to use the same values for width and responsiveUnder. That will solve some positioning issues.
I've made an explanation illustration about how the sizing in full width sliders work. If the browser is wider than the initial with of the slider, the slider's hidden container will be positioned to the center of the screen (of course the slide background image will overflow to since this is a full width slider). I suggest you to use pixels for positioning and the values should be lower than the initial sizes of the slider, Or if you would like to use percentage values, they should be lower than 100%. In these cases your layers will be visible regardless to the screen size).
I cannot seem to get my background (the targets and the buck to resize with viewport change. I want to make sure that it looks good on a Macbook air as well as a Pro. I am a novice with Layerslider. I have tried settings like:
type: 'fullsize', or type: 'fullwidth',
globalBGSize: 'contain', or slideBGSize: 'cover',
responsiveUnder: 1281, or responsiveUnder: 1400
etc... but NOTHING seems to change.
Please help!!!!
Dana
Hello Dana,
I would choose type: fullwidth, the bg size should be set to 'cover' and the responsive under value between 1024 and 1360
Best Regards,
George | Kreatura Dev Team
Thanks George. I worked with one of your examples that the background seemed to resize correctly and added my slides to it. Working well: https://www.microsnelaptops.com/adcosales/slider.html .
My next question relates to the items that i have entering into the viewport. The two yellow buttons are working well but the scope in the bottom left currently only moves to the right place on XXL screens. When resized to a MD i.e. bootstrap viewport size, it does not move to the same spot on the deer (background).
I have tried using a class and applying it to a slide or a <p> or <img>, but the slider seems to override any positions in a class using the style attribute.
Any chance you could point me to some videos that would explain more about how the slide settings "work"? I get the key/value pairs for settings are all documented.
Do I have this straight?
1) top: and left: positions in the style tag are where the item(<p>, <img>, etc..) will end up.
2) the setting in the data-ls: tag are where the item comes from and how it gets to it's final resting place (lol)
If these are true, is there any way to change where the item will end up based on viewport?
Wordy, I know.... thanks for your time...
Hello Dana,
As I can see, you've set the responsiveUnder to 1360 but the slider's width is only 1140px. I would suggest you to use the same values for width and responsiveUnder. That will solve some positioning issues.
I've made an explanation illustration about how the sizing in full width sliders work. If the browser is wider than the initial with of the slider, the slider's hidden container will be positioned to the center of the screen (of course the slide background image will overflow to since this is a full width slider). I suggest you to use pixels for positioning and the values should be lower than the initial sizes of the slider, Or if you would like to use percentage values, they should be lower than 100%. In these cases your layers will be visible regardless to the screen size).
Attached files: fullwidth-slider-sizing.png
Best Regards,
George | Kreatura Dev Team