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. Adding color to a row gutter / adding a title to a carousel

Adding color to a row gutter / adding a title to a carousel

Scheduled Pinned Locked Moved General Discussion
5 Posts 2 Posters 134 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.
  • M Offline
    M Offline
    Mariannep
    wrote on last edited by
    #1

    Hello,

    it's me again ! I'm working on a website and I'd like to put a carousel with a title above it and captions underneath - and this needs to be on a strip of color.

    Like this :

    Capture d’écran 2020-12-18 à 15.36.54.png

    I used a row for the title "Inspirations", and a row for the carousel, then I set the row gutter between these two rows to 0. My problem is that on the mobile version, the row gutter goes back to 5px or so, and a white strip appears between the two rows, like this :

    Capture d’écran 2020-12-18 à 15.39.55.png

    Does anyone have a hint on how to solve this problem?

    I have tried making the row for "Inspiration" white, and offsetting the word "Inspiration" tu "push it" just above the carousel, but on mobile the word appears outside of the color stripe.

    Thanks in advance!

    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by
      #2

      Dear @Mariannep

      You have set the Row Gutter % for Desktop Layout but you also need to set it for Mobile Layout as well :

      Screen Shot 2020-12-28 at 12.21.10 PM.png

      Also in "Gridder Defaults" within Lay Options you can set the Phone Layout Gutters:
      Screen Shot 2020-12-28 at 12.22.58 PM.png

      Does this help you? :)

      Best wishes
      Richard

      M 2 Replies Last reply
      0
      • RichardR Richard

        Dear @Mariannep

        You have set the Row Gutter % for Desktop Layout but you also need to set it for Mobile Layout as well :

        Screen Shot 2020-12-28 at 12.21.10 PM.png

        Also in "Gridder Defaults" within Lay Options you can set the Phone Layout Gutters:
        Screen Shot 2020-12-28 at 12.22.58 PM.png

        Does this help you? :)

        Best wishes
        Richard

        M Offline
        M Offline
        Mariannep
        wrote on last edited by
        #3
        This post is deleted!
        1 Reply Last reply
        0
        • RichardR Richard

          Dear @Mariannep

          You have set the Row Gutter % for Desktop Layout but you also need to set it for Mobile Layout as well :

          Screen Shot 2020-12-28 at 12.21.10 PM.png

          Also in "Gridder Defaults" within Lay Options you can set the Phone Layout Gutters:
          Screen Shot 2020-12-28 at 12.22.58 PM.png

          Does this help you? :)

          Best wishes
          Richard

          M Offline
          M Offline
          Mariannep
          wrote on last edited by
          #4

          @Richard-K
          I wrote a first answer then deleted it (I had not activated the custom phone layout option and didnt understand why I wasnt seeing the little phone/desktop buttons).
          So now your solution works perfectly. Thank you!!

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

            Dear @Mariannep

            Hey awesome! :)
            Best wishes and happy New year
            Thanks for using Lay Theme

            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