Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 9, 2020 at 4:35 pm #1229212
    SphereEvenements

    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

    July 10, 2020 at 6:53 pm #1229467
    SphereEvenements

    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

    July 11, 2020 at 4:05 am #1229510
    Rikard

    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

    July 11, 2020 at 7:59 pm #1229701
    SphereEvenements

    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

    July 13, 2020 at 1:01 pm #1229935
    SphereEvenements

    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

    July 13, 2020 at 1:04 pm #1229936
    SphereEvenements

    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

    July 15, 2020 at 12:14 pm #1230573
    Ismael

    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

    July 15, 2020 at 12:30 pm #1230580
    SphereEvenements

    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

    July 17, 2020 at 7:49 am #1231123
    Ismael

    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

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.