I have created a layerslider for the home page of my website. I am happy with the way it looks and functions, but I think it looks horrible in the portrait view on all iphones. It is the correct size horizontally, but it isn;t correct vertically. I have attatched a picture of portrait mode.
I have tried to research how to correct the issue. I have messed with the full width, responsive, full size modes and have not found a solution to the problem. After more research I saw on a support thread that I can create two layer sliders...one for mobile view and one for desktop view. I saw that some people used the "hide under" and "hide over" setting under the mobile tab, but they didn't go into enough detail about what to do with those settings. I also saw where some people used coding to get the two to show up in the correct places, but I am unfamiliar with coding and could use as much detailed help as possible. If there is an easier solution than creating two seperate layer sliders, I am up for any suggestion. I just need th elayer slider to be a lot bigger because it is the main focus of my home page. I can send username/ password info if that will help.
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
I believe the best approach for your case is the method you mentioned. Creating two separate sliders for mobile and desktop view.
Setting it up is pretty simple. Build both sliders, include them to the page, and apply the proper Hide Under and Hide Over values on them. You have to decide on a breakpoint where they swap out, for example 760px. In that case you would need to set Hide Under 761px for the desktop slider and Hide Over 760px for the mobile slider.
Thanks! I got it to work correctly. It is the size I want on mobile view. I just have one more problem. When I go to edit the mobile slider, I cannot see everything in the preview area where I am building the slides. I have looked at the settings on trying to make the preview area bigger with no solution. I have added a picture of my laptop screen to show you all I can see to edit the slide and a screenshot of what the slide looks like on my phone because I can’t see the whole slide to edit it.
Please note that you can see the whole slider in the editor. It is always the whole slider that is showing on the back-end and on the front-end too. The two are identical as well ("what you see is what you get" editor).
What you see is that the layer is reaching out of the slider. It's possible to position layers fully or partially outside of the slider's canvas. So basically, you see the whole slider, just positioned part of that layer outside of it.
thank you so mich for all your help so far! One more question and I believe I will be good to go. There is some padding on my layerslider (I think?) and I have no clue where it is coming from?There is no padding problem on the desktop site header. Just on the mobile view. How can I fix this? A pic is attached. Thanks!
The red line is a square that I Have on the desktop with text in it. It isn’t as wide as I’d like on mobile but I don’t know how to fix that hahaha. I am talking about the empty space between the header and the LayerSldier.
I see. That gap seems to be generated by the page builder (wpbakery/visual composer). The slider itself does not have padding on it or generates gaps. But the builder's parent element/row/block where it's inserted seems to be overflowing. Taking up more space than the actual slider, generating that white gap. I'd recommend to check on the page builder element or try to use a different one.
Hello,
I have created a layerslider for the home page of my website. I am happy with the way it looks and functions, but I think it looks horrible in the portrait view on all iphones. It is the correct size horizontally, but it isn;t correct vertically. I have attatched a picture of portrait mode.
I have tried to research how to correct the issue. I have messed with the full width, responsive, full size modes and have not found a solution to the problem. After more research I saw on a support thread that I can create two layer sliders...one for mobile view and one for desktop view. I saw that some people used the "hide under" and "hide over" setting under the mobile tab, but they didn't go into enough detail about what to do with those settings. I also saw where some people used coding to get the two to show up in the correct places, but I am unfamiliar with coding and could use as much detailed help as possible. If there is an easier solution than creating two seperate layer sliders, I am up for any suggestion. I just need th elayer slider to be a lot bigger because it is the main focus of my home page. I can send username/ password info if that will help.
Thanks,
Selica James
Hello Selica James,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
I believe the best approach for your case is the method you mentioned. Creating two separate sliders for mobile and desktop view.
Setting it up is pretty simple. Build both sliders, include them to the page, and apply the proper Hide Under and Hide Over values on them. You have to decide on a breakpoint where they swap out, for example 760px. In that case you would need to set Hide Under 761px for the desktop slider and Hide Over 760px for the mobile slider.
Thanks! I got it to work correctly. It is the size I want on mobile view. I just have one more problem. When I go to edit the mobile slider, I cannot see everything in the preview area where I am building the slides. I have looked at the settings on trying to make the preview area bigger with no solution. I have added a picture of my laptop screen to show you all I can see to edit the slide and a screenshot of what the slide looks like on my phone because I can’t see the whole slide to edit it.
Thank you for the feedback.
Please note that you can see the whole slider in the editor. It is always the whole slider that is showing on the back-end and on the front-end too. The two are identical as well ("what you see is what you get" editor).
What you see is that the layer is reaching out of the slider. It's possible to position layers fully or partially outside of the slider's canvas. So basically, you see the whole slider, just positioned part of that layer outside of it.
thank you so mich for all your help so far! One more question and I believe I will be good to go. There is some padding on my layerslider (I think?) and I have no clue where it is coming from?There is no padding problem on the desktop site header. Just on the mobile view. How can I fix this? A pic is attached. Thanks!
I've checked your site on multiple mobiles, using both Android and iOS devices, but I didn't see that red line on any of them.
Have you managed to fix the problem in the meantime ?
In case not, could you please specify on what OS/browser/device are you experiencing this exactly ?
The red line is a square that I Have on the desktop with text in it. It isn’t as wide as I’d like on mobile but I don’t know how to fix that hahaha. I am talking about the empty space between the header and the LayerSldier.
I see. That gap seems to be generated by the page builder (wpbakery/visual composer). The slider itself does not have padding on it or generates gaps. But the builder's parent element/row/block where it's inserted seems to be overflowing. Taking up more space than the actual slider, generating that white gap. I'd recommend to check on the page builder element or try to use a different one.