Jump to content

Search the Community

Showing results for tags 'grid-summary'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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. I built our first SS site in 2014 to serve as the primary web site for our U.S. 501c3 non-profit. Current template is “Sonny.” I am seeking feedback on existing site and what I should change if I rebuild in a new SS version. I’m told I can’t migrate to a higher version of SS from my existing site. What advantage would their be to changing to a higher version? What template(s) would one recommend if we change? Critical components needed: 1. As described on existing site, we support 4 primary NGO’s in Uganda. Primary ministry areas are children's rescue home and education. All income is donation based. 2. Child sponsorships: I use SS blogs to store/present each child's bio, sponsorship link and photo by children's home (we have 3). I use tags and categories to track groups and subgroups of children. As you can image this is laborsum given that we support 150+ children and growing. This has worked ok but there must be a better way. I don’t like the limitations of how to present blogs in summary blocks. I am limited to I think 30 but if I have more than 30 children I can’t present them unless I subgroup them using categories. Example page: https://www.sonriseministriesinc.org/ch-children/junior-nicolus-kibuka 3. Would like to simplify the site as much as possible. I’m sure we can thin the content. 4. I wish we had a few more text styles than few that are offered under Sonny. 5. I am an army of one. No help and I’m not rich. 5. All the photography on the site is mine. 6. We do not sell products. 7. I need advice on how to direct more people to the site when all our news and social media posts highlight most of the news. Thank you Art
  2. Site URL: https://designbycaitie.ca/blog/template Hey there, I'm trying to make ONE of my summary blocks (not all of them!) show up as a two-column grid on mobile view. I'm creating a blog post template to reuse indefinitely, so I don't want to use any specific block IDs that I'll have to change for every new post. I've spent hours looking for a solution to no avail. This piece of code almost worked: https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile#:~:text=The following code is used in the video. It achieved the two-column effect for my GRID summary, but it messed up my CAROUSEL summary directly above it by displaying ALL the summary blog posts as a grid, rather than two at a time in a carousel. Can someone PLEASE provide a simple code for this? Would really appreciate it!
  3. 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...
  4. Site URL: https://rectangle-rhombus-8f5s.squarespace.com/cascade I somehow added this magic section with a dragable grid. I have no idea how I did it and how to do it again. help?
  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. 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
  7. Site URL: https://www.pixelsandpaths.com/ On my Android mobile device, only the first thumbnail appears of the summary block grid of blog posts in the "RECENTLY ADDED TUTORIALS" section (see attached). Any ideas?site URL: https://www.pixelsandpaths.compass: july12021 Thanks very much!
  8. 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!
  9. 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
  10. As the title asks, I'm trying to avoid having to manually input the name of hundreds of images on my site. I have used this code in the past and it works just fine with Gallery Blocks: <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script> <script> window.Squarespace.onInitialize(Y, function(){ $('.slide img').each(function(i) { $('.image-slide-title').eq(i).html('' + $(this).attr('alt').replace('.jpg', '') + ''); }); }); </script> Any other suggestions would also be massively appreciated!
  11. Site URL: https://amritaedtc.squarespace.com/?password=test I am using the Auto List Carousel section as a testimonial slider, and am trying to apply an "min-content" style auto-height to the grid rows. Because I have one slide that is larger than the rest due to its content (see photos), the smaller slides take on that same minimum height, leaving the arrows at an awkward distance from the content. I tried to insert the following code to change the grid rows to match the height of the content, but it is not working. Any thoughts? .user-items-list-carousel__slides { grid-auto-rows: minmax(min-content, max-content); } Images: Smallest slide - with code added that isn't working Largest slide - that sets the base height for carousels Mockup - of ideal space where arrow should go
  12. Site URL: https://shark-hyperboloid-r297.squarespace.com/ I am creating a blog where each post will be an embedded youtube video. I really like the way the Portfolio style page handles hover/rollover animations in the grid view: https://shark-hyperboloid-r297.squarespace.com/songs There is a smooth darkening of the image (both when starting and ending the hover) and the title only appears on hover. I want to apply the same thing to the blog grid. I am using the blog because I don't want to be limited to 40 posts (I understand that is the limit for the portfolio pages) and I want to use categories to group similar posts together. https://shark-hyperboloid-r297.squarespace.com/ So far I've been able to add the "darkening" effect via CSS, but it's not as smooth. And I haven't figured out how to hide the blog title underneath and only show it on hover. Would really appreciate any help!
  13. 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)
  14. 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
  15. 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>
  16. 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
  17. 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: :
  18. 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.
  19. Site URL: https://www.zane-page.com/ this is how my current site displays and you can only navigate left right with the arrows. i want visitors to be able to click on a grid thumbnail to see overview of all images. this was the feature on my old template. i need to be able to have this on Ishimoto template. Please help
  20. I am updating my Squarespace portfolio. I would really like to understand how this site is structured. https://jasper-demo.squarespace.com/ When we are looking at the homepage "work" section. I love the functionality and would like to apply something similar to my site https://danikaseadesign.com/retail-branding I've moved from a "grid" to a "summary" but am still not happy. I would really like it to function exactly like the Jasper one but not sure what changes I need to make. Hoping that you can help me. Thanks so much.
  21. I'm trying to style a Summary Grid block to look like a Gallery Page in Maple. This is what the Gallery Page looks like: This is what the Summary Grid looks like without any CSS: And this is what I have right now: Nowhere close to what I need it to be. This is the current CSS I've added: .summary-title-link { position: relative; top: -200px; left: 0%; height: 100%; margin: 0px 0px 0px 0px; padding-top: 21px; padding-right: 21px; padding-left: 21px; z-index: 1; color: hsl(0, 1%, 22%); text-transform: uppercase; font-weight: 500; font-size: 16px; letter-spacing: .28em; line-height: 2em; font-family: futura-pt; background: rgba(255, 255, 255, 0.8); } .sqs-block-summary-v2 .summary-excerpt { position: relative; top: -210px; left: 0%; width: 100%; height: 100%; z-index: 1; color: hsl(0, 1%, 22%); text-transform: lowercase; font-weight: 400; font-size: 16px; background: rgba(255, 255, 255, 0.8); } Here's the URL: https://thescoutgroup.com.au/properties-in-development Any idea how to get Screenshot B to look like Screenshot A?
  22. I'd like to display 3 columns of images on my page on desktop using a summary block grid, and am happy for mobile to display one column. However, I'm foxed by how it's displaying in different windows. If i set up a 3x2 summary grid for narrower browser windows, then on wider ones it comes up as 5 across + 1 image on the next row, and a 3/1 grid only covers 3/5 of the row, which both look awful. If I set up for wider screens by adjusting the image minimum width, on a narrower screen the 3x2 reformats to 2x3 (which is fine) but a 3x1 grid shows as 2 + 1 which again looks daft. Is there a way to make the summary block grid more responsive? Thanks in advance
  23. Hello, Is it possible to have a grid that also functions as a slideshow? The idea is to display several events on the homepage where you can see the event's name/info on the left with an image on the right. Then on mobile, we'd be able to see the information and the event without them overlapping. I can achieve the format I want with galleries but I can't show multiple through a slideshow. Any recommendations, plug-ins, code, templates that could help with this? Thank you.
  24. 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
  25. 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.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.