Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Vertical lines

    General Discussion
    4
    8
    776
    Loading More Posts
    • 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
      maarschalk last edited by

      Hello,

      I want to insert vertical lines in my website to seperate projects. Something like this: https://www.cupofcouple.com/. Is it possible? For example by using HTML + CSS? I've been plaing around for some time, but can't find the perfect solution.

      Thanks!
      B.

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @maarschalk

        you can play around with this one:

        .col {
            border-left: 1px solid black;
            padding-left: 20px;
        }
        

        Or add a custom HTML element into the Gridder and give that a border.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • M
          maarschalk last edited by

          Thanks for the fast answer, Marius. I think I'm going for option 2, since it seems more easy to me and takes less knowledge of coding. Could you please give an example of the HTML element? Right now I'm using the one below. However I want to be able to adjust the height of the vertical line to the row-height (element-height) in the gridder. Is this possible?

          HTML:

          <div class="vertical-line"></div>

          CSS:

          .vertical-line {
          position:absolute;
          left:50%;
          Height: 100vw;
          border-left: 0.05vw solid #808080;
          }

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Dear @maarschalk
            looking at your coce I recommend you to go for option number 1.
            That will be easier.

            I just tried to use the second option and it turned out it is not really working well.

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • M
              maarschalk last edited by

              @mariusjopen said in Vertical lines:

              .col {
              border-left: 1px solid black;
              padding-left: 20px;
              }

              Hi Marius,

              Okay thanks :-) However I have one more question: when I add the code like this, a border appears at the left side of every project thumbnail, as intended of course. Still, I need the one on the outside left to disappear (see photo below)

              And one more thing: it seems like the borders are pushing the other content to one side. Could this be fixed as well?

              0_1533625621456_2018-08-07.jpg

              thanks a lot for your help :-)

              Best,
              Bart

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @maarschalk

                ah. This is a classic situation :-)

                Can you send me a link?

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • wardh
                  wardh last edited by

                  I'm having a similar problem. What was the solution?

                  1 Reply Last reply Reply Quote 0
                  • Richard
                    Richard Global Moderator last edited by Richard

                    Dear @wardh

                    Likely the solution was just to specify the exact col to target with CSS so instead of all col (columns) targeted just the center. Or something like all first children of the parent row are not targeted (therefore all left-side elements are not targeted ) 🌝


                    Best wishes and a happy 2022
                    Richard
                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post

                    Before you post

                    Use the Search Feature. Maybe there is already a solution to your issue.

                    1. Update Lay Theme and all Lay Theme Addons
                    2. Disable all Plugins
                    3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                    4. Now see if your problem solved itself
                    5. Go here, see if your problem is listed here:
                    Troubleshooting

                    When you post:
                    1. Post a link to where the problem is
                    2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                    Thanks!

                    Online Users

                    Recent Topics

                    • T

                      OpenType Feature

                    • T

                      Split Screen just on front page / subpages without the split?

                    • T

                      problem when I click on the category filter buttons on mobile

                    • G

                      z index has different behaviors on different pages

                    laytheme.com