Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1229212

    Hi enfold team !
    On this layer slider : https://www.sphere-evenements.com/autres-receptions-privees/, I would like to center the slide H1 title “Organisation conférence” when it is seen on smartphone.
    So I want to target this in the CSS.
    I have found the way to enlarge this title but apparently it’s not the same target to change position…
    Please, can you help me ?
    Thanks,
    Franck

    #1229467

    In fact, I would like to move the h1 title at 33% left on smartphone. So, I’ve tested this CSS :

    h1.ls-layer {
    left : 33% !important;
    }

    But it doesn’t work. It seems that I have to target the ls-wrapper before but I didn’t find how to adjust this wrapper only for this h1… (I don’t want to move all the wrappers at 33% left)

    Can you help me please ?

    Regards,
    Franck

    #1229510

    Hi Franck,

    I looks tricky to target that header unfortunately, maybe you could duplicate the slider, then design it as you would like for mobile. Then we can give you CSS to show/hide the correct one for mobile/desktop?

    Best regards,
    Rikard

    #1229701

    Hi Rikard,

    I don’t want to create a new layer or slider because of a SEO need. In fact, even if the h1 mobile slider (or h1 mobile layer) is hidden, when Google crawls my site, it discover two h1. In the source code it shows the 2 sliders… (or layers). You know what I mean ? :)

    For anybody who wants to have only one h1 crawled, it seems that I’ve find a solution by playing with CSS and margin. In order to move my h1 header only on smartphone, I’ve named my layer h1conf (for exemple) in the “link and attribute”. Then, in quick CSS of Enfold, I’ve added :

    @media only screen and (max-width: 767px) {
    .h1conf {
    margin-left: -95px !important;
    font-size: 42px !important;
    }}

    (I’ve taken the opportunity to enlarge my font-size :))

    Franck

    #1229935

    Hello,
    Finally, it’s not a really beautiful solution…
    I really want to target the wrapper and make it move to 33% left on smartphone…
    Franck

    #1229936

    Moreover is there a way to target a layer slider with its ID in CSS and how can I do it please ?
    Thank you,
    Franck

    #1230573

    Hi,

    Glad that you’ve found a solution.

    If you want to target the main container of the layer slider, the theme automatically applies a unique ID to it. This is the markup of the layer slider container.

    
    <div id="layer_slider_1" class="avia-layerslider main_color avia-shadow  avia-builder-el-0  el_before_av_section  avia-builder-el-first  container_wrap fullsize ls-direction-fix ls-overflow-visible" style="height: auto;"></div>
    

    The ID is #layer_slider_1.

    If you want to target a slider on a specific page, just prepend the page ID selector like so:

    .page-id-22 #layer_slider_1 {
       /* style here */
    }

    .. where 22 is the page ID.

    Best regards,
    Ismael

    #1230580

    As I say, I’ve not found the solution because I would like to move my texte and H1 left 33% on smartphone. To do that, I have to target the wrapper of the H1 not the H1 itself. I haven’t find the solution to do it…

    Thanks for the CSS code and ID of the layerslider.

    Best regards,
    Franck

    #1231123

    Hi,

    Did you try the css code that we suggested above? You can use it to move the whole slider. You can also apply a unique class or ID attribute to the H1 layer directly from the layer slider panel and use it to adjust its position.

    Best regards,
    Ismael

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.