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.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; }
  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.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!
  5. Hi have tried looking to see if there is a code already mentioned that i can use but can't see a response to help with my query. I am on version 7.1 and have set up a grid-masonry galley with landscape and portrait format images with inset width. I would like to reduce the width further but cannot find a way to do that. I am also having problems with the portrait format images appearing very large vertically with the whole image being higher than the screen size. This means only 2/3rds of the portrait image is visible at one time and you need to scroll down to see the bottom 1/3rd of the image (see attached photo of example). The html code for one of the portrait images from inspect is as below: <img data-src="https://static1.squarespace.com/static/5df7b9c2c15c2c1fc90f169e/5e0641c31aa65222ba975ea6/5e064206e2b52a3155f25a0b/1577574232104/okyiva_120101_5586.jpg" data-image="https://static1.squarespace.com/static/5df7b9c2c15c2c1fc90f169e/5e0641c31aa65222ba975ea6/5e064206e2b52a3155f25a0b/1577574232104/okyiva_120101_5586.jpg" data-image-dimensions="1667x2500" data-image-focal-point="0.5,0.5" alt="Elmina Castle, Elmina" data-load="false" style="width: 502px; height: 752px; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.7" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5df7b9c2c15c2c1fc90f169e/5e0641c31aa65222ba975ea6/5e064206e2b52a3155f25a0b/1577574232104/okyiva_120101_5586.jpg?format=2500w" id="yui_3_17_2_1_1577661569410_1336"> Any suggestions on how i can control both the width (of landscape photos) and height of the portrait images? thanks in advance
  6. 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
  7. 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?
  8. I set up a portfolio page with a number of sub-projects within that, each sub-project page with gallery grid images. The images have spacing between them which has been working fine on desktop view and mobile view until i logged back in today to do some more work on the site. Now although the spacing between the images still shows on desktop, the mobile view has the images touching at the top and bottom with no space in-between. I have rechecked the CSS codes I have added to date and can't work out why but looks like i may have done something wrong yesterday. Help would be appreciated in getting the mobile view to work again. The site is https://purple-chinchilla-4bnr.squarespace.com/ and password Toronto2019 thanks
  9. 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.
  10. 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
  11. 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!
  12. Hi all, I'm using the Paloma template for my website gohoopday.com. If you scroll down to the sixth fold, you'll see tons of logos. On mobile, these stack (1 per row), which isn't very mobile-friendly. I am trying to get 2 or 3 per row for mobile. On a previous site with a different template, I used a formula similar to the ones listed in the link below, but on this template it's not registering. https://forum.squarespace.com/topic/64554-create-more-than-2-columns-in-mobile-for-grid-gallery/ I've tinkered around and tried this, but it only pushes the logos to the left rather than creating 2 columns. @media only screen and (max-width: 640px) { .gallery-grid-item { width: 50% !important; } } I am wondering if it is because this is a gallery page vs an image gallery. Anyways, I cannot figure it out - please let me know if you can help! Max
  13. 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!
  14. 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
  15. 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
  16. 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!!
  17. 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; } }
  18. 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
  19. 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!
  20. 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!
  21. 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!
  22. Site URL: https://www.mayamukhopadhaya.com/work I can't find where to edit the size of the title headings for blog posts - either in the blog post itself or in the gallery view of all blog posts. As a result, the titles are larger than I would like. How can I edit the title size? I looked in Design as well as in the Edit options for the Blog. PW to site url: mayam
  23. 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!
  24. 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!!!
  25. 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; }
×
×
  • Create New...