Responsive full screen page

Hello, 

I'm trying to achieve an overlay scroll style section of a website, I've got the scroll working how I wanted but I want the sections to fit responsively to different screens. For example the image should fill half the section and the paragraph should align to the bottom. Does anyone know how to do this?

Using this tutorial for the overlay scroll https://www.youtube.com/watch?v=Oz9jmHVvZnY

Page link https://cornet-dolphin-yl3z.squarespace.com/the-grow-to-know-story

Thanks! 

I tried checking and it looks fine. Can you take a screenshot of problem?

Hello, have a look here it works well on my laptop screen but once on larger screens it isn't responsive and creates gaps at the bottom. Ideally the image would fit to the height and the body copy would stick/align to the bottom of the screen.

Thanks!

Try this code to Website > Website Tools > Custom CSS

@media screen and (min-width:1500px) {
.fe-block-yui_3_17_2_1_1713475047761_17646, .fe-block-yui_3_17_2_1_1713475047761_21151 {
    grid-row-end: 22 !important;
}
}

Thank you it does work on a large screen but breaks it on smaller laptop screen (1512 x 982) 

Is there a way to add break points? 

15 hours ago, tuanphan said:

Try this code to Website > Website Tools > Custom CSS

@media screen and (min-width:1500px) {
.fe-block-yui_3_17_2_1_1713475047761_17646, .fe-block-yui_3_17_2_1_1713475047761_21151 {
    grid-row-end: 22 !important;
}
}

 

Can I combine this same code with BeyondSpace's gallery code block to force it to fit on the screen (without any excess/overflow) on a sticky scroll? The container for that gallery block code is taller than the screen and it seems I can't adjust it's size at all. I'm trying to get it to work like this:

.fe-block-yui_3_17_2_1_1714409718196_2185 {
    grid-row-end: 22 !important;
}

but it doesn't seem to be having an effect. I've tried to adjust the row to end on 50 and it created a lot of blank space but didnt resize the actual photo container/block.

page is www.aspiremusicgroup.com/autumnpaige

You can use this code to Website > Website Tools > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1714409718196_2185, div#block-yui_3_17_2_1_1714409718196_2185 .slide {
    height: calc(~"100vh - 100px") !important;
}}