Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Brite
  • 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. Carousel Captions - Fixed position with different results

Carousel Captions - Fixed position with different results

Scheduled Pinned Locked Moved General Discussion
7 Posts 3 Posters 1.0k Views 2 Watching
  • 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.
  • K
    K
    kyrill
    wrote on last edited by
    #1

    Hi all,

    I'm facing a problem with carousel captions put in place by using custom CSS as described here in the forum. CSS I used is:

    .lay-carousel-sink-parent {
        position: fixed !important;
        bottom: 40px !important;
        z-index: 999 !important; }
    

    The result should look like this with the caption attached to the bottom of the page:
    https://jooskeller.com/kindergarten-heilbronn/

    In some of the projects it unfortunately looks like this:
    https://jooskeller.com/theresienturm-heilbronn/

    It seems that in the second situation the caption sits inside the carousel-container. As far as I can see the settings are completely the same so i can't trace back the problem causing the different appearance.

    Can anybody help?

    Thanks a lot!
    Kyrill

    1 Reply Last reply
    1
    • arminunruhA
      arminunruhA
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      add this css

      .column-wrap._100vh > .col.absolute-position.align-middle.type-carousel{
       top: auto!important;
       -webkit-transform: none!important;
       -ms-transform: none!important;    
       transform: none!important;    
      }
      

      nice website!

      K 1 Reply Last reply
      0
      • C
        C
        CSGGPARK
        wrote on last edited by
        #3

        Hello Kyrill,

        Great website :) Just a small question, how did you center your carousel?

        K 1 Reply Last reply
        0
        • arminunruhA arminunruh

          add this css

          .column-wrap._100vh > .col.absolute-position.align-middle.type-carousel{
           top: auto!important;
           -webkit-transform: none!important;
           -ms-transform: none!important;    
           transform: none!important;    
          }
          

          nice website!

          K
          K
          kyrill
          wrote on last edited by
          #4

          @arminunruh
          works great! thank you so much!

          1 Reply Last reply
          0
          • C CSGGPARK

            Hello Kyrill,

            Great website :) Just a small question, how did you center your carousel?

            K
            K
            kyrill
            wrote on last edited by
            #5

            @CSGGPARK

            right click on row with carousel and set "use browser height for row height",

            Bildschirmfoto 2022-09-14 um 16.53.57.png

            then you can use the vertical-align-buttons to move the carousel in the middle,

            Bildschirmfoto 2022-09-14 um 16.54.23.png

            and i put a fixed height for the height of the carousel

            Bildschirmfoto 2022-09-14 um 16.59.02.png

            Hope this helps!
            Kyrill

            C 1 Reply Last reply
            1
            • K kyrill

              @CSGGPARK

              right click on row with carousel and set "use browser height for row height",

              Bildschirmfoto 2022-09-14 um 16.53.57.png

              then you can use the vertical-align-buttons to move the carousel in the middle,

              Bildschirmfoto 2022-09-14 um 16.54.23.png

              and i put a fixed height for the height of the carousel

              Bildschirmfoto 2022-09-14 um 16.59.02.png

              Hope this helps!
              Kyrill

              C
              C
              CSGGPARK
              wrote on last edited by
              #6

              @kyrill Thank you! I did not know of "use browser height for row height" :)

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

                updated solution:

                http://laythemeforum.com/topic/10172/changing-the-position-of-numbers-and-title-of-carousel/4

                1 Reply Last reply
                0

                Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                With your input, this post could be even better 💗

                Register Login
                Reply
                • Reply as topic
                Log in to reply
                • Oldest to Newest
                • Newest to Oldest
                • Most Votes


                Online Users
                A
                Anna_S
                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