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

Search the Community

Showing results for tags 'grid-summary'.

  • 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: http://handprint.io Summary block (grid layout) on homepage is skipping the first position of the grid. It's displaying all the correct blog posts (currently set to 6), but starts on the middle column and leaves a white space where the first post should have been. I've tried changing all the settings within the summary block, but nothing fixes the problem. I did discover, however, that adding a summary block directly above it causes the second summary block to display correctly, while the one above it then has the problem. Does anyone know what's happening? I'd be so grateful for some help! Cheers
  2. 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
  3. I've tried every solution I could find here on the Circle forum, but none are working! page: https://theveil.squarespace.com/nfk (scroll down to "Upcoming Events" section) template: Royce I've got a Summary Block displaying Events, filtered by Category. When nothing matches the filter criteria, there is just a big black space on the page. I'd prefer it to automatically display text when the summary block is empty, like "There are no upcoming events at this location." Note: The Upcoming Events section on the page is actually a page (/nfk-events) nestled within an Index Collection (/nfk), in case it matters. Anyone have ideas / updates to the old solutions for this? (https://forum.squarespace.com/search/?&q=empty summary block&search_and_or=and&sortby=relevancy)
  4. I have a website I'm working on for a client where I have a summary block for their calendar on their events page. Right now its set as a "list" in the summary block, and I like the way it looks on the computer, but would like to switch it to "stacked/grid" view on mobile so the thumbnail image is above the info as opposed to being kinda small and on the left taking away space from the text. Is there a way via CSS to switch the summary block mode in a media query? Due to contractual obligations I need to keep the beta site locked and can't share it, but shouldn't matter as its a general question, nothing specific to any "item" on a specific site...
  5. Site URL: https://lakerenfaire.com/virtual-faire-invite Good Evening Squarespacers! I am working on a gradient overlay for a grid summary block and have successful positioned the Title and Excerpt over the images in the summary block. I cannot seem to get them to display on hover, however, and the website only displays the gradient and transition, but not the text. I feel like this is close but I am missing something. Here is my code: <!-- Rollover Image Effect --> <style> .summary-item img{position: relative; transition: all .5s ease!important;} .summary-content { position: absolute; color: #ffffff !important; top: 50%; left: 50%; opacity: 0; pointer-events: none; transition: all .5s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);} .summary-title, .summary-metadata-primary, .summary-metadata-secondary, .summary-excerpt {color: #fffff !important;} .summary-item:hover img{-webkit-filter: brightness(50%); filter: brightness(50%);} .summary-content:hover {opacity: 1 !important;} </style>
  6. Hi everyone! I helped work on a website with an e-commerce page. I created an index page with a grid summary to the shop, newsletter, and footer so we could keep the design uniform across the site. When you click on a product, there is a breadcrumb above which takes you back to the shop page rather than the index. Is there a way to change this? The reason being, we want to keep the style uniform with the same footer information across the site. I hope I explained myself well.
  7. Site URL: https://www.familjeterapeuterna.com/vi-allihopa Hi, I want my summary blocks to show the list layout when displaying on mobile and grid layout when displaying on desktop. Is this feasible? Thank you! Desktop: Mobile: :
  8. Site URL: https://www.donturbanisethedowns.com/blog Hi. I want to change my blog layout from "list" to "grid". I found an article which says you simply go to Site Styles and "Scroll down to the Blog: List section" but I don't seem to have this option at all. https://support.squarespace.com/hc/en-us/articles/227054767-Standard-grid-list-Blog-Pages. I currently have "list" view I guess (https://www.donturbanisethedowns.com/blog) but it's taking up so much space. I want to amend it so I can show far more blog links on the blog home page. Thanks in advance.
  9. Site URL: https://eatwanderexplore.com/europe I am trying to round out all 4 corners of my summary grids, but only the top 2 corners of my carousels. The images themselves are rectangular and vertical, not square. This code has worked somewhat, but it changes ALL of the corners for all types of summaries. .sqs-block-summary-v2 .summary-thumbnail { border-radius: 15px 15px 0px 0px !important; moz-border-radius: 15px 15px 0px 0px !important;} see images. page url: https://eatwanderexplore.com/europe
  10. Site URL: http://www.nuestramesabk.com/menu Hello, I am trying to add an "Add to Cart" button to the products I'm displaying on a summary block. I found the following code below from a similar issue and it creates the button for each item with the correct appearance. When clicked, it just redirects to the page for the product. Website is nuestramesabk.com/menu <style> .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item, .sqs-block-summary-v2 .summary-item.positioned { padding-bottom: 50px !important; } .summary-content { position:relative; } .summary-title .summary-title-link::after { content: 'order'; background-color: #f29182; border-radius: 30px; display: block; padding: 10px 20px; font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 600; font-style: normal; line-height: normal; text-transform: uppercase; letter-spacing: 1px; color: #fff; background-color: normal; border-color: normal; position: absolute; bottom: -45px; } </style> Edit: I also found this code which adds an "Add to Cart" button to the grid view of the shop page - I'm hoping there's a way to add that functionality to the button I have showing up on my summary block. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .products .grid-item { padding-bottom: 100px; width: 100% !important; } .products .grid-item .sqs-add-to-cart-button { position: absolute; z-index: 9999; bottom: 30; left: 0; right: 0; width: 100px; min-width: 100px; margin: 20px; padding:5px 5px; } </style> <script> $(".products .grid-item").each(function(e){ $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Order</div></div>'); }); $(function() { $(".products .grid-item").each(function(e){ var dataItemId = $(this).attr('data-item-id'); $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId); }); }); .product-block .sqs-add-to-cart-button { width: 10px; margin:auto } </script>
  11. Site URL: https://jadeanthony.com/the-regulars Hey friends! I really need some help targeting a specific Grid Summary Block on a page that has both, a Grid summary and List summary, where I want to center its contents. Right now, I'm using the following code: <style> #block-yui_3_17_2_1_1619719686531_1992 .summary-thumbnail-container {display: flex; justify-content: center} .sqs-block-summary-v2 .summary-item-list {display: flex; justify-content: center} </style> But I want to keep the top List Summary Block listed vertically with the text left-aligned. The page link is: https://jadeanthony.com/the-regulars Can anyone help? Thanks!
  12. I may be missing an easy fix, but I am looking to center a summary grid block so that when it adapts to larger screens, it doesn't leave awkward spacing on the right side. Any suggestions on code I can put in to simply center-align the block?
  13. Site URL: http://metgal.art/ Hello! We have seven core values that we are wanting to showcase on our site. I'm working on doing something like Gusto has their site. Image attached. Can someone help me with a responsive three column, two row (then one full row at the end for the seventh value)? If it helps to inspect on Gusto's site, the link is: https://gusto.com/about
  14. Site URL: https://www.alliancepackaging.ie/all-products Hi. I set up this site and launched it back in summer. It's an e-commerce site selling packaging. The issue I'm having is that, on mobile, the product images in the summary blocks on my shop page don't always load. In fact most of them never load. It's not always the same images. Has anyone encountered this issue and if so could you suggest a fix? I have some custom coding in place.
  15. Site URL: https://www.lesweekendeurs.ca/fr/creer-ma-boite Hey Guys! Im looking to do the same type of " shadow box " we normally do in summary grid but in my product grid list. Any leads? Cheers! Now it's like this: But i look for something like this: ( with the add to cart )
  16. Site URL: https://www.vox.ie Hi there. I have used code (kindly supplied on this forum) to change the styling of the titles to blog posts featured in a summary block. It all looks the way I want it, except that I can't reduce the line height any further. I need the two lines to be much tighter - smaller leading. Here is the code I'm using: /* Title */ .summary-title-link { font: 'Proxima-Nova'; font-weight: 800; font-size: 24px; line-height: 20px; } .summary-excerpt p { font-size: 16px !important; } Reducing the line-height below 30px has no impact. If one increases it, it does get larger though. Any help is appreciated! Jonny
  17. Site URL: https://jadeanthony.com/the-regulars/#index Currently, under the "2021 READING CAST" tab on my website, I'm using a Grid Summary Block to display headshots of Cast Members in the musical I'm producing. But I'd love to now add links to the photos, forwarding them to websites or biographies related to these performers. When I add Clickthrough URLs in the entries of the Gallery page where the Summary lock originates from, it doesn't translate to the page where the Block is displayed. Can anyone help?
  18. 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!
  19. Site URL: https://jadeanthony.com/the-regulars/#index Howdy folks! I really need some help targeting a specific Grid Summary Block that I want to add a 2px border to. Right now, I'm using the following code: <style> .summary-thumbnail{ border: 2px solid #A43D5F; border-radius: 50%; </style> But I really only want to add the border, now seen on all round images on the page, specifically to the grid block under the "2021 READING CAST" tab. Can anyone help? The page link is: https://jadeanthony.com/the-regulars/#index Thanks! — Jade
  20. Site URL: https://jackeames.com/instagram Bit of a strange one... I'm implementing Lazy Summaries on a client's website and it's working beautifully... apart from one weird thing. The gallery consists of around 80 images and one image in particular isn't appearing in the gallery despite being uploaded in the same way that all the other images were. I've tried deleting the image and re-uploading it a couple of times, but no luck! Has anyone come across this before? It's image number 34 out of the entire gallery, so not even the most recent/oldest image. Wonder if this is some odd bug? Any suggestions greatly received!! Sammi x
  21. Site URL: https://selfieconsulting.squarespace.com Hello, I am using the following code that I copied from Ghost Plugins website to style a summary block. I'm not sure if this is a code issue or if I just need to add additional code, but as the screen gets smaller; say tablet mode, I would prefer the summary block to maintain the 3 to a row layout that I have. Instead, it is converting to 2 on a row and then 1 on the following row. Any help would be greatly appreciated. I'd also like for all sections to be the same height regardless of content. // DB Summary Block Design // .summary-thumbnail-image {margin-top:%;border-top-left-radius:15px; border-top-right-radius:15px;} .summary-title-link {color:#d92e4a; font-family: mrs-blackfort; font-weight:bold; font-size:150%} .sqs-block-summary-v2 .summary-item { background-color: #ffffff; border-radius: 15px; -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important; -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important; box-shadow: 0px 0px 20px rgba(100, 100, 100, 0.2) !important; } // DB Summary Content Padding // .sqs-block-summary-v2 .summary-item .summary-content { padding: 10px 40px 10px 40px; } // DB Summary Block Button // .sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {display: inline-block; margin-top: 10px; background: #d92e4a; color: #fff !important; text-transform:uppercase; border: 2px solid #d92e4a; border-radius: 50px; padding: 5px 20px; }
  22. Site URL: https://cowanandsons.squarespace.com Hi everyone! Is it possible to display the limited availability product labels above the title and tags on a summary block? Or, even better, can we make them into labels that overlay the image (just like Sold Out stickers)? Thanks in advance for any input! Password: raeburn
  23. Site URL: https://www.christinehooper.com/home Hello! I've created separate portfolios for different areas of my work. I want to amalgamate all of these to one block of links on the home page but summary blocks only allow for me to link to my shop products. Can anyone help? Thank you
  24. Hi all. I'm trying to get my gallery grid block to show two columns on mobile instead of stacking. I've used the CSS below to accomplish it but the grid is not aligning correctly on mobile wit the third item being bumped and white space in its place- screenshot attached (On tablet and desktop view it's also two columns wide but doesn't have the same issue). The page is here: https://ugly.wtf/new-page-1 I'm able to correct the problem using white-space: nowrap; but then my text obviously doesn't wrap as needed. Any help would be much appreciated. I'm very inexperienced with CSS. Thanks in advance, <style> @media only screen and (max-width: 640px) {.sqs-block-summary-v2 .summary-item { clear: none !important; width: calc(100%/2)!important; padding: 2px !important; } } </style>
  25. Hey guys, does anyone know how to create an interactive summary block? I want to connect it to other pages just not the blog! But i think the theme is optimized to connect to the blog only. I'm trying to achieve something like this (see attached pic), but would prefer connecting it to other pages. Thanks in advance
  • Create New...