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


  • Events Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. 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
  2. Site URL: http://www.electricalaudio.com We are creating a list of equipment, and have separated the categories into different stores. For one store, where the items are typically vertical, 2:3 aspect ratio is ideal, for another ultra-widescreen would be best, but for another two or three standard 4:3 would be ideal. If I change the image aspect ratio on one store, it changes across all stores. I think I can do this with some html injection on the store's pages, and I think the class I need to operate on is "ProductItem-gallery-slides, I'm just not sure what property/ value to change. Any help is appreciated. The stores are electricalaudio.com/pedals-1 (2:3) and electricalaudio.com/instruments-1 (4:3).
  3. 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.
  4. Hello to everyone, I'm having this problem while building my website. In most pc monitors, everything looks ok (Image 01), also in mobile version we're fine. But in some monitors (mostly ratio 16/10, Macbooks etc) and also when rezising a browser window things go south (Image 02). Does anyone know how this could be fixed?
  5. Site URL: https://elancloe.com/unlimited-use-stock-photography-5-dollars-to-free-stock-photography Hello, I'm trying to get the photos on my mobile sales page to be shown in their actual aspect ratio so that customers can see what they are buying correctly. The photo looks something like the first one, but the 2nd one is how it looks on the sales page. Is there any way to get the photos on the sales page to be the whole photo in its original aspect ratio? These are digital products so I want people to be able to see what they're buying. Thank you for any help with this!
  6. Site URL: http://www.claudiafrost.co.uk I am selling original paintings on my site, and they vary in dimensions. All of the first images for each post are square, but I need for the first image to be of the painting in its entirety, and then the following ones are details. Is there any way to change to format of the first image so that it corresponds to the dimensions of the work?
  7. Site URL: http://www.stevekephart.com I'm extremely new to this and am trying to figure out how to build my art website and storefront. Some of my drawings have different aspect ratios, 4:3 and 3:4 but the web builder only lets me select one and defaults that to all the pages. This means only part of the drawing is displayed on some pages. I searched for this issue and saw responses about inserting a code on the pages that are affected. What code would I need to insert for this and how would I do this? I believe they specified "page header", but all I see an option for is "site header". Like I said, I'm very new to this. Thanks for your help!
  8. 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
  9. Site URL: https://www.maomiyakoshi.com/ Hi, I am creating the styling portfolio website. Is there any way I can use a different aspect ratio for each page? I would like to keep 3:4 (vertical) for fashion page, and 16:9 Widescreen for Moving image. If anyway could help me, it's much appreciated x Thank you so much! Website: https://www.maomiyakoshi.com/ Password: maomiyakoshi Fashion page ( 3:4 (vertical) ) https://www.maomiyakoshi.com/fashion Moving images ( 16:9 Widescreen ) https://www.maomiyakoshi.com/moving-images
  10. Hi everyone, Would love some help! I’m setting up a landing page and have added a 1 minute video (aspect 16:9). I'm happy with how it looks in the web browser layout but would like to know if there is a way to ‘fix’ the aspect ratio for the mobile, so the video doesn’t become overly cropped? It seems to zoom right in and the text that is playing during the video isn’t readable. Thanks so much for your assistance!
  11. Site URL: https://www.perpetualmp.com/films-2 I'm having trouble resizing embedded youtube videos with the youtube block. The documentation I've found says that video blocks should default to 9:16 and one of my blocks is correctly displaying in that aspect ratio, but others are much taller and are extremely buggy when resizing in fluid engine. They often ricochet into being extremely tall blocks and all other blocks around them get sent far down the page. Is this just fluid engine weirdness? I've tried duplicating the section that worked but when I change the embed source to the other two videos they just revert to this bugged out version.
  12. Site URL: https://www.roxannebradleytate.com/ I have one image in the "featured projects" gallery on my homepage that I would like to be shown full size vs. the 3:2 aspect ratio. (It's the GIF, it's cropped and I want to show the entire animation). Is there any custom CSS I could use to fix this? Thanks in adavance!
  13. Site URL: https://www.marmalademoon.com Hello, Does anyone know how to style the portfolio index page so that the images maintain their original aspect ratio? I also wonder how to match the automatically generated color to that of the image background? /Kate https://www.marmalademoon.com
  14. Site URL: https://themasters.ai In my home landing page, everything is left-indented, except the header and the footer. I would like the content and design of the webpage to be responsive to the screen-size. If the screen is larger, I'd like it to expand and the content to be central. Can anybody please be able to help me with this?
  15. Site URL: https://www.maldire.com/ My website has the products in the lovely gallery mode "wrap" when looking at the desktop version, here is an example: https://www.maldire.com/shop/p/lady-hillingdon-basic When I go to the phone version it becomes a gallery slideshow badly cropped. I tried using this custom CSS but it doesn't make any changes: /* Mobile Product Image */ @media screen and (max-width:767px) { img.ProductItem-gallery-slides-item-image { object-fit: contain !important; } } I just want the images with the full height and no crop. Any ideas? Thanks
  16. Site URL: https://www.chuckgumpert.com/su2022preview I'm interested in using summary blocks to display images collection grid style...currently the design tab setting is "auto" aspect ratio -- but it only scales them on the width -- leaving narrow vertical images looking really odd among the others (the 1:1 options crops non-square images to a square)is there any way to force this so thumbnails would scale to width AND height no matter if they are horizontal, vertical, or square images? -- similar to the settings on a regular gallery block?example page I'm trying to fix: https://www.chuckgumpert.com/su2022preview (see the final vertical image in the grid -- this is what I'd like to fix)On other pages I've used regular gallery block (grid) which has aspect ratio setting as 1:1 — but those scale to height or width, whichever is larger example: https://www.chuckgumpert.com/dragonfire(Avenue Template)Thanks for any help!
  17. Site URL: https://www.myrtlefieldhouse.com I have encountered a problem where I have two different blogs which I want to have different image ratios for. However when I update the image ratio on one blog it also changes it for the other. https://www.myrtlefieldhouse.com/david-gooding-answers - This one should be 'Ultra Widescreen'. https://www.myrtlefieldhouse.com/online-books - This one should be 'Square'. Why are these linked?
  18. Site URL: https://tilnak.com Embedded video from Vidtags software he's not resizing on the mobile devices – like YouTube or Vimeo. I have seen this problem coming up time after time on squarespace. What is the exact procedure so that the video is normal-size on desktop but it's reduce to the same window size like YouTube and Vimeo but using the embed tool instead. Also, because I am hosting my videos on "Vidtags", can I use the URL where it is being hosted? I have taken the videos off my site because I can't leave them the way they are. Please help ASAP
  19. 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
  20. 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.
  21. Site URL: https://www.drbitakhosraviannd.com/ I'm hoping somebody helps me address a problem that I have encountered after finishing up with a web design. I have used meta queries to target specific code blocks for specific screen devices. I'm trying to include medium-size screen devices (640px to 1020px) in my design. So far, I was able to do small screen devices smaller than 640px and bigger than 1020px. I will be able to fully address this issue and complete a fully responsive web design with the help of someone who can direct me. Some snapshots of the code I'm currently modifying have been attached below. /*logo location inside header for large screen */ @media only screen and (min-width:1026px){ .header-title-nav-wrapper::after{ content:''; display:inline-block; filter: drop-shadow(0px 0px 0px #32273B); width:350px ; height:350px ; margin-right:75% ; margin-bottom:-30%; margin-top:-35%; background:url("https://static1.squarespace.com/static/625489cfd1bb3e25eb48f482/t/6264d15125c2c52567db0c60/1650774353433/Pastel_Elegant_Daisy_%D0%A1hamomile_Flower_Herbal_logo-removebg-preview+%281%29.png") no-repeat 0 0; background-size:100%; } } Big Screen /*logo location inside header for medium screens */ @media screen and (min-width: 641px) and (max-width: 1025px){ .header-title-nav-wrapper::after{ content:''; display:inline-block; filter: drop-shadow(0px 0px 0px #32273B); width:200px; height:200px; margin-left:-30%; margin-bottom:-15%; margin-top:-35%; background:url("https://static1.squarespace.com/static/625489cfd1bb3e25eb48f482/t/6263346c385110598db19cf4/1650668652171/Blue_Business_Architecture_Design_Logo_-_Logos-removebg-preview.png") no-repeat 0 0; background-size:100%; } } Target screen size: not successful /*Not display Site name on Phone or tablet Version*/ @media only screen and (max-width:640px){ .header-title-text { display:none; } } Phone screen size Thanks in advance
  22. Site URL: https://www.lapaginadeauxi.com/ Hello everyone, I hope you are well. I want to show you, it's a website I made for a friend. I took a template (https://kester-demo-es.squarespace.com/?nochrome=true) and edited it with the resources that works for it. The context: she is a graphic designer, illustrator and documenter. Use the web as a showcase for her work and soon we will enable a whiteboard tab. As she also does lettering, a separate business is the rental of her lettering boards. I used the template and edited a few things. I hope you can give me suggestions on how to visually improve what you can to make it look better. Greetings! D.
  23. Site URL: https://www.portanova.pt/agenda website pass: ******* I have a event posters previously made but when I try to add them to the event page they get cut. Now they are set to a 3:2 ratio mas no matter the ratio I select it always cuts the posters. On summary block, square space resizes them automatically and they fit perfectly but an automatic option is not available on the event page. How can I turn this around? Example on the image attached:
  24. The home page of my website opens to a landscape photo of my team. When I change my website to the mobile mode it just crops it vertically so that you can not even see the full picture. Ideally, I would want to have it so the picture just becomes smaller on the mobile so you can see the full thing. Is that possible? Do I need to code something into it or is there a format option? iwdwd.com is the link to the homepage.
  25. Site URL: https://www.decoratedwolves.com/cult-heroes Hey, Just wondering if someone can help with an image constraint/aspect ratio issue I'm having? I have 3 images, all the same height, but one with larger width. Is there a way to get rid of the constraint so they all remain the same height when viewing on desktop? The page in question > https://www.decoratedwolves.com/cult-heroes Thanks Steve
  • 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.