-
Posts
-
Soliloquy carousel not responding to changing screen size.
Should it?Hello Terence,
Soliloquy should be responsive. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.
This reply has been marked as private.Hi Terence,
I have check the slider in the homepage and it is responsive. It’s just that there is no space on the sides of it that might make it look cut off. To add some space on the side, please add this in the CSS code:
.soliloquy-outer-container { padding: 0 15px; }Hope this helps.
Hi,
That didn’t change anything. It’s still not responsive when I look at it with different window sizes.
See the screenshot of an iPad size screen (1024 x 672) overlaid on a screensize 2133 x 1200.
The slider is exactly the same size in both.
At no time has it ever looked cut off.Tried padding: o 45px; instead but that didn’t help either.
Hi There,
Soliloquy slider is responsive in nature (unless you define a width for it) it will take-up whatever the width of its container. I see that you added most of the slider (if not all) as a shortcode inside a text element? Would you mind adding those sliders as Soliloquy element and Revolution Slider element?
On a side note; please update the X|Theme and Cornerstone to the latest version, to make sure that this is not a compatibility issue.
Updating Your Theme and Plugins
Hope it helps, Cheers!
Hi,
Addressing your comments in reverse order,
Cornerstone updated – I was only a day or two behind 🙂
I thought I’d read somewhere that sliders should be added the way I had done it but I’ve corrected this now.The soliloquy slider has various size settings in config. and a default ‘full width’. All of them set the width one way or another so whatever I choose does not affect the responsiveness, ie it’s still not responsive.
Can you be more specific? What setting must I use for the slider to be responsive?
The visible slide never varies in size and the height is all the time 300px which is what I want the maximum to be.
When you go down from a large widescreen though I need the slider to reduce the slide to less than 300px proportionally.Hi there,
Another support here, I think it depends of how you expect the outcome of responsiveness. There were responsive that breaks down, like stacking of structure (eg. 3 columns to 1 column). And responsive that scales down, like 600px becomes 200px on smaller screen. Or responsive that changes position and visibility.
And as by checking your slider, it’s scaling down your content including texts, and that too is considered responsive. It’s not responsive if the text and image remain on same size.
I think it’s best if you can provide some mockup of what you expect on mobile, maybe we can recommend something other than scaling the content.
If you’re on rev. slider, you can apply custom grid size for each target device, but you’ll have to recompose content to represent each grid (see the video below). Rev. slider has no ability to predict the viewers expected result for specific device.
For example, the layer one is on left side for desktop, if you view it on mobile then it will stay on left side but just scaled down. Unless you will add new layer(duplicate of layer one) and position it at the bottom while hiding layer one for mobile. It’s more on visibility setting and duplicating content while positioning them.
Please use firefox when playing the video.
Hope this helps.
Update : Rev. Slider automatically create duplicates of layers when you switch to different device viewport. All you need to do is apply styling, positioning, or visibility for each layer.
Hi Support.
Thank you for the detailed explanation.
There are two sliders on the info section.
The Rev slider is scaling everything, pictures and text, properly but the soliloquy slider above it is not scaling at all.
I need those slider pictures to scale down or else they conflict with the rev slider content.
I had tried using the rev slider for the ‘slideshow’ bit but that appears to scale up the images from 300px to just over that and it results in an unsharp picture. So that I rejected although it does scale down correctly.Your suggestion of hiding content would work but it would mean I’d need to make perhaps 3 different size ‘slideshow’ soliloquy sliders and hopefully I can avoid that.
My large wide design size is 2133px by 1200px so scaling down to eg ipad size at 1024 x 672 is nearly halving the vertical size to 168px.
I’ve seen references to soliloquy not scaling if the width is set but I cannot see how to avoid this in any of the default or preset sizes. I’m fairly convinced that this is the cause of soliloquy not scaling but I just don’t know what I’ve set wrong or how to correct it.
The mock up included will show you what I’m trying to achieve and hopefully you will be able to solve this without resorting to separate slideshows and hiding elements.The other changes I made on your suggestions did rather mess things up and that is not fully corrected yet but the section in question is ok.
Your video works fine btw in safari.
I managed to get a rev slideshow sharp by careful adjustment of pixel sizes and that scales nicely so problem is solved. Well unless you want to use a soliloquy instead…
Thanks for the help.Hi there Terence,
I’ve taken a look at your site and I’m not able to replicate the overlap like on your screenshots, it appears to respond correctly to me, have you tried on the actual devices themselves?
As responsiveness can look different between re-sizing a browser window and checking it on a actual device.
Also do you have the specific browser version you’ve been trying to check the responsiveness on?
Thank you!
Hi,
It rather depends when you looked 🙂
I have been working for some time and it’s almost right now, just a little problematic under ipad size.
I had tested before and came to the conclusion that I could use resizing of browser window as it seemed to correspond to the actual devices.
I’d also checked with Firefox and Safari previously and saw no difference there so settled on safari.
However, this might not always be the case so I will do the checks more thoroughly.Thanks.
Hi Terence,
There are some elements that are styled differently depending on the device. For example, background videos may work on desktop when resizing the browser window but won’t work on actual devices like iPad or iPhone because we are disabling them specifically on touch enabled devices. So it’s good to test on actual device too if you have access to it. Alternatively, you could also try Google Developers Tools Device Mode as it shows a page very similar to an actual device. You can find more information on it here: https://developer.chrome.com/devtools/docs/device-mode
Thank you!
Many thanks for the extra information, I’ll check it out.
RegardsLet us know how it goes.
Cheers!
