Jump to content

Responsive block height

Recommended Posts

Site URL: https://photojourneys.co.uk/

Hi there, 


I have added two blocks on the following page, side by side - https://www.photojourneys.co.uk/journeys/istanbul

While the height of the blocks looks fine whenever the maximum width of that section is reached (see screenshot 1), this is no longer the case whenever the page is narrower (think 16:9 screen viewed in portrait mode, as illustrated in screenshot 2). 

I was wondering whether there was a way for the map block to resize along with the text block? I would like for the two blocks to be of the same height at all times, regardless of how narrow the display (or the browser window) is.

Any help would be appreciated. 






Link to comment
  • Replies 5
  • Views 876
  • Created
  • Last Reply

Hi @tuanphan


So I have made some progress in the meantime, but this has opened up other issues. 

To test this out, I am using the following page: https://photojourneys.co.uk/sscreen

I am now working with the text block directly using the following bit of code: 



@media only screen and (min-width:1080px)


   {height:30vh; overflow-y:scroll; padding-top:0!important;} 


While this helps keep the height of the text block in check, the map block still changes size (please see screenshots 3 and 4). At the same time, "mid-width:1080px" only applies to the text block, not both blocks at the time (i.e. the scroll function stops applying as expected, yet the page would have to be even narrower for the map block to be moved to a different part of the page; see screenshot 5).

I would be looking to have both blocks resize at the same time and/or have the map block "migrate" away once the scroll function has stopped applying to the block of text.

Your help would be much appreciated! 






Link to comment


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.