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


  • 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


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

Found 34 results

  1. Hello, i am using a summary grid for my blog post in 7.1 , but i would like to go back to the original blog grid page with the blog page settings, how can i do that? When I delete the summary, the page is empty, where do I see my blog posts? thanks for your help 😉 Best, dake
  2. Site URL: https://shallot-broccoli-8bm7.squarespace.com/ Hello, i have a crazy idea of reproducing this image as my front page website . I'd like to make each element interactive on hover... however i am finding it difficult to place the elements where I want and the size i want ... Does anyone have any advice to give me ? #block-yui_3_17_2_1_1600370552899_27724 {margin-left:-150px; margin-top:-100px } I'm using this but its not really letting me choose the size of the image ? Also i want to logo to stay fix at a minimum size ? is that possible ? Thank you Vanille https://shallot-broccoli-8bm7.squarespace.com/
  3. Site URL: http://www.michaelvanwegen.com Hi, I am looking for code to adjust the size of the thumbnails on my gallery pages. Ideally I would increase the size of the thumbnails by about 50% and reduce the number of thumbnails per row as a consequence. Any ideas / suggestion on code to make these adjustments? I am using the momentum template and the gallery pages apply autocolumns. Many thanks. Michael
  4. 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
  5. Site URL: http://www.yen-ng.com/editorials-index Hello, I'm currently working on this index page on York template (http://www.yen-ng.com/editorials-index) and the grid is different than the grid of a page I know use Flatiron template (http://www.sebastiankim.com/editorial-ii). Does anyone know if there's anything I can do or any code that will help me achieve this grid style on Flatiron index page? Thanks! Yen
  6. Site URL: https://octagon-helix-65yc.squarespace.com/ Hey all. I've been playing around with the Brower template for a blog. On my desktop, when I choose the basic grid blog layout or the masonry blog layout it lets you adjust the number of columns and displays it accurately on the desktop but not on mobile. Is there a way to jump into CSS and change this for mobile? So far I've tried this for 3 columns: @media only screen and (max-width: 640px) { .blog-basic-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } } This hasn't been working however. Also I guess I would also be looking for custom css to make this work for the masonry blog layout on mobileas well. Any help ius much appreciated. Thank you! Password for the site is: bran
  7. Site URL: https://www.moonroq.club/music Hi there, I have some CSS running on this page which nicely adds more columns to the grid style view - but I am limited to 20 posts per page. I'd really like to have all of my past blog posts continue loading at the bottom of the page as the user scrolls, instead of having to click and navigate to another page to view more. Ideally, the posts would load approx 20 at a time. is this possible with Custom CSS? best, Adam
  8. Site URL: https://gdvfx.net/ How can I remove the little white play button that sits on top of all the videos on the video grid? Play button seen in the image reference:
  9. Site URL: https://www.treeartstudio.com/welcome Hey! Im trying to get separate images on my site to appear side by side (two colum) on mobile view. I have tried several codes that were suggested on the forum but nothing seems to work.. There are 3 sections on my main page i need to get on two columns (images below) Please can anyone help me out? Thanks in advanced 🙂
  10. Site URL: https://www.moonroq.club/music Hi, Within my blog's style settings, there is only the option to go up to four columns, in the blog post basic grid layout. Ideally I'd like to try out different numbers of columns to see which works best, but would be happy with six columns. Is this possible with CSS? any help greatly appreciated! Adam
  11. Site URL: https://www.merlinsheldrake.com I want to position a series of embedded youtube videos in a regular grid, two videos per row. When I do this the videos form an irregular grid because the captions are different lengths and cause the videos to offset. I overcame a similar problems with an image grid by using code in the custom CSS box that specifies a minimum height for the caption. I wonder if there is something similar that can be done for the video captions? Here is the code that sets the minimum height for the image captions: .image-card.sqs-dynamic-text-container { min-height: 220px; } Any help most welcome, thank you.
  12. I'm attempting to add a hover like the attached example to videos on my site in a gallery grid. Support suggested adding an Index Gallery but this didn't work. I'm using Pacific but am not opposed to using a different template. Just looking for simple code to use this effect on my thumbnails so users can figure out which video they're hovering over.
  13. I'm trying to add custom css that will make my posts on my portfolio page alternate widths. I want to have a grid that has 2 projects and then 1 beneath and 2 again after for example.
  14. Site URL: https://www.madera-trade.com/stockholm Team... I'm kinda stuck with my project now. The client requested a change of direction after adding a large number of products to a product catalog. He wants the site to flow like this instead. Clearly this layout isn't pulling anything from a product catalog How can I achieve this layout and click-flow? https://www.madera-trade.com/stockholm As I mentioned I loaded approximately 180 single images into a product catalog thinking the ,ultiple images would end up giving me more flexibility in layout. but he really likes how the end result is a page with multiple large images that appear like this https://www.madera-trade.com/sand Can you please advise on the steps I need to create this and what type of "not linked" page I need to create to lead the images in the most efficient manner.
  15. 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.
  16. Site URL: https://www.thislandisdigital.com/test-rectangles I've asked a less clear version of this question and wanted to try again with more clarity. The ideal solution would be flexible enough to be reapplied to achieve various similar arrangements. The immediate solution would strictly allow for the one requested arrangement. I am not amazing at CSS, so feel free to over-explain if you'd like. By default the Avenue template's indexes display a set of pages with identically proportioned thumbnails. In site styles, I can change the image ratio and every thumbnail will always occupy a single grid space. My current design uses square thumbnails (ratio 100, or 1:1) arranged in rows of 4 or, on mobile, rows of 2. In other words, I've created a perfect grid of squares. This design is largely inspired by ArtStation which sets a familiar standard in my industry. What I want is for the first two thumbnails to occupy two spaces in the grid for a ratio of 2:1. Because the rows for both desktop (4) and mobile (2) are divisible by 2, there is space for this in concept. Below are images of what I have and what I need. <<< Permission to stop reading here if you've already got an idea. Check images for reference. ⏰ So far I've been able to selectively target individual images and their backgrounds which I used to apply hover effects. I tried various methods of resizing images but often struggled with automatic vertical scaling (I'm looking for double wide with no change to height). Other attempts only scaled or skewed the image, leaving some part of the overall "thumbnail" structure at its original size. I don't know enough CSS to be able to understand that structure just yet. Below is the code I use to identify and affect particular thumbnails (modifying the "n" to a specific index). It's also how I'll assign rectangular hover images to the double-wide images. a.project:nth-child(n):hover { img { // On hovering over a specific block, affect the image at that selection. opacity: 20%; filter: blur(2px); transition: all 0.5s; } .content-fill { // On hovering over a specific block, affect the filled color at that selection. background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e852b782dc9304ac485f646/1585785720583/Thumbnails_HoverImage-Square_01.png); background-size: cover; //or: 100%; background-position: center center; background-repeat: no-repeat; } } I then tried to assign a {display: grid;} with grid-template-areas to an upper element on an index page. With this I successfully arranged the thumbnails as desired BUT had no control over vertical scaling. The double-wide thumbnails ended up appearing double-tall as well. My assumption here is that the width of the thumbnails was directly tied to the browser window (up to the maximum width), while the height had no obvious point of reference. Both my 1:1 thumbs and my 2:1 thumbs had a height of 512px, yet the height of each row was not identical. Instead, the images were locked to a 1:1 ratio, so if an image was assigned a width of two grid tiles, their height (while still one grid space tall) was doubled as well. I was able to rescale the image itself, but apparently not the entire container which stayed the same. I may have even been able to scale the grid space of each image at one point, but the clickable square and backgrounds and such were overlapping and jammed behind one another. Just lots and lots of weirdness. Below is some code for my attempts and a link to a page to test it. // Name the generic children of the layout in whatever order they appear. #collection-5c89d82aee6eb05083075575 #projectThumbs>div { a:nth-of-type(n){width: 100%;} a:nth-of-type(1){grid-area: one;} a:nth-of-type(2){grid-area: two;} a:nth-of-type(3){grid-area: three;} a:nth-of-type(4){grid-area: four;} a:nth-of-type(5){grid-area: five;} a:nth-of-type(6){grid-area: six;} a:nth-of-type(7){grid-area: seven;} a:nth-of-type(8){grid-area: eight;} a:nth-of-type(9){grid-area: nine;} a:nth-of-type(10){grid-area: ten;} a:nth-of-type(11){grid-area: eleven;} a:nth-of-type(12){grid-area: twelve;} a:nth-of-type(13){grid-area: thirteen;} a:nth-of-type(14){grid-area: fourteen;} a:nth-of-type(15){grid-area: fifteen;} a:nth-of-type(16){grid-area: sixteen;} } // Assign a grid display to the wrapper beneath #projectThumbs. #collection-5e83973d00d63d75669cbd19 #projectThumbs>div { display: grid; // Display the wrapper element as a grid. grid-template-areas: // CENTER ISLANDS "one one two two" // Two big "three four five six" // Four small "seven eight eight nine" //Small big small "ten eleven twelve thirteen" //Four small "fourteen fifteen fifteen sixteen"; // Small big small } // Customize the larger thumbnails. // At this point I was hopelessly lost, so this code is mostly to help isolate the specific indices needing double widths. #collection-5e83973d00d63d75669cbd19 #projectThumbs { a.project:nth-child(1) img, a.project:nth-child(2) img, a.project:nth-child(8) img { height: 50% !important; width: 100% !important; left: 0 !important; right: 0 !important; } a.project:nth-child(1), a.project:nth-child(2), a.project:nth-child(8){ height: 50% !important; width: 100% !important; } }
  17. Site URL: https://thevisualpharmacy.com Hey Guys, I'm trying to find the media queries for my shop grid and my navigation bar. When I shrink my website the social icons in the nav bar dissapear, also my grid goes from being 3 across to just 1 to early. I've searched the code using the inspect element but I can't seem to figure out where it's being triggered. Can anyone lend a hand? I'm using the mark novo template.
  18. 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 😉
  19. 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?
  20. 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!
  21. 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!
  22. 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?
  23. 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! :)
  24. 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
  25. 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
  • Create New...