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

Search the Community

Showing results for tags 'grid'.



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
  • Squarespace Forum Club Guidelines'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

Found 19 results

  1. Site URL: https://www.thislandisdigital.com/ Context: I've spent some time trying to apply a custom grid layout to my index so that I can highlight certain projects with double sized thumbnails. To do this I followed this tutorial which targets an index: gallery block from a different template rather than the standard index I have available in Avenue (not sure if the scaling is different because of this). I was able to successfully assign an area to each of the index thumbnails and arrange them the way I wanted using grid-template-areas with one main issue. Problem: The thumbnails are forced to match the aspect ratio in my site style rather than cropping or stretching to fill the grid's literal space. What I want is to have a combination of 2/1 and 1/1 aspect ratios. My site style can be one or the other (50 or 100). No matter which I choose, the grid is being stretched vertically to match the same ratio. Here's my code so far. I'll deal with the tablet and mobile arrangements when I solve the desktop issues. #collection-5c89d82aee6eb05083075575 #projectThumbs { > div { // Create a grid layout on the index. display: grid; // Visually map the named items below to the grid using spaces. Repetition matters. grid-template-areas: "firstAB firstAB firstCD firstCD" "secondA secondB secondC secondD" "thirdA thirdBC thirdBC thirdD" "fourthA fourthB fourthC fourthD"; @media screen and (max-width: 800px) { //grid-template-areas: ""; } @media screen and (max-width: 640px) { //display: block; } } // First Row a:nth-of-type(1){ grid-area: firstAB; // Name of the item. } a:nth-of-type(2){ grid-area: firstCD; } // Second Row a:nth-of-type(3){ grid-area: secondA; } a:nth-of-type(4){ grid-area: secondB; } a:nth-of-type(5){ grid-area: secondC; } a:nth-of-type(6){ grid-area: secondD; } // Third Row a:nth-of-type(7){ grid-area: thirdA; } a:nth-of-type(8){ grid-area: thirdBC; } a:nth-of-type(9){ grid-area: thirdD; } // Fourth Row a:nth-of-type(10){ grid-area: fourthA; } a:nth-of-type(11){ grid-area: fourthB; } a:nth-of-type(12){ grid-area: fourthC; } a:nth-of-type(13){ grid-area: fourthD; } } I attached a picture of the result I want vs. the result I'm getting. * I had to temporarily revert my site to a standard 4-wide index and comment the CSS out. Didn't want to leave my site up in a broken state while I wait for a solution (it requires a 1-wide index for some reason). I was able to reduce the visible size of specific images, but only the image element and not whatever larger element it's attached to (still new to CSS). Hopefully the screenshots and my code will be enough to get a hint or direction.
  2. Hello all, I have a question, how can I make it that the Basic Blog Grid has the same width as the page layout? Thanks for help 😉
  3. I was able to find the code to hide the pagination at the bottoms of the portfolio page, but can anyone help me with the code to hide the titles below each portfolio image?
  4. hi there! is there a way to add more responsive steps than 'screen', 'tablet' and 'mobile'? for better understanding: on an imac the grid has 5 columns ->ok! on an tablet 3 ->ok! but in between there are no options and I would need less columns on a laptop compared to a large imac screen. ... anyone? Thanks!
  5. Site URL: https://www.bricktechstudios.com/instructions Hello! I'm trying to make the product titles on the instructions page uppercase. It shows up in uppercase on the Product Details page, but not in the product grid view on the instructions page. The site password is: SuperSoup Thanks!
  6. I would like to make the caption on a gallery grid 2 lines and have the first line be bold. Can anyone suggest custom code to do this?
  7. Site URL: http://www.michellemishina.com Hi! Does anyone know how to increase the padding / spacing between images in the grid gallery? The first image is of my current site's gallery spacing. The other is an example of a grid gallery (not squarespace) with wider padding between images, and is closer to what I want. Thank you! :)
  8. Hi there -- I have a client who would like some adjustment to her mobile view. She likes the index gallery grid for three images for desktop and tablet, but on mobile the stack creates a bad intro to the site. She asked for it to be three images on the same row for mobile too. I tried targeting the image gallery for a max width of 33% but that just reduces the image -- they stay in a stack. Any way to remove the stack for tablet view? I'm wondering if she won't like this solve for mobile. I'm wondering if there's a way to create a media query to change the index gallery layout from grid to slideshow just for screens at 640px. Anyone got a solve for this? Site is heatheretheridge.com/welcome and it's the first index. #home-gallery Thanks for looking. 🙂 Lacey
  9. Hello, I have my products in SHOP lay out in 1 column (how I want it to look) but when I look at it from my mobile device or browser inspect it becomes 2 columns... Did anybody have a similar issue? I'm attaching both screenshots. My site is running on 7.1 and this is the media query that I'm using: "@media screen and (max-width: 640px)" https://pelican-chiton-xwy4.squarespace.com/ Cheers
  10. Hello all, I've spent hours trying to figure out custom css to try and get text to sit on top of images in a gallery block (grid). I have added the title and caption for the image in the image's setting, but I can't figure out a way to display it. I don't want any hover effect, just a text overlay, like with a poster. Any ideas? Thanks in advance.
  11. I have an issue with irregular padding and block sizes. I am trying to create a page composed of Images in an irregular grid. 1. For some reason the images are being automatically cropped so that they don't fit their container - leaving irregular spacing between images 2. I would like to adjust the spacing between images My attempts to figure out the CSS have been a bit of guess work with no elegant fix that works. Ideally I'd like a responsive padding solution. https://jonathangallagher.squarespace.com/overview-2 Notes: - This layout is adapted from the supplied grid image layouts, which I then used the poster option on each image. - Brine Template - Bizzarely when i click on each image to edit it, it suddenly fills it's container, only to revert back once finished. - I can't to minor adjustments the containers of the images, some don't align, which is odd, as you'd expect there to be a predefined grid
  12. I want a lightbox gallery: one photo visible on the page, when clicked opens in a lightbox with navigation arrows allowing the user to view the other photos. I have several projects with many photos. I want to allow users to visit the projects without a lot of scrolling down gallery blocks. This would allow me to put gallerys side by side as photos, when clicked opening into the lightbox feature. Apparently this function is not supported by Squarespace but I see it on many simple sites. Can anyone help me?
  13. Have search thru and tried several variations of CSS but can't seem to find the right combo. Looking to eliminate the vertical padding for this one page, and just above and below the donate "buttons". Any help appreciated.
  14. I created a gallery page and uploaded lots of images. Now, as I look at it, I'm thinking I should have done a grid instead. Is there a way to change the page? If not and I have to create a new page, where are all those images stored / where can I find them to add to the grid page?
  15. Hello! Is there a way I can have a blank page to be divided into non-showing grids so I can position images and text symmetrically across the whole page? I want to work on https://mastercarsreview.com/gallery such that the images can be aligned across the whole page side by side for each car brand. Thank you in advance.
  16. I am wanting to add a native "learn more" button centered on my gallery grid images. I only want the button to display on images with clickthrough url's as well.
  17. Hi I'd some of the images on my homepage to be static, ie when I click on them nothing happens. And I'd like some of the images to be active, clicking goes through to gallery. Is there a way of disabling some of them? I'm using Flatiron in the Brine family. Thank you! mylesformby.com
  18. Hi there, Is there a way to control the number of images per row in mobile view of a gallery grid block, using the marquee template? On desktop and tablet view I have asked it to be 3 images per row (and it does), but it changes to 2 images per row in mobile. I have resized images to smaller sizes with no luck. The layout/order of the images is vital, as together they form a complete picture. I know I could disable the mobile view so that the desktop view is shown on mobile devices, but then I loose the awesome parallax scrolling etc. our site is here: Thanks for your help... we love SquareSpace
  19. I am using the Hudson template. Could anyone tell me the CSS to use to make the image titles appear under the lightbox images that popup from a gallery grid? Thanks.
×
×
  • Create New...