fixed image size (project page)

[danny]

Dear @Richard,

hope you all good. Is it possible to activated fixed image size for a complete project page http://new.marthekrueger.de/work ? So the images then possibly would be bigger then the desktop screen and I would need to scroll left-right and up-down. It should only affect all the images on this project page, but not the menu. And it should not affect the other project pages on the website.

Thanks a lot!

All best wishes

Daniel

[Richard]

Dear Daniel

@danny Hope you are well too!

Applying CSS to a certain page/ project and no other is not an issue: https://laytheme.com/documentation.html#custom-css-styling

But i may need clarification:

"Is it possible to activated fixed image size for a complete project page"

"images then possibly would be bigger then the desktop screen and I would need to scroll left-right and up-down "

You would like to have all images a 'fixed' size e.g 900px wide etc and they should be so big that you have to scroll around to see different parts of the image?

Am i understanding correctly or completely off the mark! 🌝

---

Talk soon & best wishes

Richard

[danny]

Dear @Richard,

thanks a lot. Yes, almost correctly )). I thought it more that let's say four, three or two images (depending on their fixed sizes) that would be arranged next to each other would be wider then the screen so you would need to scroll around to see the different images. You would not be able to see all the images at once.

Or in other words: one image has a 'fixed" size e.g. 900 px or three images next to each other have each a a 'fixed" size e.g. 300 p x = 900 px in total.

Thanks !

Talk soon and best wishes

Daniel

[danny]

Dear @Richard,

did you got my message? Thanks!

All best wishes
Daniel

[Richard]

Dear Daniel

@danny

The actual customisation will need to be done by you, but i can lead you in the right direction 🌝

You can apply Custom Classes or Id's to Elements in the Gridder (right-click)

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

Once your Image elements have a Class ID you can target them. Then you can then apply Custom CSS to them via:

Lay Options > Custom CSS & HTML >

---

It may look something like this:

For the one big image (you may have given it a class "custom-class-big" :

.custom-class-big img{
width:900px;
height:900px;
}

Then i suppose you would have a different class for the three smaller images e.g:

.custom-class-small{
width:300px;
height:300px;
}

The browser will likely want to 'wrap' you image elements so they fit within the viewport - you will need to look into having them stay in the same row.

This also poses the problem if you push images out of view off to the right therefore making the website say 900px wider then the whole website is 900px wider - when you scroll down to the footer, do you then have 900px of white space to the right of your footer?

When doing customization these things need to be taken into consideration, it may create a website with a strange user interface feeling.

Hope this helps Daniel & have a wonderful day! 🏖

---

Sincerely

Richard

[danny]

Dear @Richard,

thanks for this, good to know!

I applied the Class ID and the Custom CSS which works - nice. Now what happens is, that the images lay above each other instead of being next or under each other.

Is there any way to control that?

Or would the only other option that I upload one huge image that includes all the images that I want to have under WORK? Like I would do the layout in Indesign and upload one image instead of all the images individually?

Thanks again a lot!

Have a wonderful day.

Daniel

[Richard]

Dear Daniel

@danny

I see you have since changed to a carousel? The images overlapping each other relates to either the display or position properties:

https://www.w3schools.com/css/css_positioning.asp

https://www.w3schools.com/cssref/pr_class_display.asp

Making one large image how you want it may be an option & then everything is exact however if this is a huge file size it will take a while to load, to keep that in mind 🌝

---

best wishes

Richard

[danny]

Dear @Richard,

I was trying to make the horizontal scrolling as well as the vertical scroll following the steps and tricks you explained, although it seems i am in conflict with the actual lay theme setup.
so I see that it says literally this "Your CSS below is inserted into the media query for the desktop version: @media (min-width: 901px){…}" on the "Custom CSS for Desktop Version/Custom CSS & HTML" page.

is it maybe this that i have to tackle? In the Lay Options, I turned to "0(zero)" the max with of the desktop version in order to not make it responsive in desktop/tablet versions (yet i want it responsive just when it gets to the mobile size). but has done noting. could you give me some hints about it?

Thanks!

[Richard]

Dear Daniel

@danny

I don't quite understand this statement sorry( i understand IT but not what you are trying to achieve as an end result) I know that on the forum are many different nationalities so allgood!

" In Lay Options I turned the max width of the desktop version to 0px in order to not make it responsive on desktop or tablet (yet i want it responsive just when it gets to the mobile size). but this has done nothing"

You have a carousel, originally you wanted one large image and three smaller ones, what are you trying to achieve now? both horizontal and vertical scrolling?

I also wish to add with sincerity Danny so you understand me correctly 🌝
If you wish to go deeper customising, my function as a forum moderator can only go so far. At some point i must step back and say that if you are required to sort out customisation yourself and if not you may require the aid of a developer. I hope i have explained that correctly and that i wish to help but my capacity as a forum moderator has limits.

---

Talk soon and best wishes 🌻

Richard

[danny]

Thanks @Richard! Will try to sort it out. All best wishes Daniel

[danny]

Dear @Richard,

thanks again, maybe we didn't explained well enough yet what we achieve.

We would like that the Page "https://www.marthekrueger.com/work/" functions like this website: http://www.nofoundry.xyz/

So yes, we achieving horizontal and vertical scrolling.

Do you have any idea?

Thanks a lot! Appreciate it very much.

All best wishes

Daniel

[Richard]

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

[danny]

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

[danny]

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

Greetings!
D

[Richard]

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:

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:

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

[danny]

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

[Richard]

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

[danny]

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

[danny]

Dear @Richard,

did you saw my last reply?

Thanks!

Best wishes

Daniel

[Richard]

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

And for the Carousel Addon - "Loop Slides":

When adding a Carousel into the Gridder you will see the "Loop" Option:

---

Hope this helps & best wishes, have a great day Daniel 🌻

Richard