Jump to content

Align 2 blocks of different height to the bottom off a 100vh footer

Recommended Posts

Site URL: https://plantain-halibut-ggpk.squarespace.com/livre-le-cousin/#/livres-le-cousin

Hi everyone, 

https://plantain-halibut-ggpk.squarespace.com/livre-le-cousin/#/livres-le-cousin

password : juliettebiennee

For this website, I already messed a bit with the CSS but creating a full width browser footer with this bit of CSS :

.Footer-inner{
  height:100vh;
}

Inside this footer I have 2 columns of menus, one left aligned and one right aligned  (also used a bit of code for this right align) :

1987639156_Screenshot2020-08-12at8_50_12PM.thumb.png.4a5d165a695af558cfb95661f9d79d68.png

I would like for these menus to be fixed into the footer excepts that these 2 blocks would not be aligned to the top of the Footer, they would always appear at the bottom of the page, at the bottom of the footer, like a position relative to the bottom of the footer  :

1999578616_Screenshot2020-08-12at8_50.12PM_2.thumb.png.081247254b4c431633a1f5af58a9c8ae.png

 

I've not been able to find anywhere a piece of CSS code that could help do that. Ideally I would like to use only CSS code, the person is planning to by a personal plan for that website. 

Hope someone will be able to help me on this 🙂

 

 

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

Thanks a ton it worked !

My 2 texts blocks were still aligned from the top relatively to each other so I cheated a little bit and just trough this into the CSS to lower by a few pixels the block on the right side. Probably not the nicest way but it worked  😅

#block-yui_3_17_2_1_1597238624427_57433{
  top:117px;
}

255001012_Screenshot2020-08-12at10_51_08PM.thumb.png.14a9536d8a976bee2e5d021ecf403995.png

Link to comment

Hi again, 

So it's becoming a little bit more complicated since I would like to align the 2 menus at the bottom but to keep on block always align to the top of the footer :

 

340059796_Screenshot2020-08-20at2_32_29PM.thumb.png.3f642d3a475e08e7c3943b24b1960873.png

^ This is what I get when I use this code

.Footer-inner{
  	height:100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

But this is what I would like to get :

841594850_Screenshot2020-08-20at2_32.29PM-2.thumb.png.ee8cf22526c2eb65dcdcb6a36d2be3cd.png

I've tried a bunch of things like using "position : relative" or even using the "align-self" css code to try to bring the logo block back up. 

I've also tried keeping everything up and lower the 2 blocks at the bottom but not able to crack it ;(

 

any clue ?

 

Link to comment
  • 4 weeks later...
  • 3 weeks later...

If anyone was searching for this, I finally found it myself after a very empirical trials and errors moment 🙂

 

.Footer-inner{
  	height:100vh;
	display: flex;
	flex-direction: column;
}
/*Content of the bottom block footer only aligned with the bottom of the page*/
.tweak-footer-layout-stacked .Footer-blocks--bottom {
    height:100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.