So, when I drag to resize the browser manually after the site has been loaded, (from large to small) the assets in the sliders resize. However, if I load the assets on mobile or with the browser in a mobile width, the slider isn't acting responsively. For example, the slider in "Our Clients Love Us". When loaded on mobile, the text is larger than the box. If you resize the browser, the text becomes massive. The '4 Keys to Success' slider got so unruly that I had to essentially disable it to force the slides to become static and stack on each other. If you mess around with your browser window, you will see what I mean with the "Our Clients Love Us" region.
Any ideas what is causing this? Is it because I'm utilizing Bootstrap? I've included pictures to better show what I'm trying to describe.
The problem is that some custom styles are overwriting many style properties of text layers used by the slider. See the attachments for more informations. We highly recommend you to set the layer styles in the style attribute of the layers and not use the !important statement because it can break the responsiveness of your sliders.
Thanks George. I removed the important as advised, but the issues remains. I'm confused why these particular styles would interfere when the documentation says they are fine to use in external stylesheets (only positioning rules are supposed to be not used externally). Any other possibility?
I found another issue: you forgot to set the (initial) width and height of the slider in a style attribute of the slider element. Without specifying the initial dimensions, the slider will not know the starting size of the responsiveness.
So, when I drag to resize the browser manually after the site has been loaded, (from large to small) the assets in the sliders resize. However, if I load the assets on mobile or with the browser in a mobile width, the slider isn't acting responsively. For example, the slider in "Our Clients Love Us". When loaded on mobile, the text is larger than the box. If you resize the browser, the text becomes massive. The '4 Keys to Success' slider got so unruly that I had to essentially disable it to force the slides to become static and stack on each other. If you mess around with your browser window, you will see what I mean with the "Our Clients Love Us" region.
Any ideas what is causing this? Is it because I'm utilizing Bootstrap? I've included pictures to better show what I'm trying to describe.
Hello,
The problem is that some custom styles are overwriting many style properties of text layers used by the slider. See the attachments for more informations. We highly recommend you to set the layer styles in the style attribute of the layers and not use the !important statement because it can break the responsiveness of your sliders.
Best Regards,
George | Kreatura Dev Team
Thanks George. I removed the important as advised, but the issues remains. I'm confused why these particular styles would interfere when the documentation says they are fine to use in external stylesheets (only positioning rules are supposed to be not used externally). Any other possibility?
I found another issue: you forgot to set the (initial) width and height of the slider in a style attribute of the slider element. Without specifying the initial dimensions, the slider will not know the starting size of the responsiveness.
Best Regards,
George | Kreatura Dev Team
Thanks George for your help. That fixed the problem. :)