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'.

  • 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://davidzamorano.tv/ Hello there! Embedded video codes on a grid gallery are not working on my homepage. I'm using instead a couple of gif images: for PIC and IBM works, which are considerably heavier compared to using some looping video bits from Vimeo. (please see attached) Any help or tip on this would be very appreciated. To check if everything is ok, I could also share the embedding code I'm using that makes the Vimeo videos loop as gifs. Thanks! 😀
  2. Site URL: https://trombone-seahorse-afp9.squarespace.com/historic-show Hi there, I'm building a website for an art gallery that needs customization. I want to create a product grid list with the paintings available through the gallery. Here's the site and pw: Site: https://trombone-seahorse-afp9.squarespace.com/config/design pw: carmelart There are some landscape and some portraits, so it was important to the gallery to have the paintings not cropped into a particular ratio. I was able to find custom css to make each painting on display in it's full not-cropped orientation. I have the aspect ratio set to 3:2, so the landscape images fill that ratio, where as the portraits are set inside that ratio. Because of this, the portraits are justified to the left. I want to figure out how to center the images within the 3:2 ratio. Also, I customized my Quick View button, but it seems off-centered. Help with this would be greatly appreciated! Here is what I have in my Custom CSS: // Product Gallery View Custom // .grid-image-wrapper img { width: auto !important; height: 100% !important; top: 0 !important; } .ProductList-grid.clear { display: flex; flex-wrap: wrap; justify-content: center; } .ProductItem-details-excerpt { font-family: Tuan !important; } figure.ProductItem-gallery img { width: 100% !important; height: auto !important; left: 0 !important; } //Quick View Custom// span.sqs-product-quick-view-button { visibility: hidden; } span.sqs-product-quick-view-button:after { visibility: visible; content: "QUICK VIEW"; background: #FFFFFF; font-size: 1.4rem; font-family: 'Courier New'; font-weight: 800; color: #C29A5A; padding: 20px 25px; border-radius: 0px; } Thank you, thank you, thank you!
  3. Hi, how do I add a code to a portfolio layout page for the grid images to be black and white and for each to appear in colour only when hovered over after 2 seconds or so? I have tried adding codes to the specific pages advanced section but it just appears as text in the header and nothing changes. Please help!
  4. Site URL: https://www.adamamin.com.au/home/cost-house-clovelly I'm building a project page for my photography website. Using the grid: simple layout to show all the images, I find that it crops the images to conform to the aspect ratio. Is there an ability to add a white background instead so that the images can keep their aspect ratio? This is best explained in the website example below: https://derekswalwellprints.com/collections/outdistance Scroll to the bottom to find:
  5. Site URL: https://www.alxhtchr.com/vault-2 I've created a portfolio grid gallery and worked the code so that it has 1 column without left or right padding; however, I've been trying for hours to find code that will allow the row to be cropped vertically to 50% of the page (if I were to have 2 rows and header hidden you could see their entirety). I want the aspect ratio to be variable so that as the browser window size changes, so does the crop on the photo to remain at 50% of the vertical height. The code I attached in the image has not successfully worked in limiting the row height. I'm looking to imitate this page https://www.shortstache.com/professional Here is my page https://www.alxhtchr.com/vault-2 Would appreciate any help I can get, thanks!
  6. Site URL: https://www.blueglobeinnovation.com Hi I have a gallery section and then a list section and I want to duplicate the list title to sit on top of my gallery section (see below- the drak blue is the gallery). How do i code this text in? There seems to be very littke out there on this topic and I am wondering if i am missing an easy runaround? NothingI have found has adding title text on TOP of a gallery within a gallery section.
  7. Site URL: https://rochellerubin-magnetic.squarespace.com/ Site is under construction. Password: rochelle See page: https://rochellerubin-magnetic.squarespace.com/fictions My client needs a number of grid galleries. She needs title and description to display on both desktop AND mobile. They could display underneath each item when viewing as a grid OR when viewing in lightbox mode. Right now, there is no way to see the description on mobile in a grid gallery. Note: You'll see a stacked gallery. My client specifically wants a grid AND to be able to view the details of each piece (title, size, materials, year). Also note: Mobile Preview (when editing on desktop) indicates that the title and description should be viewable on mobile, but when you actually use a mobile device there is no way to see this information. Also note: You can display titles only (not in lightbox) but no description. Anyone have a line of css that would accomplish this?
  8. Site URL: https://watermelon-tomato-em22.squarespace.com/ Hello, The layout on my portfolio homepage is currently set to Grid: Overlay with 3 Columns. I'm wanting to customize this so that the size of the thumbnails vary in my grid. This site is a good reference of what I'm trying to accomplish and I've attached a comp of what I'm hoping I can make mine look like. My knowledge of CSS is limited so any help is very much appreciated. Thank you! Robert
  9. Site URL: https://www.nbdesignstudio.com/ Hello, I am using 2 different gallery types on my website (Grid Strips & Strips) and individual image blocks. I would like to be able to resize the Grid Strips, Strips, and Individual image blocks for mobile version if possible and I would like the images for all to also appear 2 side by side for less scrolling . I been hunting around for a code to revise with my information and use but its not working out for me. If someone can help me with a solution that would be very much appreciated ! Also this side of my site is not public yet. I have added a password Duchess2001 I have tagged the duplicated portfolios w/ "Need Assistance" with the issues I am having
  10. Site URL: https://sacredcommunityproject.org/sacred-community-podcast I would like some help with this image grid. These are just small icon logo images, and so I don't want any to just be on a single line by themselves and large. My hope would be: That when it needs to shrink, it could just go to two rows of five images each. As it is now, when it gets a little smaller there are 8 on a row and then 2 on a row or 7 and 3. And then in mobile view it is 3, 3 and then 1. I am willing to make this a single row of 8 if there is a way to make it two rows of 4 on mobile. Any help is aprpeciated. If what I am wanting to do is not possible, please just tell me what is possible and I will adjust accordingly. Thanks!
  11. Site URL: https://jaysimala.com/home Does anyone have a fix on how to make the title text on images in the grid format larger? I'm using the Bedford template and 7.0
  12. Site URL: https://gold-cheetah-exh9.squarespace.com/anders Hi everyone! Could someone please help me out with this. I used custom CSS to turn a masonry grid into 2 columns, instead of 1, on mobile view. Now it seems that only one image is clickable, using lightbox, I think? How can i fix this? When you hover over it with mobile view on pc (which of course you cant see on mobile itself) you can see that only the first image shows a loop to press it, the others don't. https://gold-cheetah-exh9.squarespace.com/anders PW: Geheim123 Weirdest thing is, if you go to a different type of photoshoot, for instance this link: https://gold-cheetah-exh9.squarespace.com/familie-en-gezin-shoots (same password) The gallery does work and I'm fairly sure that I used the same code for all of them. Hopefully someone can help me with this!
  13. Site URL: https://lineaskin-3001.squarespace.com/?password=demo Hello everyone 🙂 Does anyone know how to achieve the black gridlines in the website example here in 7.1? Examples would be homepage and services page. Thank you! -DT
  14. Site URL: https://www.matthodgesdesign.com/ Is it possible to add simple image rollover effects to a grid gallery in 7.1? All I want for the image to change to a second image on mouse/cursor hover, and then change back on hover off (preferably with a smooth transition). Clearly this isn't possible with the standard controls, but wondering if possible using CSS and custom files? I've been searching online (and on here) and not found the answer, which is surprising in that I would have thought this would be a sought after feature. On my site I have added a simple brightness hovereffect to the images which gives it some interactivity. But preferably I would find away to change to a second image on mouse hover.
  15. Hi! I am struggling to figure out how to have an image darken when the mouse hovers over it, rather than lighten to the color of the background. I'm working in the Forte template, into which I Frankensteined some code pieced together from various other forum posts and need some help with how to edit it so that the image darkens on hover(like this: http://demo.squarestud.io/grid-gallery-9). I'm pasting the code in use on the site below. Please help me, this is my first foray into code and I am totally clueless! Code: .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor { opacity: .4; -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: 0px; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: 0em; -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; pointer-events: none; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #000000; opacity: 0; text-transform: uppercase; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: #000000; opacity:1; text-transform: uppercase; vertical-align: middle; font-size: 16px; line-height: 125%; letter-spacing: 3px; 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; } } header#header { padding-bottom: 20px; }
  16. Site URL: https://create.editorx.com/website-template/view/html/2656 The images section https://create.editorx.com/website-template/view/html/2656 Where some images move on scroll and some are sticky
  17. I am using a masonry grid to build my gallery and most of the photos I want to include have a portrait orientation. As a result all of my horizontal photos look really small as their size is adjusted to fit each column. Is there a way to display horizontal photos on multiple columns (maybe full width?) so that they stop looking tiny? I'm building my site on 7.1. Thanks!
  18. I'm trying to achieve more of a masonry look on a specific gallery block and I'm wondering if cropping can be disabled on the gallery block / grid design. Thanks in advanced!
  19. Site URL: http://www.studiofurks.com How do I reduce/remove the spacing between Selected Work and the grid. Please see screenshot:
  20. Site URL: https://www.anvnguyen.com/ Hi there! I'm adding grid gallery caption on hover using the CSS below, which includes the ability to make lightbox work. The hover caption is showing perfectly, but lightbox is not working... The gallery is on https://www.anvnguyen.com/home/art. Would really appreciate your help!! 🙂 .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1.3rem !important; /* caption font size */ color: #F7EDE4; /*caption font color */ text-align: center; /*padding: 16px;*/ max-width: 85%; } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } .gallery-grid-lightbox-link:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; }
  21. Site URL: https://www.ntsc.me/work https://www.ntsc.me/work Second Index: https://www.ntsc.me/index_2#/index_2_2/ Hello Friends. I'm hoping someone can help a bit here. I will be so thankfull!!! This is the FLATIRON GRID. I just need to change and (re/point) the link of one specific thumb/project (image/Title and view word link), to open a second index instead of open the relative project. With this script: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('#grid .item a div.wrapper div.project-title h3').click(function() { window.location = "https://www.ntsc.me/index_2#/index_2_2/"; }); </script> The word “VIEW” in the rollover of the project thumb in the grid, is point already perfect to the second index, but have two bad things: —>1- Is just working in the word “VIEW” of the thumb ( need to work over all this thumb ans not just in the word view ) —>2- Is changing the links for the “VIEW” words from all the projects thumbs of the grid. ////// SO! I just need a bit of help with the script in order to make this link (re-pointing) happen, and be able to ( for very very Huge projects) use a dedicated index...., letting users arrive there from the principal index by a click over a MAIN inicial thumb. Thanks a lot!, for your smart help! LA
  22. Hi All, I would like to know if anyone can help me with the code for resizing portrait-oriented images to match the height of two landscape-oriented ones in the masonry grid. I basically want the portrait and landscape images to be exactly same size.
  23. 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
  24. Site URL: https://www.decortech.co.nz/squarespace Hi all, I'm new to the Circle. 😀 My question: Has anyone figured out how to be able to show both a title and the description when using a gallery set to grid? The standard grid just shows a title underneath.
  25. Site URL: https://carasmanagement.com I'm trying to get the full gallery back to regular color of each individual image ONLY when hovering over each greyscale image. This is how it looks like right now, but is not giving me the full color yet once I pass the cursor through. <body> <style> .gallery-grid-item {filter:grayscale(100%)} .gallery-grid-item img:hover{filter:grayscale(0);transition:1s;} img:hover{transform:scale(1.1); transition: .5s;} Any help with this will be very much appreciated it!
  • Create New...