Jump to content

Search the Community

Showing results for tags 'columns'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hello! How can I have 2 columns on mobile view instead of just 1 column? Appreciate your help! my site, https://www.manuelrickenbacher.com
  2. https://beehyve.squarespace.com/payment-policy I want to add a sticky sidebar (made of various blocks) and apply it to multiple pages. In 7.1 classic editor, I could make the sidebar blocks collectively sticky by targeting the column within the section, using the code below. Super quick and easy. Is there a way to do this in fluid engine? Feels a lot cleaner than having to target each block for different top heights, especially as I want to add it to a few pages. section[data-section-id="...."] .sqs-layout > .sqs-row > .sqs-col-3 { position: sticky!important; position: -webkit-sticky!important; top: 140px; z-index: 99999; } Thanks all!
  3. Site URL: https://www.buenorodrigo.com Hello! Can I have 3 columns on desktop and just 1 column on mobile version? Appreciate your help! my page https://www.buenorodrigo.com
  4. I'm trying to get a few images in a blog post to be in 2 columns on mobile. I've successfully used this code on other blog posts like this one https://www.hvmc.sg/blog/christmas-peace (it's the profile photo at the end) to reduce the width of the top block and float it to the left so that the block below it comes up beside it (attached image). width: 145px; float: left; But I can't get it to work on another post I'm doing. It's currently in draft so it's not live. But can anyone give me a generic code that I can modify for any blog post? This is what I tried but it didn't work: #block-yui_3_17_2_1_1673946610225_4679, #block-yui_3_17_2_1_1673946610225_6394 { width: 50% !important; float: left !important; } The blocks do become 50% but remain vertically stacked i.e. they don't become 2 columns. Hope you can understand without a live example!
  5. 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
  6. I have three portfolio pages on my site including the home page. I want to be able to display 2 columns in one (ie: 2 featured images to represent the two portfolio in that particular group and on the home page and 3 columns in another (ie: 3 featured images). However, it seems that if I set the section to have 3 columns on one portfolio page it defaults to 3 in the others. Is there a way to stop this? I'm not familiar with a lot of custom coding but if there is code I can use to override the SS default I'd appreciate some help with what custom code to use and advice as to where I should add it. Thank you.
  7. Hello! By using custom CSS in Squarespace 7.1 with the Classic editor, it's possible to control the number of columns by the width of the screen. As an example, the images on this site, appears in: one column on mobile (below 450px) two columns on tablet (screen size between 450 and 980px) four columns on desktop (screen size wider than 980px) This is controlled by the CSS coding below. My question is: With the Fluid Engine, is it possible to do something similar (with or without custom css)? /* Bildemenyer - Two column on tablet and mobile*/ /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { @media screen and (max-width: 980px) { .span-12 .span-3 { width: 50% !important; float: left !important; } } /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { .span-3 .sqs-block-content { width: 100% !important; } } } /* End- Bildemenyer - Two column on tablet and mobile*/ /* -------------------Bildemenyer - one column below 450px--------------*/ /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { @media screen and (max-width: 450px) { .span-12 .span-3 { width: 100% !important; float: left !important; } } /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { .span-3 .sqs-block-content { width: 100% !important; } } }
  8. Hiya, I'm trying to make two columns on mobile view for this website, however as this is not a product page I'm struggling to find anything online to help me. Any tips? Thanks in advance!
  9. Hello everybody, I would like to split some text in two columns. I am translating everything on my blog so I want one column in English and the other one in French. I watched a tutorial on how to split text in columns using code but if I do this every single post will have the text split into two and I only want that for a specific blog post. I tried adding an image with the splitted section but I do not like how it looks so I want to do it directly on the page. Is this possible? I will show you in the images below. Thank you for any help! Marti
  10. Site URL: https://emilie-iggiotti.squarespace.com/the-truth-in-you I saw this effect recently on a website (https://www.violahillstudio.com/) where the contents of two columns are vertically centered without using spacers. I've tried inspecting the code of the website and can't figure out how to achieve the same effect on a client's website. URL: https://emilie-iggiotti.squarespace.com/the-truth-in-you Password: emilie What I'm trying to do is in the index where the image block and text block appear beside each other, I would like to vertically center align the contents rather than have them align to the top of the index and have this effect maintain down to a screen size of 640px, after which the blocks stack on top of each other. I would ideally like to achieve this without the use of spacer blocks. I've attached an image that might help to explain this better. Any guidance would be greatly appreciated!
  11. Hello, I'm looking for a code that would allow me to display the people/lists on this page as two columns on mobile instead of one on mobile. Thanks so much! It is technically a "list" page that includes an image, description & button. I would like for all of these to show in two columns. I'm using Squarespace 7.1 Page: https://www.theparlorhuntsville.com/stylists
  12. I'm trying to add two columns of text on top of an image (example below). So far, I'm able to add one column, but the text is too long and gets hidden. Here's the CSS I'm using for the block - what should I be doing instead? #block-yui_3_17_2_1_1671828143587_6040 p {column-count: 3; column-gap: 5%; column-fill: balance; text-align: left; text-size: 0.5em}
  13. Site URL: https://kolea.tv Hi I would like to increase my index grid to a row of 4 columns. Any help would be greatly appreciated. Dave
  14. Hey there, I am trying to create a "forced hamburger" Menu, which I was able to do using a bit of CSS from another post. Now I am Trying to get the navigation into multiple columns. This is the menu we are trying to emulate from Onyx Coffee. We don't have as many Items but are looking to have 4 columns:
  15. Hello, I made a useful calculation formula in excel and want to make it available for all my friends so they can use it. Is there any function that I can add such thing to my square space website? The formula I made looks like this: =(C23+D23)*D9/E9 On my website, I would like to make it in such a way that people can fill in numbers in some columns so the tool calculates it automatically.
  16. Hi there, I have a simple 4 column layout in one of my page sections where there are images, text, and buttons. Right now, the first column has less heading text than the other three, which is making the button below it higher in just that one column. I know I could change just the bottom margin in that block as a temporary fix, but all the content may change from time to time. Is there a way to get the buttons to stay in the same alignment no matter how much text there is above them? I know Flexbox automatically makes equal height columns, and I actually have the section flexing on tablet view so this problem isn't happening there, but for when I try to apply display:flex to the full screen view, it's not affecting how the columns look. URL: https://www.youbelongsd.com/welcome-ybh#home-learn-more Thanks!
  17. Every template I look at has a single column going down the middle. I would like two columns of text. I appreciate any help you can offer.
  18. Hi there, anyone know if there's a bit of code, or a work-around, for having a different number of gallery columns between the desktop or mobile presentation? I'm using the 'masonry' grid and if I change the column count it effects both presentations. Thanks, Mike.
  19. Hi all, the desktop versions opens as 3 columns on most computers and thats great. I need the mobile version to open as 2 columns on most phones... showing 1 long column is bad for me... can someone please help me? many thanks!
  20. Hello, is it possible to add an additional column to the Fluid Engine grid? I would like to have three 1:1 aspect ratio square text blocks on this page, but I can't center the middle one, and with one space between each text block I'm left with a misaligned layout. I'm open to any solutions you guys might have for this, and thank you for your help!
  21. I'm trying to get the offers images equal so everting beneath them align properly no matter the screen resolution.
  22. Is there no tablet view with fluid engine? How are we supposed to design for this format? Good lord.
  23. I would like to have three columns in my form, under "Coffee Shop Supplied", so that users can input information for multiple roasts within one form submission. For example: Roastery Name * Coffee Shop Supplied * Column One. Column Two. Column Three. 1. Roast Name 2. Roast Name 3. Roast Name 1. Origin(s) 2. Origin(s) 3. Origin(s) 1. Process(es) 2. Process(es) 3. Process(es) 1. Notes 2. Notes 3. Notes How do i do this?
  24. Hi - I'm having trouble styling sections & blocks. I've inserted code to do two things: 1. reverse the display order on mobile (using section id) 2. split the text into 2 columns on desktop/laptop (using block id). The site is https://spinach-crow-ktsp.squarespace.com/publications-speaking I've inserted this code for the "Publications" section of the page: @media screen and (max-width:767px){ section[data-section-id="635c34bedeb2fd442065ab8f"]{ .sqs-row{ display: flex !important; flex-direction: column-reverse !important; } }} #block-yui_3_17_2_1_1666977167775_361208{ @media screen and (min-width: 768px){ -webkit-column-count: 2 !important; -moz-column-count: 2 !important; column-count: 2 !important; -webkit-column-gap: 60px !important; -moz-column-gap: 60px !important; column-gap: 60px !important; }} but it doesn't work (I've checked in Chrome / FF / Safari on Mac desktop, and Safari on iOS). Any ideas are greatly appreciated, as from what I can tell the code and block/section ids seem correct. Site is password-protected with password kralowec. Thanks!
  25. Hi, Here is the page I'm trying to adjust: https://www.onyxmodelmanagement.com/merch I'm trying to make the products show up in three columns on mobile, instead of two. Can someone help me? Thanks!!
  • 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.