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


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

  1. 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?
  2. 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>
  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://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
  5. 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
  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. 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.
  8. 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
  9. 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
  10. 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)
  11. 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
  12. 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!
  13. 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!
  14. 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!
  15. 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!
  16. Hi I have CSS on my Brine site to increase the border width as I like chunky borders. However the borders are too big for mobile. Is there a way to reduce them for mobile only? The code I'm using is : #grid { margin-right:50px; } #grid .item { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border-top:50px solid #fff; border-left:51px solid #fff; } mylesformby.com
  17. In approach section . 1-2-3-4-5 icon need to Non - clickable. we add grid summery block.And I see that the icons are clickable... but the click shows the icon itself in a seperate page... it doesn't make sense here.... can we make the icons non-clickable? @tuanphan @Paul2009 @silvabokis site url.https://indigo-goose-55r5.squarespace.compassword:- aresa1
  18. Hi, I'm using the Jasper template and am having an issue with the index page grid. I have set a max page width for the site but the index page grid doesn't seem to be abiding by this rule as you can see in the attached screenshot. Everything else on the site is, including the logo and links above the grid in the screenshot Any ideas on how I can fix this? Thanks, O
  19. 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
  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. 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>
  22. 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
  23. 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: :
  24. 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?
  25. 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
×
×
  • Create New...