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. fixed image size (project page)

fixed image size (project page)

Scheduled Pinned Locked Moved General Discussion
22 Posts 2 Posters 1.4k 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.
  • RichardR Offline
    RichardR Offline
    Richard
    Global Moderator
    wrote on last edited by Richard
    #12

    Dear Daniel

    @danny

    Not possible with current laytheme options sorry, this will need to be custom coded. The main area of the example website has the id all . Here the CSS added forces dimensions off the browser screen ( width 10000px ).

    #all {
        height: 10000px;
        width: 10000px;
        position: relative;
    }
    

    You could apply your own custom css to Lay Theme adding these big dimensions. Another option could be to use the Fullscreen Slider for downwards scrolling and carousels on each row for horizontal scrolling but this is still restricted movement. Not as free moving as the example http://www.nofoundry.xyz/


    Best wishes Daniel and talk soon 🌝
    Richard
    1 Reply Last reply
    0
    • D Offline
      D Offline
      danny
      wrote on last edited by
      #13

      Dear @Richard,

      thanks, I applied the CSS, unfortunalty it wont affect the website.

      Do you might know what I would miss?

      Thanks again and have a nice day.

      Best wishes

      Daniel

      Bildschirmfoto 2021-10-27 um 11.43.23.png

      1 Reply Last reply
      0
      • D Offline
        D Offline
        danny
        wrote on last edited by
        #14

        … and one more example website for what we achieve: https://www.lutzbacher.com/8.html

        Greetings!
        D

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

          Dear Daniel

          @danny

          Likely you do not have an HTML element within your website with the id 'all' - #all The above CSS is being applied to whatever has the id 'all' .

          The example provided does the same thing by defining the 'background' container to have a large width and height:
          Screen Shot 2021-10-29 at 11.09.56 AM.png

          The CSS:

          #background {
              margin: 0px auto 0 px auto;
              visibility: visible;
              height: 2942px;
              width: 4000px;
              position: relative;
              background-color: #FFFFFF;
              background-image: none;
          }
          

          If you would like to apply similar CSS you must define an ID or Class for the CSS to be applied to.

          #my-custom-id{
          width:4000px;
          height:2000px;
          }
          

          For example, within the Gridder i can click an element and define a custom Id or Class for it:
          Screen Shot 2020-11-13 at 9.07.33 AM.png

          Now with the above code added within > Lay Options > Custom CSS & HTML > My text element in the Gridder will be given a height of 2000px & a width of 4000px.

          https://laytheme.com/documentation.html#custom-css-styling

          https://www.khanacademy.org/computing/computer-programming/html-css

          https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools


          Hope this helps Daniel & best wishes 🌝
          Richard
          1 Reply Last reply
          0
          • D Offline
            D Offline
            danny
            wrote on last edited by
            #16

            Dear @Richard,

            thanks a lot for this and sorry for my late reply.

            I tried it out - it actually works with websites that are not build with Laytheme but with Laytheme it does not work. The Custom CSS seems to crash with the actual laytheme code.

            Would you know of any other website that is build with laytheme that features infinitive horizontel and vertical scrolling?

            Many thanks! Appreciate your help a lot!

            All best wishes

            Daniel

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

              Dear Daniel

              @danny

              "Would you know of any other website that is build with laytheme that features infinitive horizontel and vertical scrolling?"

              Not off the top of my head sorry but i would imagine it makes use of Carousel and Fullscreen Slider addon's both active and set to "loop" creating the infinite experience.


              Best wishes 🌝
              Richard
              1 Reply Last reply
              0
              • D Offline
                D Offline
                danny
                wrote on last edited by
                #18

                Dear @Richard,

                many thanks - now how do you mean exactly with Carousel and Fullscreen Slider set to "loop"?

                Would it be possible that I provide you with the login data and you could have a look yourself?

                I know thats not the usual - I just thought it might be a benefit, cause in the end this infinite vertical and horizontal screening can be useful for other users as well I believe.

                Many thanks!

                Best wishes
                Daniel

                1 Reply Last reply
                0
                • D Offline
                  D Offline
                  danny
                  wrote on last edited by
                  #19

                  Dear @Richard,

                  did you saw my last reply?

                  Thanks!

                  Best wishes

                  Daniel

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

                    Dear Daniel

                    @danny

                    Sorry for delayπŸ’₯
                    Setting the Carousel or Fullscreen Slider to Loop can be done within the Settings of either the Carousel Addon or Fullscreen Slider Addon.

                    Here for the Fullscreen Slider Addon - "Continous Vertical":
                    Screen Shot 2021-12-02 at 10.11.34 AM.png

                    And for the Carousel Addon - "Loop Slides":
                    Screen Shot 2021-12-02 at 10.11.24 AM.png

                    When adding a Carousel into the Gridder you will see the "Loop" Option:
                    Screen Shot 2021-12-02 at 10.13.54 AM.png


                    Hope this helps & best wishes, have a great day Daniel 🌻
                    Richard
                    1 Reply Last reply
                    0
                    • D Offline
                      D Offline
                      danny
                      wrote on last edited by
                      #21

                      Dear @Richard,

                      thanks a lot. I tried the Fullscreen Slider Addon. But as far I understand this is for single images as a Slideshow? It's turning the images into into single slides (see below), thats unfortunalty not something we looking for.

                      As we would like to achieve a vertical and horizontal scrolling of the page https://www.marthekrueger.com/work/. So we would need a scroll bar vertical and horizontal as in this example website here http://www.nofoundry.xyz/.

                      I'm happy to provide you with the logins for the website and you could maybe try it out?

                      Thanks again for your help! All best wishes Daniel

                      Bildschirmfoto 2021-12-02 um 10.15.39.png

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

                        Dear Daniel

                        @danny

                        The Fullscreen Slider creates it's "Slides" based on the "row". Unfortunately as a Forum helper I cannot go as far as design your website for you - If you would like these designs as per example you will have to find a solution or ask the aid of a Developer.

                        A true 10000 pixel wide/high webpage like your example will need to be custom coded. If you want to use standard Lay Theme options to achieve a similar but not the same design then use the Fullscreen Slider for vertical movement & the carousel within a Row for horizontal movement.


                        Best wishes Daniel 🌝
                        Richard
                        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