Hi there !
I am testing on a dummy page in my website SiteOrigin Layout Slider. It’s amazing and I would like to thanks SiteOrigin for this. I was asking months ago for this and now finally is possible to overlay menu&text on full-screen slider !! I am trying to get over of a bunch of slider plugin in order to use siteorigin plugin for most of the stuff in my website.
However I checked on a mobile and seems is not responsive.
I mean the pictures of the frames do not resize properly for the mobile screen.
I tried to see if there is any setting that I missed…
I hope to be wrong and can be fix through setting or customizing css.
The link to the test page is :
http://inasiatravel.com/photo-slider-test/
I am using 4.5.3 WP and Tesseract Theme.
Thank you in advance for any help or suggestion.
Regards.
Hi Gabriele,
Okay, so it looks like you’ve set a hard height. This is honestly not recommended as width and height are both taken into consideration to make things responsive. Would it be possible for you to send me an export for this widget? To do this open up the page with the widget and click prebuilt. Then click import / export and then click download. Please upload the export to a 3rd party file hosting site such as teknik.io.
Hi Alex.
Thank you for your support.
Actually yes, you are right: I set the hight (570px) in order to cover the screen with the whole pictures, but then in not responsive.
1:: Now, I left blank the height and on mobile is responsive but on desktop I can see the pictures in background only if there is some widgets in the “builder” inside the frame, in my case the menu and the logo (see frames 1,2,3), otherwise I can see only a lttle bit of picture (see frame 4)
2:: In order to show the pictures I add in builder something else, like Siteorigin Editor with space 420px (frame 1). In this way, again, i see full picture on desktop (of course !), but is not responsive on Mobile (of course again !). Tried to work around css adding rules for @media…. but didn’t work.
In frame 2,3 i didn’t add any space in the builder and how you can se on mobile is perfectly responsive but on desktop the picture is limited as background of the widgets in the builder.
This is the export from the widget :https://u.teknik.io/kOoJW.json
Thank you. Regards.
Hi Gabriele,
To clarify, this is happening as this widget (as well as our other slider widget) have strong focuses on content rather than layout. Now for the layout slider, this might sound odd but the sizing of each slide is dictated by the contents of the layer. This means if an image says it needs 250px of height to display, it’ll get 250px of height, unless there’s a hard cap on height which is set the design and layout setting. In which case… well, basically the image will be cut off if it exceeds said cap.
So to allow your layer to act like a hard capped layout without setting a hard cap, you’ll need to use a spacer. Please open the layout slider and add a text widget, this will be your spacer. Then open the text widget and head over to the widget styles. Open the attributes group and add mobile-hidden to the widget class. Then add your desired height (height: 500px; as an example) to the CSS styles field.
Then please navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Then add the following CSS:
@media (max-width: 768px){ .mobile-hidden { display: none; } }You might also need to install the SiteOrigin CSS Editor.
This CSS will hide whatever has had the mobile-hidden class set on mobile devices. If you feel it’s being hidden to soon please adjust the max-width (as in 768).
Hi Alex.
That totally worked !!!
I just didn’t think about adding widget class !!!!!
This also gave me a lot of help to work on other responsive “issues”
Thanks a lot !!!