Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'columns'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • 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. 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!
  2. Site URL: https://www.werror.com.au/ I want to have two columns for my grid in mobile view on my home portfolio page. How can i go about this?
  3. Hi Team, Mobile CSS hack request pls 💭: I would like to change a collection of 9 text blocks (within a collection), so they appear side by side on mobile vs. as one column of 9 rows (attachments show desktop vs. mobile views). Has anyone been able to create code this for a specific collection, please - also without impacting other collections? My hack below isn't working. @media only screen and (max-width:640px) { #collection-61bf528042424e65709dee0a.user-items-list-simple:not([data-num-columns="1"]!important) { grid-template-columns: repeat(3,1fr)!important; grid-gap: 10px!important} .list-item-content__title{font-size: .8rem!important} .list-item{padding: .8rem!important} } Many thanks 🙂 Lu
  4. Site URL: https://gopher-ferret-5s33.squarespace.com I'm trying to adjust the mobile pages for my website, "Luxury Picnic Packages" and "Luxury Event Packages". I want there to be 2 columns for the mobile version and I'm unable to figure out how to change it, I tried editing the code and it won't seem to work.
  5. @media only screen and (max-width: 767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 2vw; grid-row-gap: 4vw; padding: 0; } } On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))". If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical.
  6. Hey, I would really love to know how to have 2 different accordion blocks appear side by side on mobile view or how to have the items from a single accordion block listed side by side in 2 columns.
  7. Site URL: http://www.jessicamiller.work How can I reorder the testimonial section on the homepage for mobile so that it's image/text/image/text? I have tried the code below, but I don't think it's working because I have spacers on either side of the testimonial. The 2nd testimonial is what I want to switch on mobile, but the column layout is space/text/image/space. Is there a way to reorder the columns so that it's space/image/text/space? Thanks //Reverse block order on mobile [data-section-id] { .content-wrapper { padding-top: 0!important; } @media screen and (max-width: 767px) { .sqs-row { display: flex; flex-direction: column-reverse; } } }
  8. Site URL: http://copper-bullfrog-28wb.squarespace.com Hello! How could I add two columns on the footer of the phone version so the Instagram icon appears next to the links, instead of below? Thank you so much in advance!
  9. Site URL: https://www.themeaningwell.com/ On desktop the gallery is 3 columns here, but in mobile view it becomes 2 columns. Is there a code I can place in the CSS to make it three columns in mobile just like in the desktop view? Thanks so much for any help.
  10. Hello - please can you help!! I would like a form that firstly, has the titles hidden. I'm using this code for that: .form-wrapper .field-list .field { margin: 0px 0px 11px 0%; } .form-wrapper .field-list .field .option { /* Show radio buttons side-by-side */ display: inline; margin-right: 5px; } .sqs-block-form .field-list .title { display: none; } which works perfectly. What I'd then like is: Left Column: Text Field (for name, but I dont want the First Name, Last name, so just a text box is fine) Text Field (for phone number, but the SS phone number doesn't validate UK numbers) Email Right Column: Text Area Captcha Submit button Help is greatfully received!!! Thanks in advance, I've been pulling my spanners out about this!!!!
  11. Site URL: https://www.yespeach.com.au/ Hi, Could someone help me please? I have images on my page with text. The text is 'heading 2'. Problem 1 When the width of the page is getting close to changing to mobile the text is too big and gets split over two lines. Can I make the site change to mobile sooner so the images don't stay in four columns and get too small? Problem 2 In mobile, the image is huge! Can I make the images be in two columns, rather than one? so 2 images over 2 lines. Thank you in advance!
  12. 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
  13. Site URL: http://urbanvanitylounge.com I am trying to update my team page and make it into 2 columns for the mobile version instead of 1. I have tried looking through and adding different codes that others have suggested but nothing seems to be helping, if anyone could help me out that would be greatly appreciated. The website does have a password: Urban2022!
  14. Site URL: https://outdoorswelearnmadison.com Hi! Does anyone know how I could apply CSS to remove the white space in this list in Mobile view? It is in a two-column format, and the space shows from the bottom of first column in mobile. Your help is greatly appreciated!!
  15. Hello, Under the section 'Fine Art' of my website I have a series of photos that are set up in columns of 3 for desktop. Currently in mobile view the columns are set up for 2 columns. Is there some css code that would be able to show the photos in only one column for mobile only? I also would like to keep the spacing between images the same or similar. Thank you! URL: jordanbellvisuals.squarespace.com Ps: water1234
  16. Site URL: https://submittolove.squarespace.com/ Hello I am trying to get pages where I have created columns with spacer blocks or by having images and text side by side, to stack underneath each other, they do on a mobile but on a tablet they remain in columns. I also need this for a page where I have used a summery block displaying as a grid which i would like to stack underneath each other rather then a row of 2. These are the pages: https://submittolove.squarespace.com/contact https://submittolove.squarespace.com/the-team https://submittolove.squarespace.com/projects-landing-page This is the password to view the site as it's not live yet... submit*
  17. Site URL: https://www.crush-palace.com/team Hi there! I have a staggered layout that is not working on mobile, I need the image to come first and then the text. I've used all manner of code and it does nothing. https://www.crush-palace.com/team Password is groovy. Any help is appreciated, thanks!
  18. Site URL: https://www.davidplaisant.com Pass: cagliari Hey everyone, could someone help me fixing this? In the archive section the grid is not alligned I don't know why! Thanks in advance
  19. Site URL: https://cobalt-fennel-xn4n.squarespace.com/experience-1 I am building a site on version 7.1. I am creating a page to showcase several client logos. I used code blocks to add each logo so that they are evenly sized. I would like the logos to show up in a two-column vertical list when viewed on mobile. Can anyone assist with this? Password to the site is gcre2022
  20. Site URL: https://gold-orca-rg9s.squarespace.com/config/ PW = Antero2022 Please choose 'Sjekkliste' from meny in order to access form. There is a list of radio-buttons which I want to disperse to two columns instead of one long list... Thank you for taking the time to help me with this!
  21. Site URL: https://www.cleinsurancebrokers.com/get-instant-quote Having difficulty with the products showing in 2 (or even 3 columns) on Mobile vertical view. I've tried different codes and got it to work on other pages but am just stuck on this one. Can anyone please assist? Thank you! https://www.cleinsurancebrokers.com/get-instant-quote
  22. Site URL: http://eddysummers.com.au I've been working on my site thus far in Desktop mode. I created some galleries whereby the columns are 3 across. I noted on Mobile when viewing these galleries it's actually displaying then as 2 columns. I had a tinker about but could not understand or see a way to make a gallery display a certain amount of columns for when viewing on desktop vs viewing on mobile. In my instance Mobile would make more sense to just reduce the columns from 3 across to just one (so that the viewer swipes up or down to pan through the images etc). I'm guessing to resolve this some coding might be needed?
  23. Site URL: https://octahedron-cow-psze.squarespace.com Hello! I'd like to align two blocks of text side by side in the mobile version of my website. I can do it on the desktop version but when displayed on mobile the blocks of text stack on each other.
  24. Site URL: http://vividbooths.co.uk I have a staggered layout (works well on desktop), but 2 pages on my site need the second row column order reversed for mobile view. http://www.vividbooths.co.uk First is in my home(index). Page title is 'cascadinginfo' and the second row displays 'weddings' section using a card block on the right column, with a separate associated image displayed on the left column. Mobile view results in the 'weddings' associated image preceding the card block 'weddings' , but for continuity, I need the column reversed for mobile view. I've searched this site extensively. Lots of users have similar problems, and remedial code that should work for me looks like this; @media screen and (max-width:640px) { div#yui_3_17_2_1_1589993939235_232+.row.sqs-row { display: flex; flex-direction: column-reverse; } div#yui_3_17_2_1_1589993939235_306+.row { display: flex; flex-direction: column-reverse; } } Or this; @media screen and (max-width:640px) { /* cascadinginfo-columnreverse */ div#block-yui_3_17_2_1_1593356729679_4534+.row { display: flex; flex-direction: column-reverse; } } Neither is working for me, and I am concerned that I am not sourcing the correct id's from the inspect element on my site because it's not clear to me which one to use. The row id that specifically targets this 'weddings' section is dynamic and can't be used. My second page is the bookings page https://www.vividbooths.co.uk/booking-page The text is hidden unless viewed on a mobile (because I am using accordion text for desktop), but the same issue on the second row. The 'Choose Your Package' card block appears after the associated text.
  25. Site URL: https://www.johnliquoriphoto.com/pricing Hello, I have a page on my site that I am happy with in the desktop view, but would like them to appear as two columns in the mobile view rather than one continuous column for a portion of the site so that it looks consistent with the desktop view. The top section and bottom section ("High-End Professional Photos" and "An additional fee may be charged for properties exceeding 25 miles from Marlton, NJ") should just be the one centered column, but I would like the "Add-ons" and "Bundles" sections to be shown as 2 columns in mobile view similar to desktop view. Would anyone be able to help me with some custom CSS code for each of these pages? https://www.johnliquoriphoto.com/pricing This would be super helpful. Thanks in advance!
  • Create New...