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. Ignore the image for row’s height

Ignore the image for row’s height

Scheduled Pinned Locked Moved General Discussion
7 Posts 3 Posters 220 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.
  • dmncnD Offline
    dmncnD Offline
    dmncn
    wrote on last edited by
    #1

    Hi, I will try to explain what I’m looking for with the help of this image.

    Schermata 2021-01-04 alle 16.13.52 2.png

    What I need to do is to ignore the height of the image element, so that the height of the row is based on the height of the tallest text block.

    Hope that this could be obtained with some trick.

    Thanks in advance

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

      Dear @dmncn

      Thanks for the example image this really helps :)

      The image height is defined by its container row, so we would need to force it, which could be achieved in a few ways.
      ( maybe i am overthinking this but... )

      Firstly we should give it a custom ID or Class to target it with CSS better - we can right click on an Image Element:
      Screen Shot 2020-11-13 at 9.07.33 AM.png

      Then in Lay Options - Custom CSS & HTML -

      we could force the image to have a certain height e.g:

      .custom img{
      height:250px;
      width:auto;
      }
      

      This could be also set to % or VH (viewport height)

      Less advisable, but maybe it suits you, would be to change its position property: https://www.w3schools.com/css/css_positioning.asp

      Fixed - would position the image relative to the viewport
      Absolute - would position relative to the nearest ancestor
      Etc

      Good luck and let me know your thoughts

      Happy new year and thank you for using Lay Theme!

      Sincerely
      Richard

      1 Reply Last reply
      0
      • dmncnD Offline
        dmncnD Offline
        dmncn
        wrote on last edited by
        #3

        Hi Richard,

        thank for your reply. Unfortunately, both solutions don’t work.

        The height of the image doesn’t need to be changed, it’s the row that contains it that I would like to adjust based on the maximum height of the text boxes.

        And the fixed or absolute positioning is not what will maintain my layout idea. Or maybe I’m not able to set them correctly?

        Hope could be a better solution.

        Thanks in advance

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

          Dear @dmncn

          Sorry that my last thoughts didnt help :)

          Just tricky thinking about this because for the row to set its height based on the text element we need to have it disregard the image, maybe...

          I recreated your layout just to get a better idea:
          Screen Shot 2021-01-10 at 11.41.59 AM.png

          And then tried the past idea just for curiosity:
          Screen Shot 2021-01-10 at 11.44.00 AM.png

          The Row now has its height based on the text element...

          But this isn't what you want right - so maybe you could use jquery to ask for the height of the text element and then force the row height based on the returned answer?

          https://stackoverflow.com/questions/9592575/get-height-of-div-with-no-height-set-in-css

          https://www.w3schools.com/jquery/css_height.asp

          Hope this helps

          Best wishes for 2021!

          1 Reply Last reply
          0
          • dmncnD Offline
            dmncnD Offline
            dmncn
            wrote on last edited by
            #5

            Dear @Richard-K

            the result on the second screenshot is exactly what I’m looking for.

            How can I replicate it?

            Best wishes to you!

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

              Dear @dmncn

              This was the result of giving the image a custom class so that i could target it - then :

              .custom img{
              position:absolute;
              right:0;
              }
              

              Best
              Richard :)

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

                hey!
                you could put two text elements on top of each other inside a stack element. and then have an image to the right!

                https://laytheme.com/documentation.html#stack-element

                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
                C
                craigfeldspar
                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