Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. sit carousel captions at bottom of page

sit carousel captions at bottom of page

Scheduled Pinned Locked Moved General Discussion
13 Posts 2 Posters 301 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • arminunruhA Offline
    arminunruhA Offline
    arminunruh
    Global Moderator
    wrote on last edited by
    #2

    damn just a month ago we had someone who we did this exact thing for and now i cant find the emails/website/forum topic anymore to just copy and paste the solution here.

    I've tried using some css previously suggested but it doesn't work.

    which forum post are you refering to? maybe it can lead me to what im trying to find

    i would say

    .lay-carousel-sink .single-caption-inner a.laybutton{
    display:inline-block;
    }

    but then doesn't totally align with the numbers.

    and then in lay options → carousel addon, adapt the "Space Top" value for "numbers"

    A 1 Reply Last reply
    0
    • arminunruhA arminunruh

      damn just a month ago we had someone who we did this exact thing for and now i cant find the emails/website/forum topic anymore to just copy and paste the solution here.

      I've tried using some css previously suggested but it doesn't work.

      which forum post are you refering to? maybe it can lead me to what im trying to find

      i would say

      .lay-carousel-sink .single-caption-inner a.laybutton{
      display:inline-block;
      }

      but then doesn't totally align with the numbers.

      and then in lay options → carousel addon, adapt the "Space Top" value for "numbers"

      A Offline
      A Offline
      alasdair17
      wrote on last edited by
      #3

      @arminunruh thanks man, I did some digging:

      http://laythemeforum.com:4567/topic/9263/carousel-caption-for-next-slide-showing-on-previous-slide?_=1695230053999

      I tried the code from this thread but it just pushed the captions up a little and closer to the image.

      http://laythemeforum.com:4567/topic/6421/carousel-caption-sticky-bottom-responsive?_=1695233450478

      This code pushes the captions wider and slightly higher.

      Haha not sure why it's not working but some guidance would be great Armin.

      1 Reply Last reply
      0
      • arminunruhA Offline
        arminunruhA Offline
        arminunruh
        Global Moderator
        wrote on last edited by
        #4

        hey there, i was trying things out yesterday, i haven't gotten it to work yet

        1 Reply Last reply
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by
          #5

          ok i found the reason why it doesn't work

          i used
          .col {
          will-change: transform, opacity;
          }

          in lay theme's css to improve some animation performance, but this leads to position fixed not working

          i'll release an update now

          1 Reply Last reply
          0
          • arminunruhA Offline
            arminunruhA Offline
            arminunruh
            Global Moderator
            wrote on last edited by
            #6

            and then use this css

            .lay-carousel-sink-parent {
                position: fixed;
                bottom: 2px;
                left: 2px;
                overflow: hidden;
            }
            .lay-captions-inner{
                overflow: hidden;
            }
            
            A 1 Reply Last reply
            0
            • arminunruhA arminunruh

              and then use this css

              .lay-carousel-sink-parent {
                  position: fixed;
                  bottom: 2px;
                  left: 2px;
                  overflow: hidden;
              }
              .lay-captions-inner{
                  overflow: hidden;
              }
              
              A Offline
              A Offline
              alasdair17
              wrote on last edited by
              #7

              @arminunruh thanks, it's so close! they are sitting nicely at the bottom now but the button is now duplicated on the right hand side which hides the slide numbers?

              1 Reply Last reply
              0
              • arminunruhA Offline
                arminunruhA Offline
                arminunruh
                Global Moderator
                wrote on last edited by arminunruh
                #8
                .lay-carousel-sink-parent {
                    position: fixed;
                    bottom: 2px;
                    left: 2px;
                right: 2px;
                    
                }
                .lay-captions-inner{
                    
                }
                .single-caption{
                overflow: hidden;
                }
                

                might work like this!

                A 1 Reply Last reply
                0
                • arminunruhA arminunruh
                  .lay-carousel-sink-parent {
                      position: fixed;
                      bottom: 2px;
                      left: 2px;
                  right: 2px;
                      
                  }
                  .lay-captions-inner{
                      
                  }
                  .single-caption{
                  overflow: hidden;
                  }
                  

                  might work like this!

                  A Offline
                  A Offline
                  alasdair17
                  wrote on last edited by
                  #9

                  @arminunruh thanks armin but still the same!

                  1 Reply Last reply
                  0
                  • arminunruhA Offline
                    arminunruhA Offline
                    arminunruh
                    Global Moderator
                    wrote on last edited by
                    #10

                    ok mmh

                    can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

                    A 1 Reply Last reply
                    0
                    • arminunruhA arminunruh

                      ok mmh

                      can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

                      A Offline
                      A Offline
                      alasdair17
                      wrote on last edited by
                      #11

                      @arminunruh Thanks Armin. Email sent.

                      1 Reply Last reply
                      0
                      • arminunruhA Offline
                        arminunruhA Offline
                        arminunruh
                        Global Moderator
                        wrote on last edited by
                        #12

                        alright so it works if you set the left and right frame of the page that the carousel is in to the same values as

                        left: x: , right:X ;

                        i set it to 20px here

                        Screenshot 2023-09-30 at 11.47.16.png

                        and
                        here:

                        .lay-carousel-sink-parent {
                            position: fixed;
                            bottom: 2px;
                            left: 20px;
                            right: 20px;
                            
                        }
                        .lay-captions-inner{
                            
                        }
                        .single-caption{
                        overflow: hidden;
                        }
                        
                        A 1 Reply Last reply
                        0
                        • arminunruhA arminunruh

                          alright so it works if you set the left and right frame of the page that the carousel is in to the same values as

                          left: x: , right:X ;

                          i set it to 20px here

                          Screenshot 2023-09-30 at 11.47.16.png

                          and
                          here:

                          .lay-carousel-sink-parent {
                              position: fixed;
                              bottom: 2px;
                              left: 20px;
                              right: 20px;
                              
                          }
                          .lay-captions-inner{
                              
                          }
                          .single-caption{
                          overflow: hidden;
                          }
                          
                          A Offline
                          A Offline
                          alasdair17
                          wrote on last edited by
                          #13

                          @arminunruh thanks Armin, really appreciate it!

                          1 Reply Last reply
                          1
                          • arminunruhA arminunruh referenced this topic on
                          Reply
                          • Reply as topic
                          Log in to reply
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes


                          I also code custom websites or custom Lay features.
                          šŸ’æ Email me here: šŸ’æ
                          info@laytheme.com

                          Before you post:
                          1. When using a WordPress Cache plugin, disable it or clear your cache.
                          2. Update Lay Theme and all Lay Theme Addons
                          3. Disable all Plugins
                          4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                          This often solves issues you might run into

                          When you post:
                          1. Post a link to where the problem is
                          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                          Online Users
                          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                          laytheme.com
                          • Login

                          • Don't have an account? Register

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Search