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. Addons
  3. Row image background in lighbox

Row image background in lighbox

Scheduled Pinned Locked Moved Addons
7 Posts 2 Posters 145 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
    minutes
    wrote on Aug 13, 2023, 2:50 PM last edited by
    #1

    Hi there,

    At the top of the page I have a full-screen image (set as row image background), and the rest of the images are standard. Currently the row image background is not part of the lightbox – is it possible to make it part of it?

    Thank you for any insight!

    1 Reply Last reply
    0
    • A Offline
      A Offline
      arminunruh
      Global Moderator
      wrote on Aug 14, 2023, 11:41 AM last edited by
      #2

      hello!

      no, row background images are not part of the lightbox.
      I think there is no way to do that.

      Instead of using a row background image, you could insert the image normally using the +Image button. Then it would be part of the lightbox.

      M 1 Reply Last reply Aug 14, 2023, 3:01 PM
      0
      • A arminunruh
        Aug 14, 2023, 11:41 AM

        hello!

        no, row background images are not part of the lightbox.
        I think there is no way to do that.

        Instead of using a row background image, you could insert the image normally using the +Image button. Then it would be part of the lightbox.

        M Offline
        M Offline
        minutes
        wrote on Aug 14, 2023, 3:01 PM last edited by
        #3

        @arminunruh Hey Armin, thank you for your response.

        Please could you see the below page (p: test1):
        https://mantaspeteraitis.com/currents

        I'd love for the image at the top to be full-screen and setting it as row image background was the only way I could figure out how to achieve this result for both desktop and mobile (although on mobile and certain browser sizes I can see some unwanted padding at the top).

        Do you have any tips how to achieve this otherwise (also without padding at the top on certain sizes) so that it could be part of the lightbox?

        1 Reply Last reply
        0
        • A Offline
          A Offline
          arminunruh
          Global Moderator
          wrote on Aug 16, 2023, 11:01 AM last edited by
          #4

          sure

          in gridder:
          remove the row background image

          insert the image using +image

          resize the image to the very left border and right border in the gridder:
          https://laytheme.com/documentation/gridder-elements.html#full-width-element

          then right click the image, click "set html class and id"
          as class enter: fullscreen

          in lay options → custom css & html, in custom css enter:

          .fullscreen .ph{
              padding-bottom: none;
              height: 100vh;
              height: 100svh;
          }
          
          .fullscreen img{
              object-fit: cover;
              height: 100vh;
              height: 100svh;
          }
          
          M 1 Reply Last reply Aug 19, 2023, 2:46 PM
          0
          • A arminunruh
            Aug 16, 2023, 11:01 AM

            sure

            in gridder:
            remove the row background image

            insert the image using +image

            resize the image to the very left border and right border in the gridder:
            https://laytheme.com/documentation/gridder-elements.html#full-width-element

            then right click the image, click "set html class and id"
            as class enter: fullscreen

            in lay options → custom css & html, in custom css enter:

            .fullscreen .ph{
                padding-bottom: none;
                height: 100vh;
                height: 100svh;
            }
            
            .fullscreen img{
                object-fit: cover;
                height: 100vh;
                height: 100svh;
            }
            
            M Offline
            M Offline
            minutes
            wrote on Aug 19, 2023, 2:46 PM last edited by
            #5

            @arminunruh Thank you Armin, this now works in terms of image being fullscreen and it's included in the lightbox. However, once the page is scrolled, there is a browser-height worth of blank space (see screenshot attached). I tried it on a couple of pages and the result is the same – any idea why this is happening? Thanks again!

            Screenshot 2023-08-19 at 17.38.34.png

            1 Reply Last reply
            0
            • A Offline
              A Offline
              arminunruh
              Global Moderator
              wrote on Aug 24, 2023, 10:15 AM last edited by
              #6

              @arminunruh said in Row image background in lighbox:

              fullscreen

              use this css instead:

              .fullscreen .ph{
                  padding-bottom: 0!important;
                  height: 100vh;
                  height: 100svh;
              }
              
              .fullscreen img{
                  object-fit: cover;
                  height: 100vh;
                  height: 100svh;
              }
              
              M 1 Reply Last reply Sep 16, 2023, 5:46 PM
              0
              • A arminunruh
                Aug 24, 2023, 10:15 AM

                @arminunruh said in Row image background in lighbox:

                fullscreen

                use this css instead:

                .fullscreen .ph{
                    padding-bottom: 0!important;
                    height: 100vh;
                    height: 100svh;
                }
                
                .fullscreen img{
                    object-fit: cover;
                    height: 100vh;
                    height: 100svh;
                }
                
                M Offline
                M Offline
                minutes
                wrote on Sep 16, 2023, 5:46 PM last edited by
                #7

                @arminunruh Thank you Armin!

                1 Reply Last reply
                1
                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
                M
                Markus
                16 minutes ago
                A
                alasdair17
                24 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.
                • First post
                  Last post
                0
                • Recent
                • Tags
                • Popular
                • Users
                • Search