Jump to content

Group multiple blocks into a single div/container

Recommended Posts

I've put an intro section on my page that spans the height of the view port. I have some intro text that I have aligned center horizontally and vertically in the middle. (Tour name, location, date)

Below that I want a bar with content (tour meta) that spans the width of the viewport but absolutely positioned at the bottom of the page. I currently have it immediately following the "tour title". I know I can use css to target a div to position it at the bottom but not sure how to group these blocks within it.

I want the 6 blocks below. all the way at the bottom and want to add opacity to a "contaner" div to make it stand out more. Anyone have any ideas how I can group those 5 text blocks within a simple container to do that

Link to comment

I think I sort of solved my issue. I added a section below the top section that spans the vetical view port and gave the second section an explicit height of 10. Then with custom css I gave the second section a negative top margin of -10vh.

On that note - when I explicitly give the section a height, what does the "1 - 100" number value translate to? so I can be more precise with the negative value of the second section?

Screenshot 2023-10-16 at 9.48.09 PM.png

Link to comment

1 caveat - every time I duplicate the page to create a new tour I (my client) will have to add more custom css to accommodate the new section ID assigned by SS to the second section on the page...

Still looking for additional input if any one has it...

Link to comment
5 hours ago, frescova said:

what does the "1 - 100" number value translate to?

1vh - 100vh i.e. 1% -100% of the viewport height. This is a minimum height, not an absolute height, so if you put lots of content in it may exceed this height value.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.