Disable scrolling

Hi @theye

Is there a way to only apply ‘no scrolling’ to the home page, and remove the white space in the bottom?

I checked a few things on your homepage and I believe you can achieve what you want if you do the few things listed below:

1. Get your homepage page ID, you can get that while editing the page as shown in this short video.
2. Make sure the cover block is set to full width, if that doesn’t remove the white space under the image you can increase the height using CSS.

I would suggest replacing the CSS code you currently have with the one below. Don’t forget to replace xxx with the correct home page ID from your site

.page-id-xxx {
    overflow: hidden;
    margin: 0;
    height: 130px;
}

Hi @thelmachido,

Thanks for your elaborate answer.

2. Make sure the cover block is set to full width, if that doesn’t remove the white space under the image you can increase the height using CSS.

I entered the CSS code, with page id 13. I also toggled full width en full height on the cover block. The white space disappeared, which is great.

But now the header drops down, when fully zoomed out. Would you happen to know how to fix the header on top?

• This reply was modified 2 years, 2 months ago by theye.

@thelmachido and @theye No need to find the home page ID as there is a specific class just for the home page which is .home.

I entered the CSS code, with page id 13. I also toggled full width en full height on the cover block. The white space disappeared, which is great.

If enabling full width on the block settings I would suggest removing height: 130px; from the CSS code.

Concerning the zooming out I am not quite sure I am following, this is what I see when I zoom out, which is the expected behaviour. If you can share a video of what you are seeing on your end, you can add this to your media library.

No need to find the home page ID as there is a specific class just for the home page which is .home.

Thank you @hikinmike I will use that in the future ??

Thanks for checking.

Concerning the zooming out I am not quite sure I am following, this is what I see when I zoom out, which is the expected behaviour. If you can share a video of what you are seeing on your end, you can add this to your media library.

See this screenshot.

I have zoomed out to 25%, and the menu seems to drop down quite a bit, is there a way to turn this off?

Hi @thelmachido , did you have a chance to look at the question I asked above?

Hi @theye thank you for the second ping, l missed the first one.

l checked again on my end and l cannot replicate the issue, this might be due to me using a different browser or device. They tend to handle zooming in and out differently. Since l can’t replicate this l am not very sure how best this can be resolved, however,

1. Do you had the same issue when the CSS added before is removed from your site?
2. Is the zooming problem consistent on every page?

Additionally, l found a couple of suggestions for this kind of issue. Feel free to try this out:

https://stackoverflow.com/questions/9709125/how-do-i-stop-a-css-layout-from-distorting-when-zooming-in-out#comment12341782_9709125

Hi @thelmachido , thanks again for looking into this.

1. Do you had the same issue when the CSS added before is removed from your site?

Yes, the same problem still occurs.

2. Is the zooming problem consistent on every page?

No, it only occurs on the main page, I guess it has to do with the cover image?

I also tried some of the solutions in the Super-user thread, but they didn’t change anything.

I will start a new topic about the behavior of the header on big screens.