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. 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!
  2. 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
  3. 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.
  4. 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:
  5. 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.
  6. 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
  7. 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…
  8. 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!
  9. 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
  10. I am trying to setup a photo print store. To deal with varying aspect ratios of different images, I would like to change the number of products displayed per row in the squarespace store. For example: First row is 2 landscape images at 3:2 ratio side by side. Second row is 3 portrait images at 2:3 ration side by side. Third row is 1 panoramic image at 16:9. Forth row could be 3 portrait images again. Basically I want to display 2 products per row if the images are landscape, 3 per row if portrait and 1 per row if panoramic. I have used this code successfully to hack the aspect ratios: https://sf.digital/squarespace-solutions/how-to-show-product-images-in-their-original-aspect-ratio-on-squarespace-71 However, this makes my product page have huge portrait images and tiny panoramic images (because the pano images are trying to squeeze into the narrow width of the column). Unfortunately it is not possible to add another shop section with a different number of columns. Thanks a lot in advance.
  11. Site URL: https://www.fennaustin.com I have two completely different pages that are somehow affecting each other. When I change the amount of columns of a gallery on one page it will reset the gallery on another. How do I fix this?
  12. Site URL: https://sphere-bassoon-s7rj.squarespace.com/home-2 I would like specific background images to display as horizontal images vs vertical on mobile in the aspect ratio that I want (4:3). https://sphere-bassoon-s7rj.squarespace.com/home-2 PW: kirankiran Thank you!
  13. Site URL: https://www.ttci.tech/test-home-page Hello, I've embedded some custom code to turn 6 headline blocks into a scrolling slideshow. It's working fine on desktop but populates awkwardly on mobile. I'm interested in possible solutions to show the full image in mobile rather than a cropped version. An example of what I mean (much more complex and built in wordpress) is bikepacking.com. Any ideas and solutions welcome. Thank you all in advance! password: testing... Adam
  14. 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!
  15. 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
  16. 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.
  17. 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!
  18. Site URL: https://adrianrydz.squarespace.com/shop I have one of the last main problems to fix before publishing my page. I would like to have all my product images in original aspect ratio in my store page (MOBILE AND DESKTOP). I would like to offer some prints in landscape orientation, and others in portrait orientation without cropping. I am aware of creating Product Blocks to create a custom online store layout with product blogs on a different page, and then hiding the Store Page by moving it to the not linked section of the Pages panel. And honestly so I did, however I am not happy with custom online store layout, so I would rather stay with ORGINAL STORE PAGE. May I ask anyone to help me to fix this problem... PASSWORD... yumichan
  19. Any ideas on how to individually resize the images on my product page? For whatever reason Squarespace will only allow the user to select 1 specific aspect ratio, for all products. I'm trying to develop a website for selling photos, and photos come in all shapes and sizes. Picking one aspect ratio results in some images/products being cropped. I've already setup my "Store" using the product photo option (which allows for custom aspect ratios), and then unlinking my official product page. However, when the customer clicks on the photo they want to buy, the page updates to the official product page photo, which is cropped to the wrong aspect ratio. It appears my only option is to inject CSS code (per Squarespace IT), which I know nothing about. However, when I look at the FAQs on that potential solution, it specifically says to NOT use CSS to change image sizing. If I cannot fix this issue, it's a dealbreaker for me to use Squarespace as my web host. Hoping someone has an idea on how I can move forward. Thanks, Max
  20. Site URL: http://markbagallyart61.squarespace.com Hi there - I've put together a flipbook on the Heyzine site and embedded it into my website. That's all good however it's actually too small and I'd like to enlarge/expand it so it fills more of the page. Any suggestions?
  21. 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)
  22. 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
  23. 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!
  24. 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.
  25. Site URL: https://www.jlbequine.co.uk Hello \o. First time posting here, I've started a website to sell my photos, I've set the aspect ratio to wide (most of my photos are landscape) however when I uploaded a few portrait photos i noticed half the image gets cut off, I've asked squarespace for help and was sent here, i have no idea how to code or even where to get started, call me a virgin. can anyone have a look and see if they could help me with this at all. i need there to be a mixture of landscape and portrate aspects depending on if the photo is landscape or portrait. i wont sell a photo if half the image is cut off. I'm happy to provide whatever i can to help
  • Create New...