Jump to content

Search the Community

Showing results for tags 'aspect-ratio'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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. Hi there! I am wanting to embed a vertical Vimeo video so that the sizing is responsive for desktop and mobile viewing. The issue I am having is that when I embed the video, it seems to be responsive to the width instead of the height, making the video much too tall so I have to scroll down to find the play button. When I adjust the size limitations and add centering code, I can get this to work on the desktop but then the mobile version is still off. Is there a way to have the the responsive embedding work based off the height of the video instead of the width? Ideally the video is centered in the block and fits within the visible height of the browser. I am not a coder so I'm feeling around in the dark here. I would appreciate any help! Thanks!
  2. Hi, I have created a members area on a site i'm building for a client. Part of the members area has a video collection which works grate and is exactly what the client wanted, apart from her videos are already hosed on Vimeo and to has too many to move to Square Space. The problem as you can hopefully see from the image is that Vimeo has a 16:9 ratio and the collections page is using (I think) 4:3 which cuts of the edges of the video. Does anyone know how to or have code that will force the images of the videos on the collections page to display in 16:9? Cheers Dan
  3. Hi, has anyone had any luck with the below? I am trying to add an image to only half of my home page - and have it cross into the header section. Please see image for reference of what I am trying to achieve. I'm hoping someone has had success with this 🤞
  4. Hi All, I've set my website up with 1:1 aspect ratio as it the easiest to use my photos on multiple platforms (for marketing purposes). However, I have c4,000 images that I have previously taken and used on eBay. How can I either insert custom code to take these 3:4 images and put them on a 1:1 with black background? Or is there a way I can bulk edit these offsite and then ? I'm stuck on this one, it seems as though this should be simple but it isn't (or am I wrong? 🙂 ) I have an app where I do this but it only does one image at a time - which really isn't an option for 4,000 photos. Thanks, Chris This is my website www.booksthatexpandthemind.co.uk
  5. The website I'm building (unfortunately I'm not able to give a url), has 5 sections to it. On the home page I want the name of each section with an image behind it. Basically what I want is for all 5 images to be visible on the page so that visitors don't need to scroll down at all. I can just adjust the sizes to make it fit on my screen, but as soon as someone else goes on the website to approve the draft, it doesn't work because their laptop has a different size screen.
  6. Site URL: https://mackerel-primrose-ctj9.squarespace.com/ Hi, I would like to use a custom (2:1) aspect ratio for the projects shown in the grid display of my main portfolio page. The drop-down menu is limited to the following: Is there a code I can use to achieve that 2:1 aspect ratio to avoid any cropping to my custom 2:1 images? https://mackerel-primrose-ctj9.squarespace.com/ pw: demosite Just as a reference, there was a question almost identical to mine which I found in search, however the code provided didn't seem to do anything when applied to my site: Thank you for the help.
  7. Greetings squarespace community. I have a small problem with my fall back image. In mobile version the image is getting crop a lot. Is there any way to display it in it's original aspect ratio only for mobile? My website is https://www.star-surfing.com Thanks.
  8. I've edited a video in 16:9 aspect ratio, as recommended by Squarespace, but when I upload the video to my banner heading it crops off about 1/5 from the top of the video. The banner is set to its maximum height L and to fill screen. I've tried changing the aspect ratio (same problem occurs) and making the section bigger by adding rows (just zooms into the video). Any ideas please? Thanks Will
  9. Hi there I am working on an online shop for fine art prints and want to show the products in their original aspect ratio. For example the product "Cristo" is a portrait image. Is there a way to assign different aspect ratios to different pages of the site without any images cutting off, and with still being able to use the slideshow option? The art prints are sold in portrait and landscape format. https://nuvu-gallery.squarespace.com/ PW: nuvu2022 The old website was providing that, it is mandatory for my client. For example old website url: https://www.nuvu.ch/produkt-kategorie/staedte/ Many thanks for your help Sibylle
  10. Our weekly worship service video is in 720p at 16:9 and is livestreamed to YouTube for viewing there. A .jpg image (1280x720 pixels at 420 pixels/inch) is appended as an introductory graphic. When viewed on our YouTube page, it looks like this: Next, the YouTube URL of the video is pasted into our Facebook page for viewing also and correctly looks like this: However, when I use a Squarespace video block and paste in the YouTube video URL it looks like this: On Squarespace the graphic is way out of whack and the video itself is letterboxed. On YouTube and Facebook there is no letterboxing. Here on Squarespace this is not a problem with other of our videos posted elsewhere and which do not have a similar graphic. So I think there is something wrong with the graphic's aspect ratio or size or something which is causing the distorted appearance and the letterboxing. I'm stumped and not the most knowledgeable about how a graphic and video interact. But there's something about it that Squarespace does not like. When creating this topic I tried to supply the "Site URL" as requested, but I don't think it was accepted by the system: https://www.christlutheranhendricks.org/worship-service-videos Help!!!!! Paul Olson, Hendricks, MN polson@itctel.com
  11. Hi everyone, I'm hoping someone could help. I am making a photography website and need most of my product images to be set to an aspect ratio of 16:9. I was able to do this for the main store front where customers can see the thumbnails, but when I click on the individual products, the only formatting options for the page are full, half, wrap, etc. I set it to wrap. It looks ok, but it looks it is either a 4:3 ratio or just square. This won't work for photos with a wide aspect ratio. Is there a way to change the ratio of the images to 16:9 on the individual product pages. I attached a couple images to illustrate what I'm talking about. Thank you! Jeremy
  12. Hello all, I am building a photography portfolio site and would like to use multiple aspect ratios of for different photos on the same gallery page. The majority of the photos so far are in 2:3 (portrait) and I would like to add one landscape 4:3 photo into a row while maintaining constant spacing between photos. I attached a little sketch to show what I have in mind. I'm assuming this would require some CSS script and I know nothing about that. Does anyone happen to have done anything similar that they wouldn't mind sharing? Also I know the 4:3 photo won't *technically* be 4:3, I just haven't figured out exactly what it will need to be to fit, yet. Thanks in advance, Ian Edit: I found an easy workaround to the point where I don't need any script, I just inserted a new section to the gallery page and used the "strips" gallery type, and only used two images. This created exactly the desired effect for anyone else that has this issue.
  13. Hi, I'm designing a website but on PC chrome browser there is a large gap coming up on pages. In the builder there are no gaps and I've built and rebuilt and changed things multiple times with no solution found yet. On other browser the website has no gap. What is the cause of this? I've attached pictures of the two browsers and how it comes up. Appreciate any help.
  14. Hey Team, I'm looking to change the aspect ratio of all the videos (to square / 1:1) on one specific portfolio page - frustratingly it appears to be one that doesn't allow me to inject specific code into it. https://benjackthomas.com/portfolio/samsung-that-sucks I've read that this can be done with injected code and changing the padding but I can't work out how to specify only that page and also where to inject the code. Any help would be ace. Cheers, Ben
  15. Site URL: https://www.clic.com/ Hi, I have been having an issue with this site that I can't seem to find an ideal solution to. There are many product pages with different types of products that all have different dimensions of images. Some are artworks that cannot be cropped and are mostly horizontal while some are products that are mostly vertical. Having all images at the same aspect ratio while also having the slideshow gallery option (rather than stacked) causes some of the artworks to be cut off on the checkout page. I tried adding in some css to solve this. This is what I used: .ProductItem-gallery-slides-item-image { object-fit: contain !important; object-position: middle; width: 100% !important; height: 100% !important; position: static !important;} .tweak-product-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides::before { padding-bottom: 0 !important;} .tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item { position: relative !important;} This did successfully stop images from being cut off on the checkout page, but some of the images show up too large and were blurry. It also created an issue with the slideshow gallery of secondary product images (they showed up with a large gap underneath the main image rather than directly underneath). I removed the code and right now am temporarily using the stacked option, but this isn't ideal and some images are still too big on the checkout page. Here are examples of this issue: https://www.clic.com/art-books/picasso-sculpture https://www.clic.com/love-tanjane/raw-pleat-collar-dress-in-army-from-love-tanjane Is there a way to assign different aspect ratios to different pages of the site without any images cutting off, without images being too big/blurry, and with still being able to use the slideshow option? Thank you!
  16. This may be a stupid question, but I just can't figure out what the aspect ratio is for the grid for this new fluid engine approach. I'm trying to update my website (which is a design portfolio), and I'm struggling to figure out what size I need to export everything at so that I can keep spacing consistent in-between separate graphics as well as keep them at the same width. I know I can choose "fill" instead of "fit," however this then cuts off parts of the design I'm displaying - which I do not want, either. I guess I'm looking for some sort of information like "a block is 1" wide and the gap is .125" wide" or anything similar so I can size and export my graphics to line up with the blocks correctly, since you can't stop an edge in the middle of a block, either. Below is an example where one way the (first) graphic doesn't line up height-wise, but then if I adjust the height, then the width doesn't line up. Pre-adjustment: Post-adjustment:
  17. Site URL: https://www.clipsk.com/test I'm trying to embed or upload videos displayed in vertical / 9:16 aspect ratio but I can't find a way to make it work. The video block always shows up in standard widescreen format. If I use an embed block and define aspect ratio in pixels in the embed code, the video flows outside of the container/block. https://www.clipsk.com/test
  18. Dear Community, on a website, I want to build something like this: 3 color boxes with text describing services. The fields are all the same size, regardless of the text length. Text and boxes are responsive, as in the video below. I am using Squarespace 7.1 and I despair 🙂 Who can help? screen-capture (3).webm
  19. Site URL: https://www.terroir-imports.com/products.com Hi there! I am looking to change the focal-point of my images so that you can only see the product labels in the e-commerce. However, despite changing the aspect ratio to the desired 2.40 Anamorphic widescreen and adjusting the focal-point, the image is still not displaying as desired. Here is what I get: Any chance someone can help me out with this? @creedon, any tips 🙂 ? Thank you!
  20. I am designing a website to display my photography. In the template I selected photos seem to be required to fit into a selected aspect ratio. The trouble is, my photographs often do not comply with standard aspect ratios. For example, I have many panoramas that are much wider than would fit into a 16x9 aspect ratio. Is there a way to have no required aspect ratio, and let each photo dictate the space required to display it? Thank you for any suggested solutions.
  21. Hi! On my page www.alexawolf.com/narrative (no password) - I would like an easy way of setting all the images to the same height, instead of just having to eyeball it and them getting off slightly as you get farther down the page. Because of some other custom css these need to stay as poster image blocks and not a gallery grid unfortunately. Ideally I would like a 2.39:1 aspect ratio for each image, but without needing to crop them all in an outside application. This aspect ratio is currently available in the gallery grid options, but not in the regular image editor. I assume setting an aspect ratio is better than a pixel height so that it scales more easily on different sized screens and devices. Thanks for the help!
  22. Does anyone know how to change the aspect ratio for video player? I'm using the uploaded-to-Squarespace video option in fluid engine and wanted to get a fun little gallery of 4-5 talking head video shorts, using a 4:5 aspect ratio. I can upload videos in that aspect, and when actually playing it (desktop) looks as I want it to, but the video controllers are in a 16:9 shape, and so is the cropped thumbnail before you hit play. And on mobile it keeps the 16:9 ratio so the video is too small, when a 4:5 should look good on mobile with the videos stacked. If I make the video block the right shape, it just shrinks the video inside it right down with a gap top and bottom. It feels like there should be a 'design' tab in the video block to control how it looks. So frustrating! Site https://digital-prospectus.squarespace.com/ Password: Dani123 - forgive the random appearance, it's in 'playing with ideas' stage at present. Screenshots: 1 and 2 are the thumbnail and video controls showing how it forces a wider aspect ratio. The third one is what it looks like whilst playing, this is how I want it to look. 4 is playing in mobile - it shrinks down because it is using the too wide video block.
  23. Site URL: https://coconut-grasshopper-b736.squarespace.com/config/pages/632491ecd2457c0d3e60fa0e?p site password : gingerkev Hi all Re. my 'about/contact2' page .... Can anyone help with CSS code that will change aspect ratio to 3:4 vertical on mobile devices only? Tried improvising with answers to similar forum questions , but sadly without success... thanks in advance Kev
  24. I'm working on my unpublished online store at present which will be selling photography prints. There is no option of a masonry grid and / or auto aspect ratio so all the images / products that are not in the fixed ratio simply don't show correctly. When you're wanting to sell a print and can't see the whole image, it's naturally pretty useless. Can anyone help please?
  25. I'm trying to create multiple portfolio pages on the same website which use different settings/ styles. For example, I'd like them all to be a 'simple grid', but I want one to be 3 columns with an aspect ratio as Ultra Widescreen, and another to have 4 columns with aspect ratio of 3;2.... When I update the settings of one it updates these across both portfolios. Is it possible to style these separately? ULTRA WINDSCREEN https://maroon-sponge-lp55.squarespace.com/portfolio-2-2-1 3:2 ASPECT https://maroon-sponge-lp55.squarespace.com/commissions I plan on having multiple portfolios and id love them to al be different styles. Any help would be great... Jack
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.