page without scrolling - Support | Kriesi.at

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
May 1, 2023 at 12:06 pm #1406090

schweg33
Participant

hello together
i have created a page here with background image, link 1 below

when i open this page a bar appears to scroll and
and the image can be easily moved up or down with the mouse

can this be set so that the page can not be scrolled?

the same with this link 2 below
and here is still the foot mobile vertically too far down

can this also be adjusted

thanks in advance

kind regards
Franz

Translated with http://www.DeepL.com/Translator (free version)

May 2, 2023 at 3:14 am #1406137
Ismael
Moderator
Hey schweg33,

Thank you for the inquiry.

We can prevent scrolling for these pages, but please note that the bottom part of the content may be cut off on smaller screens. If this is not a concern, you can add the following CSS code:
```
.page-id-12438, .page-id-12020 {
    overflow: hidden;
}
```
After adding the CSS modification, please toggle or temporarily disable the Enfold > Performance > File Compression settings to ensure that the changes take effect.

Best regards,
Ismael
May 2, 2023 at 7:36 am #1406155

schweg33
Participant

Hello Ismael
thank you for your answer

works so far great
only on the mobile vertical it does not work
can this also be adjusted?

I do not quite understand
”
After adding the CSS modification, please toggle or temporarily disable the Enfold > Performance > File Compression settings to ensure that the changes take effect.
”
can you control this for me

thanks
kind regards
franz

May 3, 2023 at 6:11 am #1406298
Ismael
Moderator
Hi,

Thank you for the update.

For mobile view, please try to include this css code.
```
@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  html.responsive,
  .responsive body {
    overflow: hidden;
  }
}
```
We have disabled the Enfold > Performance > File Compression settings temporarily. You can re-enable it once you’re done with your changes.

Best regards,
Ismael
May 3, 2023 at 7:03 am #1406301

schweg33
Participant

thanks for your answer
Ismael

mobile does not work for me
how do I specify the pages

so it is now for pc
.page-id-10706,
.page-id-10713,
.page-id-12154,
.page-id-12438,
.page-id-12020
{
overflow: hidden;
}

kind regards
Franz

May 4, 2023 at 7:34 am #1406409

schweg33
Participant

Hello Ismael
I have entered the CSS code like this See below:

Locally on the PC it works like this

but not on mobile

I have entered the code wrong

thanks in advance
kind regards
Franz

May 4, 2023 at 7:44 pm #1406477
Mike
Moderator
Hi,
Thank you for your patience, I changed your mobile css to this:
```
@media only screen and (max-width: 768px) {
html.responsive.html_entry_id_10706,
html.responsive.html_entry_id_10713,
html.responsive.html_entry_id_12154,
html.responsive.html_entry_id_12438,
html.responsive.html_entry_id_12020,
.responsive #top.page-id-10706,
.responsive #top.page-id-10713,
.responsive #top.page-id-12154,
.responsive #top.page-id-12438,
.responsive #top.page-id-12020 {
overflow: hidden;
}
}
```
please clear your browser cache and check.

Best regards,
Mike
May 4, 2023 at 10:56 pm #1406486

schweg33
Participant

Hello Mike
Thanks for your answer

When I call the page on the PC link below:

I see the page with footer
and can also scroll the page under the footer remains stable

on mobile I see no footer
and can not scroll
vertically I see through the only half the text

thanks
kind regards
Franz

May 5, 2023 at 12:27 am #1406488

Mike
Moderator

Hi,
Thanks for the feedback, when I check the page you linked to 12438 on the desktop, the page can not be scrolled as per your request, and while the footer can be seen it is because the page content is small enough that it has not been pushed down.
But on my Android mobile device the content is longer than the height of the screen, see my screenshot in the Private Content area.
If you want to allow scrolling on this page I recommend removing it from the mobile css.

Best regards,
Mike

May 5, 2023 at 7:46 am #1406510

schweg33
Participant

Hello Mike
thank you for your answer
I have now switched off again for mobile.
then can be scrolled
I just do not understand why mobile is so much space below to the footer
for example with this view link below

and so actually should not scroll until you see the footer

thanks
kind regards
Franz

May 6, 2023 at 2:45 pm #1406566
Mike
Moderator
Hi,
This was because the color section height is set to 100% of screen height which doesn’t count for the socket, I see that you had so css to adjust this for desktop and mobile but not for mobile, so I added this to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
@media only screen and (max-width: 767px) { 
body#top {
height: 100vh;
}
#socket > .container {
padding-left: 0;
padding-right: 0;
}
#top #my_section {
    height: calc(100vh - 120px);
}
}
```
for my Android device height: calc(100vh – 120px); worked for me but feel free to adjust for your device.
Please clear your browser cache and check.
Best regards,
Mike
May 6, 2023 at 10:52 pm #1406614

schweg33
Participant

Hallo Mike
Funktioniert eigentlich ganz schön
gibt aber konflikt mit einem anderen plugin: Page scroll to id
Auf dieser Seite Link unten
habe ich einen Link eingebaut: https://dorfgeschichte.li/2021-herbst-eschen-360-grad/#wiepatzadavoegel
welcher direkt zu dieser Redewendung springt.
auf dem pc funktioniert es bestenst. Mobil springt dieser Link nicht mehr zur richtigen stelle. lösche ich deinen letzten code raus, funktioniert es wieder.
kann man da was machen

danke und Gruss Franz

May 7, 2023 at 3:00 pm #1406643
Mike
Moderator
Hi,
I recommend adding the specific page IDs to the css above since this is not designed for every page, the page that you have linked to is very long so you will want to allow scrolling on.
For example:
```
@media only screen and (max-width: 767px) { 
body#top.page-id-12020 {
height: 100vh;
}
#socket > .container {
padding-left: 0;
padding-right: 0;
}
#top #my_section {
    height: calc(100vh - 120px);
}
}
```
Best regards,
Mike
May 7, 2023 at 6:35 pm #1406657

schweg33
Participant

hello mike
works well
but since i will probably have hundreds of soler links later
very complicated, and mobile no longer very clear

would it be possible if on the page link below
the lowest link in the table:
Dialekt Ausdrücke und Redewendungen
Diese Seite befindet sich in Arbeit!
to be displayed only on the Pc (hide mobile horizontally and vertically)

PS: I can not find where to send you a cafe break?
please send me still this link.

thank you and kind regards
Franz

Translated with http://www.DeepL.com/Translator (free version)

May 7, 2023 at 8:03 pm #1406672
Mike
Moderator
Hi,
Try this css to hide the last cell below 1024px:
```
@media only screen and (max-width: 1024px) { 
	#top.page-id-12438 .pricing-table li:nth-child(8) {
		display: none;
	}
}
```
Best regards,
Mike
May 8, 2023 at 6:06 pm #1406770

schweg33
Participant

Hello Mike
now it fits great so
thanks for your helpfull

you can close this ticket
kind regards
Franz

May 8, 2023 at 11:32 pm #1406804

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘page without scrolling’ is closed to new replies.