Jump to content

Flatiron - Align two side-by-side blocks to the bottom

Recommended Posts

Site URL: https://www.codylafond.com/#/therwood/

passcode: heyyouguys

I'm having trouble aligning these two text blocks along the bottom. When the browser window is resized they move up and down independently of one another. 

The left text block is just a regular text box with h1 text (with some custom CSS targeting it to adjust size, line height etc.) The right-hand text block is a code block with custom HTML/CSS to create a grid with a 3 column layout. I'm hoping there's a way to target the block IDs and align them that way, however I haven't found such a solution. 

I considered creating a new code block similar to the 3 column code block on the right-hand side, but creating it so that it spans the full width of the page, and has the heading appear within the first cell, while the 3 column content would populate columns 2-4. That way it all behaves as one unit. Unfortunately my HTML/CSS skills are leaving me with more questions than answers on how to pull that off. 

If anyone could point me in the right direction that would be fantastic! 

image.thumb.png.183f5bc837e13afa01229c59d068c117.png

 

Link to comment
  • Replies 1
  • Views 317
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.