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. Addons
  3. Carousel, change position of captions on mobile

Carousel, change position of captions on mobile

Scheduled Pinned Locked Moved Addons
5 Posts 2 Posters 282 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.
  • S Offline
    S Offline
    sds
    wrote on last edited by
    #1

    Hello. I've made a custom phone layout of my website with a seperate carousel from my desktop version. On desktop, the captions are positioned on the carousel.
    However, this does not look good on mobile. Is there a way to position the captions below the carousel on mobile, but keep them on the carousel on desktop?

    I've added a custom HTML class for the phone-carousel and named it "mobilecarousel" so I can target this carousel seperate from my desktop version

    1 Reply Last reply
    0
    • S Offline
      S Offline
      sds
      wrote on last edited by sds
      #2

      I've managed to move the captions out of the slide, however I can't change the numbers and paddings.

      I've made a new text format and called it _CarouselMobile because the format used for the browser carousel don't fit the mobile version very well.

      However, while the caption is now a different color and smaller text size - as needed - the numbers are still using the generel rule from Carousel settings, thus making the numbers a different color and size than the captions on phone version.

      The padding is also force using the Carousel settings even though I've tried to change it for the .mobilecarousel through custom css.

      This does nothing:

      .mobilecarousel .lay-carousel-sink-parent .numbers {
          padding-bottom: 10px!important;
          padding-right: 10px!important;
          
      }
      

      Here you can see that I can only change captions. The numbers are still white and larger, and the overall padding is too big compared to the image in the carousel. (I made a grey background so you can see, but ideally I need a white background)

      Screenshot 2022-10-18 at 11.07.07.png

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

        can u post the link please

        S 1 Reply Last reply
        0
        • arminunruhA arminunruh

          can u post the link please

          S Offline
          S Offline
          sds
          wrote on last edited by
          #4
          This post is deleted!
          1 Reply Last reply
          0
          • arminunruhA Offline
            arminunruhA Offline
            arminunruh
            Global Moderator
            wrote on last edited by arminunruh
            #5
            .single-caption{
            padding-left: 0!important;
            }
            .lay-carousel-sink {
                display: inline-block;
                margin-bottom: 0 !important;
                margin-top: 0 !important;
                position: relative;
                width: 100%;
            }
            .mobilecarousel .lay-carousel-sink-parent {
                position: absolute!important;
                top: 0!important;
                margin-top: 0px!important;
            }
            .lay-carousel-sink .numbers{
            padding-right: 0!important;
            }
            

            in lay options -> custom css for mobile

            lmk if it worked!

            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