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

Search the Community

Showing results for tags 'columns'.

More search options

  • 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
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

Found 52 results

  1. Site URL: https://cat-wedge-xh9c.squarespace.com/about I have two gallerys on my 'About' page - one for staff and one for our BOD. I want only one of these - the BOD - to display in three columns on mobile. By using this code : @media screen and (max-width:800px) { .gallery-grid-wrapper { grid-template-columns: repeat(3,1fr) !important; grid-row-gap: 3vw !important; } } I can change it to three columns, but it changes both of the blocks on the page. Can someone tell me how to just specify that one section that I want to change? Thanks! Website: https://cat-wedge-xh9c.squarespace.com/about
  2. Is it possible to have a slideshow gallery in 7.1 inserted into a column (2-column width page) - any help on this would be much appreciated!
  3. Site URL: https://oriole-grasshopper-yxhx.squarespace.com/ Hello, I'm looking for some help in customising my navigation. Ideally replicating what I am able to create in my footer; 4 columns that are responsive in line with my content on the page. Check out my URL and you will see that I am using a 4 column grid for imagery, and I would love my navigation to follow suit. Currently I am playing around with padding, unsuccessfully. Any help would be greatly appreciated 🙂 . Thanks! Ryan
  4. Hi there, Does anyone know how I can use Squarespace 7.1 to re-create the 'SERVICES' section of this website: https://www.ryzeagency.co.uk/. Effectively I'm after four horizontal columns with an image and text overlay. I also attached a screenshot to help explain this further. Many thanks!
  5. Site URL: http://www.RebeccaCantCook.com Hi friends, I'd like my mobile view to more closely match my desktop and I need some help. I'm on a Brine template so turning off mobile doesn't seem to be an option. I added some CSS code to give more blog post thumbnails per line but that's about all that has worked for me so far in adjusting the mobile spacing + columns to mimic desktop. I got my category section (a grid gallery of 3 images) to show in 2 columns but I'd like them on one line (so 3 columns for that block) is that possible? The rest of the home page banner blocks stack for the mobile default but I'd like to bring them back to a 2 column view they are on desktop but they don't seem to be responding to the gallery oriented code I found. Can anyone help? This is the css code I currently have that has fixed the blog section: @media only screen and (max-width: 640px) { .sqs-gallery-design-autogrid-slide { width: 33.3% !important; padding: 3px!important; clear:right !important; } } Attached are images of my desktop view and how mobile is currently translating.
  6. Site URL: https://www.elevateptr.com/ Hi - is it possible to add css to this text box that I added columns to so on mobile the block shrinks and looks better vs. the letters wrapping like the attached image?
  7. Hello! I am building a site using the Hester template and it won't let me add more than four columns to my product page. I would like to display 6 or 7 products per row instead of the four. Is there someone who could help me with this? Thanks! David
  8. Site URL: http://daisyedwardsaudio.com All of my site is stacking as expected on tablet view & smaller browser windows, except one section on my home page where the image and text stay side by side. This means the image remains small and square on the left hand side with a lot of blank space below it, while the longer text is extended down the right hand side column alongside the blank space. It was stacking fine until I made some other unrelated text edits to the same page, is there a solution I can use to force stack these items when on iPad/reduced width screens? Thanks!
  9. Site URL: https://hugseat.squarespace.com/ Hi guys, I am trying to split my Index Page in Brine in 3 identical text columns, each customizable with its own text. I got it to split in three, using CSS (see code below). However, it doesn't scale properly on various screen sizes. For now, it seems to work on desktop screens from 13" upwards. However, smaller than that, it doesn't scale and creates white space under some of the blocks (see print screen). Also, on tablet view it becomes a big mess. Is there anything I can do to make it more responsive? It would be great if I can force the text blocks to appear underneath each other on tablet view, instead of next to each other as on desktop. Any suggestions? //**CODE USED**// #hm-5 .Index-page-content { padding-left: 0px; padding-right: 0px; padding-bottom: 0px} #hm-5 p {color: #ffffff; font-size: 15px} #hm-5 h1 {color: #ffffff; text-decoration: overline} #hm-5 h2 {color: #ffffff; font-size: 23px; font-weight: 300} #block-5f16cf2432edb9779e1644a6 { background: #CFA913; padding-left: 80px; padding-right: 80px; padding-top: 50px; padding-bottom: 100px; } #block-yui_3_17_2_1_1595330356097_4472 { background: #4b4d54; padding-left: 80px; padding-right: 80px; padding-top: 50px; padding-bottom: 100px; } #block-yui_3_17_2_1_1595330356097_5424 { background: #B5B4B1; padding-left: 80px; padding-right: 80px; padding-top: 50px; padding-bottom: 100px;}
  10. Site URL: https://www.shopfamilypop.com/ is it possible to make my product page 2 column wide and close together in mobile view?
  11. Does anyone know how to display the Instagram block as 3 columns in mobile view? Our Instagram feed is reliant on 3 images being showed side by side, so when SS automatically converts it to 2 columns - it breaks the flow of it entirely. Using the Brine Template - have attempted CSS code but it appears the block natively converts to 2 columns regardless.
  12. Hi! I'm building a product page in 7.1 I would like there to be a single column of products. Current options are 2, 3 or 4 columns. is this possible or impossible? Many thanks, Charlie
  13. Site URL: http://fakoshimaesentai.squarespace.com Site URL: http://fakoshimaesentai.squarespace.com Hi everyone, I am trying to create a 2 column grid on mobile using css, but the codes that I found do not work for me. I used custom css to create "swap of hover" images, and Now I need to put everything in 2 columns. Another thing is that I need to put a text box and a button underneath each image. If someone knows how to figure it out please help. Appriciate. The page I need to figure out -https://fakoshimaesentai.squarespace.com/290405038627 Thanks! @tuanphan I ve seen that you are an expert when it comes to this problem, maybe you can help? thanks!
  14. Site URL: https://www.cogenten.com/our-team Greetings All, I am happy with my 'campy' page for 'Our Team'. But I would like to include additional team members in the same row. I don't see a mechanism for doing that. Thanks for your help!! Paul
  15. 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?
  16. Site URL: https://www.alceasurrogacy.com On the home page, I'm trying to lock the blue buttons on the bottom in the 3rd section to make them all even no matter the width of the screen. The 3 column layout gives me trouble since the text is different lengths. I tried adding a new section with the buttons but they won't line up on mobile. I'd love any help you can provide. (Don't know if this is a CSS fix or if Squarespace has a solution, but I can't find anything about this online!) Password is umlautagency - going live on 6/30
  17. Site URL: https://turtle-groundhog-6gtg.squarespace.com/ I have a section of four poster image blocks on a homepage that I would like to appear in two columns (so they appear as 2x2), not stacked (1x4), when viewed on mobile devices. I can get them to appear at the desired smaller size in mobile with some css code I've added, but they're still stacked, one column wide, one on top of the other. Any advice on css changes/additions would be appreciated! https://turtle-groundhog-6gtg.squarespace.com/ pw: mockup Thanks!
  18. Site URL: https://sponge-seal-64fn.squarespace.com/config Hi, I would like to put two columns for the drop down menu. I tried to use the code from this thread but I can't make it work. I used this code: [href="/shop"]+.Header-nav-folder { column-count: 2; }
  19. 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.
  20. Site URL: https://www.dubnermoderne.ch/available-works-under-2000 PW:test https://www.dubnermoderne.ch/available-works-under-2000 Is there some way to have this one page and just this page either: -Display 2 columns in Mobile view or -Display the mobile view the same as in desktop view
  21. Site URL: https://www.lynnemeade.com/ I'm having an issue with display of related products in an online shop to be launched soon. The SQSP version is 7.0 and the template is Avenue. The three related products display next to each other horizontally similar to the computer desktop view, rather than stacking vertically in a single column. My understanding is that images stack vertically on mobile in the Avenue template, except in some blocks like summary carousels which stack in two columns. (I'll address an issue with that display in a separate question.) The resulting display of product images and text is too small for a user to see and read well, particularly on mobile phones. On mobile phones, I'd like each related product to stack vertically with the product title and price centered below the product thumbnail. The product title and price may require left justified styling for longer titles. I'll have to test the best overall text styling once the related products display vertically stacked. For now, I've set the "Details Alignment: Center" in site styles. The tablet display is problematic as well, even more so in portrait mode. I'd prefer to keep the three related products in one row horizontally rather than creating two columns. I noticed that the related product images and text don't span the full length of the screen inset. Perhaps changing that would help on tablets in both portrait and landscape mode. To see the display issues, I've attached two screenshoots of the current horizontal mobile phone display and one of the tablet display. The web site is Lynne Meade Ceramics. Code from two related-products questions Displaying 2 columns / Related Products / Mobile and Limit the number of related products didn't correct the display issue. My being new to custom CSS is hampering the effort. I'd appreciate any pointers on how to resolve this display problem. Kindly, K
  22. Site URL: https://www.redstonegraphics.com/ My footer correctly shows both columns side by side on desktop view, but on mobile view it's stacking them on top of each other.
  23. Hi guys, I'm trying to make my product / commerce page 5 columns wide, as we sell all of our products in 5 different varieties and it will look much neater! Unfortunately it seems that I can only set to a maximum of 4 columns in the store format settings - does anyone know how I can adjust this to get 5 columns? Thanks in advance!
  24. Site URL: http://www.frotteedimare.ch Hey there I use Brine template and Squarespace ver 7.0. I successfully customized my footer to display the blocks in columns. Upper block is set to display: none. The css code right now looks as followed: /*footer colum design*/ @media screen and (min-width: 640px) { .Footer-inner { display: flex; } .Footer-blocks--top, .Footer-middle, .Footer-blocks--bottom { flex: 1; } .Footer-blocks--top {display:none;} .Footer-middle, .Footer-blocks--bottom { flex: 1; display: flex; flex-direction: column; justify-content: left; } #footerBlocksBottom { padding: 0px } } For now this setting looks great on mobile: But when i add more pages to the footer naviagtion ("Information"), the 3rd nav title ("© 2020, FdM") will automatically jump to the right side: Now my question would be how i should change/extend the code to force the 3rd nav title on mobile to stick to the left side? Appreciate any help! Best, J
  25. Site URL: https://www.core4.com.au/home-1 Hi there, Squarespace 7.1 user. I am trying to make my code block with the 3 results column view for desktop but they are stacking on top of one another. Does anyone know why my code keeps stacking rather than sitting next to each other? Also why the icons arent appearing. Screenshots attached and code below. HTML <div class="content-103"> <div class="container"> <div class="row"> <h2 class="sercies-title">Our Awesome Services</h2> <div class="col-md-4 col-sm-4"> <div class="service-post"> <div class="service-content"> <div class="service-icon"> <i class="fa fa-share-alt"></i> </div> <!-- service-icon --> <h3 class="service-title">Advertising</h3> <p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p> </div> <!-- service-content --> <div class="service-hover"></div> </div> </div> <div class="col-md-4 col-sm-4"> <div class="service-post"> <div class="service-content"> <div class="service-icon"> <i class="fa fa-pencil"></i> </div> <!-- .s-icon --> <h3 class="service-title">Branding Design</h3> <p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p> </div> <!-- service-content --> <div class="service-hover"></div> </div> </div> <div class="col-md-4 col-sm-4"> <div class="service-post"> <div class="service-content"> <div class="service-icon"> <i class="fa fa-lightbulb-o"></i> </div> <!-- .s-icon --> <h3 class="service-title">Creative Marketing</h3> <p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p> </div> <!-- service-content --> <div class="service-hover"></div> </div> </div> </div> </div> </div> CSS .content-103{ background: #f3f3f3; padding-bottom:50px; } .content-103 .sercies-title{ text-align:center; padding: 50px 0; } .service-post { background: #fff; padding: 30px; text-align: center; cursor: pointer; position: relative; z-index: 12; margin-bottom: 30px; -moz-box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08); } .content-103 .service-content { position: relative; z-index: 13; } .content-103 .service-icon { margin: 10px 0 20px 0; width: 50px; height: 50px; border-radius: 25px; text-align: center; border: 2px solid #eb7a5c; margin-left: auto; margin-right: auto; line-height: 50px; -moz-transition: color, 250ms; -o-transition: color, 250ms; -webkit-transition: color, 250ms; transition: color, 250ms; } .content-103 .service-post:hover .service-icon { border-color: #fff; } .content-103 .service-icon i { font-size: 18px; color: #eb7a5c; } .content-103 .service-post:hover .service-icon i { color: #fff; } .content-103 .service-title { font-size: 16px; font-weight: normal; margin-bottom: 15px; -moz-transition: color, 250ms; -o-transition: color, 250ms; -webkit-transition: color, 250ms; transition: color, 250ms; } .content-103 .service-post:hover .service-title { color: #fff; } .content-103 .service-description { -moz-transition: color, 250ms; -o-transition: color, 250ms; -webkit-transition: color, 250ms; transition: color, 250ms; } .content-103 .service-post:hover .service-description { color: #fff; } .content-103 .service-hover { position: absolute; top: 0; left: 0; z-index: 11; width: 100%; height: 0px; background: #eb7a5c; -moz-transition: width, 250ms; -o-transition: width, 250ms; -webkit-transition: width, 250ms; transition: width, 250ms; } /*hover-background-color effect*/ .content-103 .service-post:hover .service-hover { height: 100%; } Thank you
  • Create New...