-
Posts
-
Hi, I’m building a layerslider and need to adjust the text for mobile. I’d like to not show the subtitle – only title and buttons. Then increase the size of the text on title/buttons.
I’ve set the slider up to be responsive, not full width with a container of 1500. The slider itself is 1500×450.
I would also like to add a top border for the layerslider on mobile only similar to the code you gave me for colour sections which was @media only screen and (max-width: 769px) {
#coloursection {
border-top: 2px solid black!important;
}}Hi!
Please add following code to Quick CSS
@media only screen and (max-width: 767px) { h2.ls-l { font-size: 16px !important; } .avia-layerslider { border-top: 2px solid black!important; margin-top: 3px; }}Cheers!
Yigitthank you i have done that and the H2 is bigger but I think the text needs some padding as it is almost overflowing the box. Also, how to get rid of the subtitle as that is very tiny and how to make the 2xbuttons text a bit bigger – also will need padding.
Hi!
Have you tried adjusting values under “Full-width slider settings” in Slider Settings of your slider? I believe that will solve the problem without needing custom CSS codes.
Best regards,
YigitI’ve removed the H2 code and that does look better on the text. Can you suggest some setting options please for layerslider, I’ve tried a few and still having issues.
In particular, the 2 slides with text to the right of the image aren’t working well the text is off the screen on mobile and pushes off the screen when I narrow the desktop pane. Some of the image is cropping off as well on smartphone/narrowed panes.
I have made further adjustments and the text is a bit better, but would welcome further advice.
Also, the border at the top of layerslider isn’t working any more although it did work yesterday and I can’t work out what’s changed.
I also added code to make the navigation buttons not appear on mobile and it isn’t working, so the navigation buttons obscure the content on the layerslider when in mobile view.
Hey!
You are using an old version of the theme, so please upgrade to Enfold 3.5.3 and let us know if you still need help afterwards.
If you still need help then send us a mockup showing the results you want to achieve, otherwise it will be very difficult for us to imagine what you need. Send us admin access to here as private reply.
Best regards,
AndyHi, I was on enfold 3.5.1 – only updated it last week – but now I’ve upgraded to 3.5.3 and am still having issues. What I’m trying to achieve is for MOBILE ONLY:
1. navigation buttons NOT to appear on hover (as they get in the way of messages/coloured buttons)
2. border to appear at the top of the layerslider – as it does at the top of colour section on the same pageHi!
Thank you for the info.
1.) Use this to hide the layer slider navigation:
@media only screen and (max-width: 767px) { #top .avia-layerslider .ls-nav-prev, #top .avia-layerslider .ls-nav-next { display: none !important; } }2.) And use this for the border:
.home #layer_slider_1 { border-top: 2px solid #45273E!important; }Best regards,
IsmaelThank you – the navigation buttons disappear perfectly.
I now have a border on as well but it appeared even on desktop and I wanted it to only appear when the navigation disappears. I have added in a bit for @media only screen and (max-width: 989px) and it’s all working now.
Thanks so much for your help.
- The topic ‘Layer slider for mobile’ is closed to new replies.