Limited availability during the holidays

Another busy year is coming to its end, and an exciting year lies ahead. In order to get ready for a fresh new start, our team will spend a few days' rest during the winter holidays. Over the holiday break, we will have reduced staffing from December 20th, 2024, to January 5th, 2025, so please be patient if you do not receive a response as quickly as you normally would.

We send our warmest wishes for happiness, health, and success throughout the coming year. Thank you for your continued support, and may you have a peaceful and blessed Happy Holidays!

Okay
  Public Ticket #1246407
Divi Layerslider on mobile devices – text not centered
Closed

Comments

  • EmmanuelGaulin started the conversation

    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 



  • [deleted] replied

    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.

  • EmmanuelGaulin replied

    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





  • [deleted] replied

    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.