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

Search the Community

Showing results for tags 'aspect-ratio'.

  • 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
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • 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 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!
  2. 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.
  3. 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
  4. 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!
  5. 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
  6. 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?
  7. 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
  8. 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!
  9. 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?
  10. 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
  11. 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
  12. 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.
  13. 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
  14. 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.
  15. 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:
  16. 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.
  17. 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
  18. Site URL: https://www.pixhousevideo.ca Hello. I would like to choose an aspect-ratio for my thumbnails on my video page. The actual aspect-ratio is 3:2 but why?! All thumbnails videos are in 16:9. I wanted to use this new page which corresponds better to the videos but my thumbnails end up being cropped…
  19. Site URL: https://www.thehabituallyelevated.com/clipx Hiya! Just as the title states is exactly what I'm looking to do. Currently, I have a video uploaded as a background for one of my text blocks. Looks fine on desktop however it stretches past the container on mobile view. I feel like this extends the realm of HTML & CSS (media query that you would use for images) into JavaScript which I am still trying my hand at. How would I go about resize this? Please see attachment for example. Thank you in advance!
  20. I've have read a thread regarding photo aspect ratio alterations across different product pages, for example, I'm a photographer, half of my photos are meant to be seen 4:3 horizontal and some need to be 3:4 vertical. I have made two separate pages which is ridiculous to me but they still look the same across the whole website. I need control. I tried using the code <style> .tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides:before { padding-bottom: 130% !important; } </style> that I grabbed off another thread here, pasted it into the "header" area but it did not work. Help? I don't really understand the CSS shorthand directions other than GO HERE < THEN HERE < ETC > ETC ...please help! What I would truly like is for ALL my photos to be displayed correctly on ONE PRODUCT PAGE having the photos at differing aspect ratios...is that possible too? 🙂 Mahalo
  21. Hello, I was wondering if its possible to keep a 3:2 image ratio on computer screens but for mobile phones and iPad/tablet use CSS to force a square gallery? Thank you
  22. Site URL: https://wedge-krill-fba6.squarespace.com/ When importing my images, they are auto-cropping after I save the changes on the page. All images are the same size, but they all auto crop but the last one. I am fine with the auto-cropped look, I just need them to be consistent. Does anyone know why all but one of the images change size? I've tried multiple times to reupload each of them.
  23. Site URL: https://wocostudios.com/bellehumeur-co Hello, I am trying to understand how these 7.1 sections work, and I am a bit confused on how to get the image at the top of the page to scale down rather than crop in from desktop --> mobile So the mobile view and desktop view (good) screenshots are what I am going for. My challenge is, in order to get the mobile to look like that I have to make the section height "Small" which results in the desktop view (bad) screenshot I attached. Is there a way to have this particular section header scale down rather than crop in when it goes from Desktop --> Mobile? Additionally, (not sure if I need a separate post for this, if so not a problem to make one)
  24. Hi all - hope someone can please advise! I'm using a summary block gallery to create a clickthrough page as my homepage, and have linked this gallery to an original gallery page where my images were originally loaded. The original gallery page layout is great, and takes account of images of different aspect ratios - however the summary gallery does not, and now some of my images are weirdly cropped - I can see other users with the same set-up have managed to successfully use the same set-up and preserve the correct image ratios. Does anyone have any insight as to how to rectify at all? I'm using Wells. Thank you!
  25. 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!
  • Create New...