I have a simple layer slider set up with a background image, text and a button. It looks fine on desktop view, but when it resizes for mobile, the text and button don't resize correctly. The stay within the slider itself, but they become very far away and impossible to read. For the text, I have set a "min. mobile font size" but it doesn't work correctly. Also, the layout is set to "responsive."
As you'll see on the page, I experimented with making separate layers for the text and button that are much smaller. They are set to only display on mobile. However, they also appear to be very far away on mobile views.
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.
The best approach to this would be the device specific layers, that you were already trying to use. In case the text is still too small on mobiles for you, then you need to set the mobile only layers to be even larger. The mobile layers need to be way bigger than the desktop ones, so they will still be readable when the slider is scaled down. You can use the preview window to test your layers size, by clicking on what device should be showing in the editor.
Or if you need even more control over mobile display, additionally to the device specific layers, you could also build two sliders with different sizes or with different content for desktop/mobile, include them both to the site, and only display them (using the Hide over and Hide under options) on the required device.
But I believe the first method should be enough in your case. You just need to get the sizes right for the mobile layers compared to the desktop ones.
Hello,
I have a simple layer slider set up with a background image, text and a button. It looks fine on desktop view, but when it resizes for mobile, the text and button don't resize correctly. The stay within the slider itself, but they become very far away and impossible to read. For the text, I have set a "min. mobile font size" but it doesn't work correctly. Also, the layout is set to "responsive."
As you'll see on the page, I experimented with making separate layers for the text and button that are much smaller. They are set to only display on mobile. However, they also appear to be very far away on mobile views.
Hello Nikkiwyred,
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.
The best approach to this would be the device specific layers, that you were already trying to use. In case the text is still too small on mobiles for you, then you need to set the mobile only layers to be even larger. The mobile layers need to be way bigger than the desktop ones, so they will still be readable when the slider is scaled down. You can use the preview window to test your layers size, by clicking on what device should be showing in the editor.
Or if you need even more control over mobile display, additionally to the device specific layers, you could also build two sliders with different sizes or with different content for desktop/mobile, include them both to the site, and only display them (using the Hide over and Hide under options) on the required device.
But I believe the first method should be enough in your case. You just need to get the sizes right for the mobile layers compared to the desktop ones.