Jump to content

How to create two columns of text so the text flow wraps

Go to solution Solved by Alasana,

Recommended Posts

Posted (edited)

Hello, I am trying to set a text block in SS7.1 (fluid engine) to have columns and dynamically flow the text from one column to the next so that a large text block is easy to read. I referenced this tutorial How to create a multi-column text block in Squarespace, without using separate blocks • Beatriz Caraballo but it isn't working for me.

I suspect that it may have something to do with fluid engine and I am not targeting the block correctly, as if I reference this block in CSS and try to customise, nothing changes. I know I am doing something wrong - can anyone confirm that the referenced article should be the correct way for 7.1 FE or have things changed?

The section I am trying to adjust is just a blank section with a text block in it. 

CSS from article for reference:

/*MULTIPLE COLUMNS ON SCREENS LARGER THAN PHONES*/
@media screen and (min-width: 640px) {
  #block-XXXXXXXXXXXXetc {
    column-count: 2;
    column-gap: 60px;
  }
}

Thank you.
Edited by Alasana
  • Replies 3
  • Views 2.9k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted
2 minutes ago, Alasana said:

Hello, I am trying to set a text block in SS7.1 (fluid engine) to have columns and dynamically flow the text from one column to the next so that a large text block is easy to read. I referenced this tutorial How to create a multi-column text block in Squarespace, without using separate blocks • Beatriz Caraballo but it isn't working for me.

I suspect that it may have something to do with fluid engine and I am not targeting the block correctly, as if I reference this block in CSS and try to customise, nothing changes. I know I am doing something wrong - can anyone confirm that the referenced article should be the correct way for 7.1 FE or have things changed?

The section I am trying to adjust is just a blank section with a text block in it. 

CSS from article for reference:

/*MULTIPLE COLUMNS ON SCREENS LARGER THAN PHONES*/
@media screen and (min-width: 640px) {
  #block-XXXXXXXXXXXXetc {
    column-count: 2;
    column-gap: 60px;
  }
}

Thank you.

Can you share your website URL? And tell me where do you want apply this?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

  • Solution
Posted

I believe I have solved this. I put in different syntax. I changed it to  .fe-block instead of  #block as per below. Now it is working.

.fe-block-319fe46991029a14bcac

  • Alasana changed the title to How to create two columns of text so the text flow wraps

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.