Jump to content

Responsive full screen page

Recommended Posts

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! 

Link to comment
  • Replies 6
  • Views 394
  • Created
  • Last Reply

Top Posters In This Topic

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!

Screenshot 2024-04-30 at 09.52.26.png

Screenshot 2024-04-30 at 09.52.16.png

Link to comment
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

Link to comment

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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.