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. Carousel Captions - Fixed position with different results

Carousel Captions - Fixed position with different results

Scheduled Pinned Locked Moved General Discussion
7 Posts 3 Posters 403 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.
  • K Offline
    K Offline
    kyrill
    wrote on Sep 9, 2022, 8:25 AM 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
    • A Offline
      A Offline
      arminunruh
      Global Moderator
      wrote on Sep 13, 2022, 5:28 PM 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 Sep 14, 2022, 2:51 PM
      0
      • C Offline
        C Offline
        CSGGPARK
        wrote on Sep 14, 2022, 7:48 AM last edited by
        #3

        Hello Kyrill,

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

        K 1 Reply Last reply Sep 14, 2022, 3:01 PM
        0
        • A arminunruh
          Sep 13, 2022, 5:28 PM

          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 Offline
          K Offline
          kyrill
          wrote on Sep 14, 2022, 2:51 PM last edited by
          #4

          @arminunruh
          works great! thank you so much!

          1 Reply Last reply
          0
          • C CSGGPARK
            Sep 14, 2022, 7:48 AM

            Hello Kyrill,

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

            K Offline
            K Offline
            kyrill
            wrote on Sep 14, 2022, 3:01 PM 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 Sep 15, 2022, 9:07 AM
            1
            • K kyrill
              Sep 14, 2022, 3:01 PM

              @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 Offline
              C Offline
              CSGGPARK
              wrote on Sep 15, 2022, 9:07 AM last edited by
              #6

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

              1 Reply Last reply
              0
              • A Offline
                A Offline
                arminunruh
                Global Moderator
                wrote on Jul 2, 2024, 9:30 AM last edited by
                #7

                updated solution:

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

                1 Reply Last reply
                0
                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