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
  • 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 28 results

  1. 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
  2. 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 🙂
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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:
  8. 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.
  9. 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; } }
  10. 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.
  11. 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 😉
  12. 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?
  13. 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!
  14. 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!
  15. 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?
  16. 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! :)
  17. 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
  18. 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
  19. 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.
  20. 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
  21. 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?
  22. 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.
  23. 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?
  24. 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.
  25. 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.
×
×
  • Create New...