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


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges

Found 45 results

  1. 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!
  2. 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!
  3. Site URL: https://www.resort247.shop/ Hi! Does anyone know how to make the column width in between each product smaller. I have already adjusted it to the lowest value on the content block format, but I guess I will need custom css coding to make the column width even smaller!
  4. 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
  5. 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?
  6. 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
  7. 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!
  8. 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; }
  9. 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.
  10. 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
  11. 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
  12. 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.
  13. 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!
  14. 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
  15. 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!
  16. 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
  17. Hi all, I'm using the Paloma template for my website gohoopday.com. If you scroll down to the sixth fold, you'll see tons of logos. On mobile, these stack (1 per row), which isn't very mobile-friendly. I am trying to get 2 or 3 per row for mobile. On a previous site with a different template, I used a formula similar to the ones listed in the link below, but on this template it's not registering. https://forum.squarespace.com/topic/64554-create-more-than-2-columns-in-mobile-for-grid-gallery/ I've tinkered around and tried this, but it only pushes the logos to the left rather than creating 2 columns. @media only screen and (max-width: 640px) { .gallery-grid-item { width: 50% !important; } } I am wondering if it is because this is a gallery page vs an image gallery. Anyways, I cannot figure it out - please let me know if you can help! Max
  18. 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*
  19. Site URL: https://www.casegoods.in/ Good morning, password to reach the site : CaseGoods_C3 I'm trying my best to make a landing page with a relatively complex layout (with the help of spacers that would work well on all devices (screen, tablet, phone) but I'm not very happy of a few texts columns that are nice and wide on the screen version but become to narrow on the tablet version. The phone version automatically resize everything for the screen width so no issues with that version mostly. Therefore I would like to try making the tablet version exactly like the phone version with all blocks rearranged one after another to see if it's visually better. I tried messing a little bit the "mobile breakpoint" parameter in the Site Styles but it only affects the Header, not the content of the page. Attached images of the current 3 versions of the landing page. Is there a simple way to make this trial via the custom CSS ? I'm working with the Brine template.
  20. Hello So, I was adding the prices for the products in my website. Now I want to add another column - number of pieces. Now it does add but on the UI it comes as a drop down. Is there a way to not add that as a drop down and it just shows the value as it is. Thanks in advance!
  21. Can someone help me understand why this five column section isn't sizing evenly? What kind of CSS should I insert to fix this? URL: https://caper-robin-ljl7.squarespace.com/agri-best-supplements pw: strauss
  22. 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 This is the password to view the site as it's not live yet...
  23. Has anyone had any coding luck maintaining two columns at the 576 breakpoint when using the masonry grid? I've found plenty of answers for the grid-only, but not masonry. Is this even possible based on how the images reorder at that size? Thanks
  24. 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
  25. Site URL: https://www.boutique14.co.uk/home1 Hi, trying to configure the footer navigation. I am happy with a centered stacked layout on desktop, but on mobile it's all bunched too closely together and I'm concerned about accessibility because the links are too close together. It would be good if on mobile only I could either space the links out more, or use columns. I'm messing about with this CSS: @media screen and (max-width: 640px) { .Footer-bottom { layout: columns } } It doesn't work. Could do with some help please. Thank you.
×
×
  • Create New...