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. Bug Reports
  3. Issue with positioning text columns in footer

Issue with positioning text columns in footer

Scheduled Pinned Locked Moved Bug Reports
3 Posts 2 Posters 37 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
    MWPA
    wrote on Apr 4, 2025, 9:28 AM last edited by
    #1

    Hi,

    I'm trying to position multiple text columns at 50% of the row height in my footer. I assigned a class called footerText to the text elements and applied the following custom CSS:

    .footerText {
        margin-top: 50%;  /* Position the text at 50% of the div's height */
    }
    

    However, I'm encountering several issues:

    • The code works when a text box spans 2 columns in my grid. But if I make the text box 4 columns wide, the text jumps to the bottom. See the screenshots below.
    • Additionally, when I set the row a Custom Row Height to 50vh, all my text columns disappear. See the screenshot.

    Does anyone know what might be causing this behavior and how I can fix it?

    Thanks in advance!

    Link:
    https://dev.vandersalm-architecten.nl/

    Screenshots
    Scherm­afbeelding 2025-04-04 om 11.17.01.png
    Scherm­afbeelding 2025-04-04 om 11.17.57.png
    Scherm­afbeelding 2025-04-04 om 11.16.51.png
    Scherm­afbeelding 2025-04-04 om 11.16.09.png

    Footer when set Custom Row Height:
    Scherm­afbeelding 2025-04-04 om 11.27.22.png

    1 Reply Last reply
    0
    • A Offline
      A Offline
      arminunruh
      Global Moderator
      wrote on Apr 9, 2025, 5:52 PM last edited by
      #2

      how about you dont use custom css for this,
      but do this:

      right click every column in your footer in the gridder.
      choose "set spaces". then set a top space. when you click on the px it changes to %

      Screenshot 2025-04-09 at 19.50.32.png

      Additionally, when I set the row a Custom Row Height to 50vh, all my text columns disappear. See the screenshot.

      could be an incompatibility with your custom css

      rows that have a custom row height or that have a browser row height:
      almost all elements inside them are position absolute. this way they can then overlap:
      https://laytheme.com/documentation/gridder-elements.html#elements-above-other-elements

      maybe that different way of how i implemented positioning for this collides with your custom css

      1 Reply Last reply
      0
      • M Offline
        M Offline
        MWPA
        wrote 29 days ago last edited by
        #3

        Thanks, Armin. That did the trick!

        1 Reply Last reply
        0
        Reply
        • Reply as topic
        Log in to reply
        • Oldest to Newest
        • Newest to Oldest
        • Most Votes

        2/3

        Apr 9, 2025, 5:52 PM


        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
        L
        leili
        2 minutes ago
        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.
        2 out of 3
        • First post
          2/3
          Last post
        0
        • Recent
        • Tags
        • Popular
        • Users
        • Search