The problem is caused by the custom CSS you are applying. You shouldn't apply these stylings with CSS, and more importantly shouldn't apply !important statement on them as it will overwrite the default values calculated by the slider.
The text position is incorrect because the text size and some other styling settings are being overwritten so the slider cannot adapt/position them properly, as you're forcing these fixed values.
Please use the plugin's built-in options for styling instead.
Please try to set the layer to 100% width and use text align->center. This should solve the problem you are experiencing.
As I can see from the export, you are still using custom CSS. The plugin offers the same stylings with its dedicated options. It is highly recommended to use those instead of CSS, to avoid any problems.
Dear Sirs,
I am looking for since 4 hours but no way to align the text from the slider on mobile device.
Everything is ok for desktop configuration : the text is centered.
For mobile device the text goes to the right, here are my parameters :
Here is the page concerned : http://00000.fr/services-particuliers/
In Layerslider :
Layout Sizing and Position : Top50% Left50%
Right : 0px Left : 0px
Html for mobile phone : <h1>Nos Services aux Particuliers</h1>
In my css :
@media only screen and (max-width: 480px) {
h1 {
font-size: 16px!important;
color:#ffffff!important;
font-family:roboto!important;
font-weight:700px!important;
letter-spacing:1px!important;
align-content:center!important;
text-align:center!important;
text-shadow: black 0.1em 0.1em 0.2em!important;
background-color: rgba(255, 255, 255, 0.2)!important;
padding-bottom: 1%!important;
padding-top: 0.5%!important;
padding-left: 1%!important;
padding-right: 101%!important;
}
}
Can you indicate me the way to find how to center the Text : "Nos services aux particuliers" in the middle of the slide?
Thanks and best regards,
EMMANUEL
Hey Emmanuel,
The problem is caused by the custom CSS you are applying. You shouldn't apply these stylings with CSS, and more importantly shouldn't apply !important statement on them as it will overwrite the default values calculated by the slider.
The text position is incorrect because the text size and some other styling settings are being overwritten so the slider cannot adapt/position them properly, as you're forcing these fixed values.
Please use the plugin's built-in options for styling instead.
Hi Attila,
Many thanks for your reply. Ok I follow your advice, and it works!
However I have still a problem when I indicate 25px in the filed "Min. mobile font size" the text is not centered.
Here is the page : http://00000.fr/recuperation-metaux/
Please find herewith the export file.
Best regards,
Emmanuel
Please try to set the layer to 100% width and use text align->center. This should solve the problem you are experiencing.
As I can see from the export, you are still using custom CSS. The plugin offers the same stylings with its dedicated options. It is highly recommended to use those instead of CSS, to avoid any problems.