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. Fullscreen slider - 50% height on one row?

Fullscreen slider - 50% height on one row?

Scheduled Pinned Locked Moved Addons
11 Posts 3 Posters 711 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.
  • S Offline
    S Offline
    StudioTomas
    wrote on last edited by
    #1

    Hello :)

    I was wondering if there is a CSS or Jquery fix which would allow for the last row of a project page to be only 50% height, when the rest of the page uses the full screen slider? By this I mean when the last row slides into view it stops and fills only the bottom half of the screen.

    Thanks!

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

      Dear @StudioTomas
      with CUSTOM CSS you can give the last row a specific height of 50%. That should be possible, yes.

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • S Offline
        S Offline
        StudioTomas
        wrote on last edited by
        #3

        Hi Marius, thanks for the quick reply! I did try to do that by giving the row a class and using the custom css 50vh but it seems like the Fullscreen slider overrides that - any ideas? Thanks!

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

          Dear @StudioTomas
          try the important tag:
          https://www.css-hack.de/CSS+allgemein/!+important

          It will probably overwrite.

          Best!
          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • S Offline
            S Offline
            StudioTomas
            wrote on last edited by
            #5

            Hi Marius,

            Thank you :) unfortunately that doesn't work.

            Here's my custom CSS:

            .halffooter: {
            height: 50vh! important;
            }

            The halffooter class is applied to the row I want to be 50% height with the fullscreen slider.

            1 Reply Last reply
            0
            • edgrbnzE Offline
              edgrbnzE Offline
              edgrbnz
              wrote on last edited by edgrbnz
              #6

              That’s simply because you got a minor typo in there – Your space is in the wrong place 😉

              Intead of:

              .halffooter: {
              height: 50vh! important;
              }
              

              It should be:

              .halffooter: {
              height: 50vh !important;
              }
              

              Best is to write these things in a code editor with syntax highlighting like Sublime Text. You can define which language you are writing and the editor highlights the syntax that’s wrong / right like above 👆
              When all code is done copy-paste it into Lay Theme as desired.

              Hope that helps!

              ✦ ✦ ✦

              1 Reply Last reply
              1
              • mariusjopenM Offline
                mariusjopenM Offline
                mariusjopen
                Global Moderator
                wrote on last edited by
                #7

                Dear @edgrbnz
                ah great! Good eyes!

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply
                0
                • S Offline
                  S Offline
                  StudioTomas
                  wrote on last edited by
                  #8

                  Thank very much to you both @mariusjopen and @edgrbnz - sorry I didn't reply sooner and thanks for the Sublime text tip, I do sometimes use that but missed the space this time!

                  Unfortunately though that edit does not work either. My site is studiotomas.com and I have a test half height section at the bottom of the home page.

                  Any other ideas of a workaround are most welcome! :)

                  1 Reply Last reply
                  0
                  • mariusjopenM Offline
                    mariusjopenM Offline
                    mariusjopen
                    Global Moderator
                    wrote on last edited by
                    #9

                    Dear @StudioTomas
                    that is because you use the Fullscreen Slider. You can not combine it with the fullscreen slider.

                    You could make a box in the last slide and change it with CSS.

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply
                    0
                    • S Offline
                      S Offline
                      StudioTomas
                      wrote on last edited by
                      #10

                      Hi Marius,

                      Ah ok, my question has always been about the fullscreen slider!

                      What I was trying was to make a footer like the one at the bottom of the page on this site: www.afom.com.au.

                      Is this definitely impossible with Lay theme? If so, no worries, maybe I'm being too ambitious!

                      Thanks :)

                      1 Reply Last reply
                      0
                      • mariusjopenM Offline
                        mariusjopenM Offline
                        mariusjopen
                        Global Moderator
                        wrote on last edited by
                        #11

                        Dear @StudioTomas
                        you could probably trick it somehow. With jQuery or some tricky CUSTOM CSS:

                        But also I don't know how to be honest.

                        :-)

                        Best!

                        Marius

                        www.mariusjopen.world

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