Lay Theme Forum

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

    100% height column (not row)

    General Discussion
    2
    6
    557
    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.
    • S
      s.alc last edited by

      Hi Forum,

      I'm working on a website on which I want to assign a background color to a selected number of columns, and have that color follow the height of the row. To illustrate what I've got right now i've added 2 screenshots.

      0_1526383824186_Screen Shot 2018-05-14 at 17.27.28.png
      0_1526383494084_Screen Shot 2018-05-14 at 17.28.31.png

      So what i've done is inserted a Stack element and gave this a custom css class called 'columns-turqoise'. Adding 'height: 100%;' doesn't do the job. I have tried 'height: 100vh;'. That works for the yellow part because I want that row to be full height, but for another part below, where I want the selected columns to be green, '100vh' is too much because I want the green part to take on the height of a text column that sits next to it.

      Also, i want the content of the stack element still be aligning vertically 'middle' (the logo on the turquoise columns).

      What css code can I use to make this happen?

      Thanks a lot!
      Cheers

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

        Dear @Hantverk

        Add this to your inner STACK ELEMENT:

        .YOUR_STACK_CONTAINER .column-wrap {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
        

        Better to use the VH instead of %.

        I hope I could help!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • S
          s.alc last edited by s.alc

          Dear Marius,

          Thank you for your help. This helps me to vertically center content when using '100vh'.

          But this only partly solves my problem. How do I make sure the Stack element follows the height of the row, without using the full viewport?

          0_1526475956112_Screen Shot 2018-05-16 at 15.03.22.png

          Thanks!
          Cheers

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

            Dear @Hantverk
            it is not possible to stretch the STACK element to the 100% heigh to the parent box..

            Can you show on a sketch how you want the final result to look like?

            Thank you!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • S
              s.alc last edited by

              Thank you Marius,

              I've retro-fitted the element by giving the full row a background color and giving the stack element that contains the text a custom class with a white background. So now the colored background always stretches because it is covered by a white background where the text sits.

              Cheers!

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

                Dear @Hantverk
                ah! Perfect!
                This is a way to go in your case.

                Thank you for letting us know.

                Best!

                Marius

                www.mariusjopen.world

                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

                K
                A
                F
                G

                Recent Topics

                • K

                  Unable to update lay theme / to login wp admin

                • A

                  New button feature not available

                • A

                  Theme crashed - because of Polylang?

                • A

                  fullscreen slider: slow load time + mobile: images dropping to bottom

                laytheme.com