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

Search the Community

Showing results for tags 'grid-gallery'.



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

Found 95 results

  1. Site URL: http://dashconcept.com Hi guys Pretty new to squarespace and was seeing if anyone could help me - looking to find a bit of code that changes my clients in the gallery viewer on mobile to smaller icon sizes. Currently they take up loads of the page and doesn't look great. Any help would be appreciated Best
  2. Site URL: https://www.gottliebfoundation.org/painting-1920-1939 Hi! I'm working on a grid gallery in Squarespace 7.0 and I'm attempting to reduce the padding under each image so the captions look like they belong to the image above instead of the image below. https://www.gottliebfoundation.org/painting-1920-1939 Can anyone help out? Thank you!
  3. I've seen variants of this question asked on this forum, and tried many of the proposed solutions but am still having no luck on the Avenue Template for Squarespace 7.0. I was trying to use some 7.1 templates but it seems like they removed quite a bit of the Title / Description functionality for galleries? Here's my particular situation: I have roughly 130 images (each image is a different character illustration). I would like to upload and display all of these images to a single landing page, using a single, clean Grid Gallery. Each image has a unique Title (the character's name) and a unique Description (a brief character background, just a few lines), which are added to their respective fields of the Image Settings. I would like for users to be able to hover over a character, and be able to read the Title + Description text displayed over a 90% white overlay on the image. It would be ideal if I could have the text formatting dictated by my Header / Paragraph settings. I'm looking for Custom CSS to help solve this issue. Any advice? I'm also not beyond alternate solutions or templates, if it seems I'm missing an obvious / easy thing here. -- Additionally, these 130 images (characters) each fall into a category (Good, Bad, Neutral, etc.) as well as some tags (location, traits, etc.). What would be the best way to allow users to look at the Gallery Grid of 130 images, but quickly filter to just see, for example, the Good character category? Is that a doable task, or would I have to create unique Gallery Grids for each Category and then create new pages / drop-down items for each? Any help is massively appreciated. These forums have been so helpful over the years—thanks all.
  4. Site URL: https://www.viperequitypartners.com/ Hello, I added custom CSS to center the contents of the Summary Block (in Grid view) and it's off-center. Any ideas what's going wrong? See screenshot and code below. Thank you! //center summary block, unlink from bios// .sqs-gallery-design-autogrid .summary-item-list { display: flex; flex-wrap: wrap; justify-content: center; pointer-events: none; }
  5. Site URL: https://www.makinganexoneree.com/experts Hi, How do I get the captions on my simple gallery grid to be centered? Can't quite figure out the CSS for it. Thanks in advance! Page is here: https://www.makinganexoneree.com/experts
  6. Is there any way to add video to 7.1 gallery sections along with just images? Like you used to be able to do in 7.0?
  7. Site URL: https://www.newworldangels.com/portfolio I would like each of the images in the portfolio to open an accordion with more information. This expansion would have text and links. I've attached an image of what the structure ought to look like.
  8. Site URL: https://www.designbyjeffry.com/ Hi there, I am currently revamping my website and decided to use Avenue as the new template. I am wondering if there is any way to make some pages (or images/thumbnails) from the grid gallery 'unclickable' so they will serve as still images instead of accessible pages. Another possible approach is to remove them as pages and add them back as still images between the thumbnails in the gallery block, but I am not sure if that's possible. If you go to my website (www.designbyjeffry.com), you will notice there are four thumbnails with a geometrical shape as the cover. They are the pages that I want to make 'unclickable'. Thank you in advance! Cheers. -J
  9. Site URL: https://seal-burgundy-yx98.squarespace.com/ I'm hoping to have a hover effect on the images in the gallery on my landing page for Squarespace 7.1, that allows a second image to fade in. I've been able to find lots of tutorials for this for 7.0, and for image blocks and products on 7.1, but not for galleries. And I haven't been able to figure out how to set up the classes properly for this use. I'd like each image in the gallery on my landing page (currently a simple grid, which is the only simple grid gallery on the website) to show a second image on hover, and then those images would link to a page on my site when clicked. I'd only use this effect on my site's landing page (which is also the only page with a masonry grid). Ideally The links are currently set up. Ideally the hover images would be able to be uploaded using this method, but this is flexible. Site: https://seal-burgundy-yx98.squarespace.com/ Login with RobHutch Thanks!
  10. I have a 3-column Gallery in 7.1 and wanted to see if it was possible to make specific images the width of two columns or even three. Let me know 🙂 site: alyssavalera.com password: coffee21
  11. Site URL: https://wisteria-panda-z2eg.squarespace.com/sound-talent pw for the site is: rotorsound Dear All, Is there any way, to apply line breaks in captions such as gallery grid captions? This has been talked about in the past, but I couldn't find solutions for 7.1. In the example website, I would like to apply line breaks wherever I currently have commas. I would even go so far as to labeling them all by hand through code, as suggested by this code, that I found here in the forum: /* image 1 */ .sqs-gallery-block-grid .slide:nth-child(1) .image-slide-title:after { content: "Dinosaur line 2"; display: block; font-size: 13px; font-family: monospace; margin-top: -5px; } /* Image 2 */ .sqs-gallery-block-grid .slide:nth-child(2) .image-slide-title:after { content: "Banana 02"; display: block; font-size: 13px; font-family: monospace; margin-top: -5px; } However, this seems to have been written for 7.0. I cannot get it to work in 7.1. Any pointers would be greatly appreciated! Best, Tonmeister
  12. Site URL: http://www.cleod9music.com/#index Hi all! I've looked on some other forums, but haven't been able to get an answer that works for my site and was hoping someone could help me out. I'm a novice with CSS and I'm currently trying to add a Hover title to my gallery grids on my website. I inserted the following custom CSS and was able to get a hover to display on my grid galleries, however, I'm not able to display the title over the hover. Please let me know if any of you have had experience with this or might have a solution to fix the problem, thank you in advance!! .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: #fddcce; opacity: .9; } .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor { opacity: .1; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 110px; right: 0; bottom: 0; left: 0; padding: 2em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; margin-bottom: 0px !important; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #273845; opacity: 0; text-transform: uppercase; font-size: 18px; line-height: 125%; letter-spacing: 2px; margin-bottom: 240px; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: #273845; opacity:1; text-transform: uppercase; vertical-align: middle; font-size: 18px; line-height: 125%; letter-spacing: 2px; margin-bottom: 240px; } @media only screen and (max-width: 400px) { .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: transparent; opacity: 0; } }
  13. Site URL: https://www.relead.dk/forside-ny Hi all, Trying to make a hover function on our employee gallery, showing their contact info (caption) when hovering the mouse over image. Like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade But I am having a hard time controlling the placement of caption text. Also hiding the white space below each image. I only want 5px space between. My code: .gallery-grid-item-wrapper:hover .gallery-caption .gallery-caption-grid-simple { visibility: visible; opacity: 1; } .gallery-caption { visibility: hidden; opacity: 0; } Hopefully some of you can help me 🙂 Thanks /Morten
  14. Hi! I'm trying to see if this sort of thing would be at all possible. I'm using Brine template Maple, 7.0 and a gallery grid block. I know that what I'm trying to do will deem gallery useless and I will have to do each image separately as a block but... worth a try. So I have a hero image that focuses on a product smack bang in the middle as I'd like that as the thumbnail- but then I'd like to be able to click it to open in a lightbox with dark overlay to show (in essence, a completely different photo) a line-up of the whole range/flavour SKUs. Any help would be much appreciated!
  15. Site URL: https://www.frangipanibeatt.com/ Hi! I have padding around each image on my index site, but it doesn't seem to work on the left hand side of my page. This is the code I am using: } .homepage #grid .item a { width: 94%; height: 95%; } Thanks in advance!!
  16. Site URL: https://www.snorkelcookislands.com/ Hey guys, is there anyone who can help me with this please? I have a few pages where I use the Grid:Simple to display images. Looks great on desktop but on mobile, it's terrible. It would awesome for the Grid to be responsive and have 2-3 images in one row, and full bleed. At the moment, the Grids look like the first attached screenshot in mobile. Their pages are: https://www.snorkelcookislands.com/our-story + https://www.snorkelcookislands.com/reef + https://www.snorkelcookislands.com/lagoon Password: snorkel I'm also experiencing this issue with two social media images I've uploaded on this page https://www.snorkelcookislands.com/testimonials Hope anyone can help!
  17. Site URL: https://sandralynnallendesign.squarespace.com/living CSS Padding around masonry grid gallery help please: I'm used to being able to adjust the width of a section - the rest of the site's sections are set to "Medium" and line up with the outer edges of the logo and navigation bar as the red lines in the screen grab attached indicate. Is there a way to adjust the padding on this masonry gallery section to be medium width to match the rest of the site? I feel like it should be obvious but I can't seem to adjust the width of this gallery. https://sandralynnallendesign.squarespace.com/living Pass: 1234 Thanks so much!
  18. Site URL: https://www.frangipanibeatt.com/ Hi! I've been trying to remove/hide the thumbnails that appear if you scroll to the end of each gallery. I've tried the code below, but that unfortunately removes the thumbails from my homepage/index. Thanks in advance! div#container-content>#grid { display: none; }
  19. Site URL: https://www.spacecowboymusic.com/work Hey guys, I'm trying to hide the navy background of the masonry gallery grid so the video of the stars rotating shows behind it. Is this possible? I've tried a bunch of CSS and can't figure it out here. Any help would be much appreciated! https://www.spacecowboymusic.com/work Password: music4film Thanks!
  20. Site URL: https://www.tidiedaf.com Hello! I am new to SquareSpace and struggling to figure out how to link my Home Navigation to the Main Navigation bar I have at the top of my site. I am using the portfolio style template Novo. I am hoping to be able to link the images that I have on my home page to the pages I already have set up that show up as my Main Navigation bar. So on my home page, when users hover over each image and it has "About," when they click I want it to send them to my "About" page. I already wrote the content for my pages and would love to find a way to either just copy them over to the page that was created when you click on the "About" home image or find a way to link the home images to my corresponding pages. I have tried so many different things (short of deleting everything and starting over) and could really use the help. I feel like it should be a simple fix, but I just have no idea what I'm doing. Any help is appreciated!!!
  21. Site URL: https://augustussung.com hello all, I'm using the Forte template. How do I make my gallery grid appear as a single column instead of two on mobile? Appreciate all the help. Thanks!
  22. Site URL: https://www.sarahwalker.work/ Hi there folks! I'm having trouble with the gallery block on my homepage. It contains three images, with the column number set to 3 in the gallery settings. On desktop, it displays fine, but on mobile, the grid pushes the third image onto a new line, which is making me frustrated. I had a Google and tried the following code in the Custom CSS area, but to no avail - it keeps running over two lines, rather than forcing the grid to three on mobile. @media screen and (max-width: 640px) { .sqs-gallery-block-grid .slide.sqs-gallery-design-grid-slide { width: calc(100%/1); } } This is all well above my wheelhouse - my coding knowledge extends to inserting images and making html links (what a boss). I'd greatly appreciate any thoughts anyone might have about how I can wrangle this! Cheers from Melbourne, Australia, Sarah
  23. Site URL: https://www.nowthenjon.com/ Hi, I recently designed my own portfolio website on squarespace 7.1 and am pretty happy with the design on desktop view, however the gallery blocks on mobile view have horizontal gaps between the images where there should be zero space and I cannot get rid of them. The other major issue I have, is that full bleed images I've included lose their aspect ratio on mobile, and despite selecting a central view point with the dropper, the crops don't look great at all. I suspect I'm stuck with this, but saw another post asking for help on images on here – https://www.luckyandson.co/our-work/loveandwonder – and that site has responsive images without any cropping. If anyone has any ideas to help with these two problems that'd be a massive, massive help. Thanks in advance!
  24. Hi, I'm wondering how I remove the gray overlay from the gallery grid hover. This is built as a gallery page and I don't want it to do anything on hover but can't seem to remove the option. Thanks!
  25. Site URL: http://christabelhart.com How do I make the spacing between each picture even? I've used the attached code to achieve two columns on mobile, but, I want to remove the space below each picture and create an even spacing all around each picture. Please help, thank you :)
×
×
  • Create New...