Responsive block height

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. 

Thanks!

Hi. Have you found the solution yet?

Hi tuanphan, 

Thanks for your response - I have not yet found a solution.

Thanks!

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: 
 

Quote

 

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

{

#block-5fdf56a9fb7de13a646b4fc4
   {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! 

Hi @BruthaBear,

I don't know if it'll help you but I just bought a plugin to solve my map block problem. The link is below, you can check it, see if it'll be of any help to you. 
https://www.squarewebsites.org/products/advanced-map-block

Hi @EarvinChong, 

Many thanks for the suggestion - I had actually found the plugin and agree it would be a good way to make map blocks more interesting.

However, I would be looking to learn how to work with blocks consistently, so a code-based solution would be better suited on this occasion. 

Thanks!