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


Expert ID

Found 53 results

  1. Site URL: http://www.bbarinaga.com Hello, I am on 7.0 and am attempting to simply make one individual summary list (grid) switch to 2 columns on mobile. I have used the following code and it works, but the change is applied to all summaries and I only need it for this one: https://www.bbarinaga.com/portadasebooks @media screen and (max-width:640px) { .sqs-block-summary-v2 .summary-item.positioned { width: 50% !important; position: static; } .sqs-block-summary-v2 .summary-item-list { display: flex; flex-wrap: wrap; flex-direction: row; } } Can someone help me? Site URL: https://www.bbarinaga.com/portadasebooks https://www.bbarinaga.com/portadasebooks password: 1234
  2. 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
  3. 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!
  4. 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
  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: https://www.shopfamilypop.com/ is it possible to make my product page 2 column wide and close together in mobile view?
  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. 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!
  11. 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!
  12. 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
  13. 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!
  14. 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.
  15. 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
  16. 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.
  17. 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
  18. 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
  19. 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!
  20. 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!
  21. 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
  22. 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
  23. 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; }
  24. 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!
  25. 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
×
×
  • Create New...