Jump to content

Can I prevent blocks from expanding vertically when resizing browser window horizontally?

Go to solution Solved by tripnikk,

Recommended Posts

I'm embedding multiple soundcloud playlists into my site. They are arranged vertically so playlist #2 is directly under playlist #1.

I've stretched the code block to the farthest edge of the window so when I resize my browser window, the the playlist will stretch horizontally to occupy the full space (which can make it easier to read track titles) but this also makes the code block expand vertically as well so it pushes the rest of the content below it down on the page. Because many of the playlists are short, this results in very large empty vertical spaces between playlists when the browser is stretched to a certain size or displayed full screen.

Is there any way to control the way that code blocks resize? I do want them to resize horizontally, but want to prevent them from stretching vertically beyond a specified point.

Link to comment
  • Solution

I was expecting some sort of slick CSS fix for my issue, but it turns out I was over-thinking things. Instead of making multiple code blocks for each of the playlists, I simply made one single code block and put all of the playlists in it so now the vertical distance between playlists remains fixed while the horizontal layout is fluid.

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.