Jump to content

float two page sections to be side by side

Recommended Posts

Is there a way to float two page sections to be side by side, rather than stacked? I have two list sections called "What We Do" and "What We Don't" and I'd like them to be next to each other in a column if possible. I also only want this to be on the desktop version.

I've tried this code but it's not quite right:

 

@media screen and (min-width: 1200px) {div section[data-section-id="63c369b5c4b623793a779094"]{
    display: flex;width:50%;
    align-items: flex-end;
float:left;
  max-height:500px;
  }}

@media screen and (min-width: 1200px) {div section[data-section-id="63c36c958da16c30787a8f74"]{
    width:50%;
  max-height:500px;
  }}

 

https://trivium-trivia.squarespace.com/hosts

pass: manifest

Hosts — Trivium Trivia — Mozilla Firefox 1_14_2023 5_55_49 PM.png

Edited by marleydesigns
correction
Link to comment
6 hours ago, marleydesigns said:

Is there a way to float two page sections to be side by side, rather than stacked? I have two list sections called "What We Do" and "What We Don't" and I'd like them to be next to each other in a column if possible. I also only want this to be on the desktop version.

I've tried this code but it's not quite right:

 

@media screen and (min-width: 1200px) {div section[data-section-id="63c369b5c4b623793a779094"]{
    display: flex;width:50%;
    align-items: flex-end;
float:left;
  max-height:500px;
  }}

@media screen and (min-width: 1200px) {div section[data-section-id="63c36c958da16c30787a8f74"]{
    width:50%;
  max-height:500px;
  }}

 

https://trivium-trivia.squarespace.com/hosts

pass: manifest

Hosts — Trivium Trivia — Mozilla Firefox 1_14_2023 5_55_49 PM.png

We can use the fluid engine to create 2 image block that fit entire the section with the following settings on edit section

image.thumb.png.7fbf3b1b69f26bc60ac831da58e3af97.png

 

Then add the text blocks to make it look as you wish

image.thumb.png.e74ffde34fb0946148667f78d987c355.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
14 hours ago, Beyondspace said:

We can use the fluid engine to create 2 image block that fit entire the section with the following settings on edit section

image.thumb.png.7fbf3b1b69f26bc60ac831da58e3af97.png

 

Then add the text blocks to make it look as you wish

image.thumb.png.e74ffde34fb0946148667f78d987c355.png

Thanks! Since I have to make use of the list sections (being able to move through the slides is essential), this wouldn't really work for this instance. I appreciate the suggestion though!! I'll keep playing around with the css to see what else I can do.

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.