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

Search the Community

Showing results for tags 'responsive'.

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


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://trainiz.com/ Hello, I added this code on my website to insert a qualtrics forms I created : <iframe src="https://edhec.az1.qualtrics.com/jfe/form/SV_9tTUol10UKXqMWq" width="800px" height="1000px"></iframe> The display works fine on the laptop version but on the mobile version we need to unzoom the page to see the entire form. Can you help me with that please ?
  2. Site URL: https://apricot-minnow-acst.squarespace.com/member-areas-4 Hi Everyone, I'm having an issue with an image looking strange when I am viewing the page on mobile. I am happy with how the "Freebie" block looks on desktop: ...But when I resize it on mobile it looks very small height-wise: The other blocks resize to an almost square shape and I would like something similar for the freebie bloack. Is there a way to achieve this when resized? Thanks!
  3. Site URL: https://hebdenroydprimary.squarespace.com/new-homepage As I gradually improve at Squarespace design, I'm focussing on trying to make sure that mobile and tablet views look as good as desktop. One thing I'd like to be able to control is the point at which content blocks stack on top of one another rather than side by side. In a couple of sections on this homepage (in 7.0 Brine), the tablet view just looks off because the side by side sections get too skinny, or a button gets cut off. I'd like them to stack sooner. Is that something I can control? Set a minimum width for certain block types maybe? Can I do it for certain sections or site wide?
  4. Site URL: https://ladybug-vuvuzela-psmw.squarespace.com Hoping someone can help. I am trying to add some horizontal lines in my website, but I need them to occupy the full width (minus the website’s overall margins) of any screen view β€” in other words to appear in desktop view like the do in mobile. Thanks.
  5. Site URL: https://mindfulwaves.com/ Hello! I can't find the way to add some margin to my mobile version. Hope someone can help! Thanks
  6. Site URL: https://tambourine-oarfish-c28h.squarespace.com/ Looking to center the navigation links between the logo and Add to Cart button without the links stacking or the logo shrinking. Currently using the code below to achieve something close to the desired look, but I'm having issues with the nav staying centered on all screen sizes and the logo not shrinking down to nothing on smaller screens. .header-title-nav-wrapper { flex: 1 0 82%; } .header-layout-nav-center .header-nav { width: 100% !important; flex: 0 1 auto; } .header-layout-nav-center .header-nav-list { justify-content: flex-end; flex-wrap: nowrap; } Desired effect attached. Thank you! https://tambourine-oarfish-c28h.squarespace.com/ password: Bestcannoli2021!
  7. Site URL: https://sprout-dragonfly-f48x.squarespace.com/ Hi there, I'm implementing an image in my website that I need only at 25 % of its size. On the desktop version I just implemented some empty space next to it to resize the whole thing. However, on mobile the image appears full screen. I resized it via CSS to max-width of 25 % but it's either possible for all images (than it works fine but all other images are just as small) or I target only the specific image with data-image-id but that's not working. It resizes the image but the whole container stays the size of the full size image and therefore creates too much space underneath the now smaller image. I've used this CSS code: @media screen and (max-width: 640px) { [data-image-id="60e8168657d2352c927ec54d"] { max-width: 25%; max-height: 25%; } } In the attachment I show you a screenshot of what it looks like now on the website. I also attach an image of what I want it to look like (if I address all images it works perfectly but not when I try to address only the one). Thank you for your help! Sarah
  8. Site URL: https://sawfish-strawberry-4hha.squarespace.com/config/ Hi, ---How do I ensure that the logo I have in my footer displays smaller when viewed on a mobile than it does when viewed on a laptop? ---Also, is there a really specific video explaining how to do this? Much thanks in advance 😊
  9. Site URL: https://www.lucyfeehan.com/work/paysafecard I have a video background block on this page (around half way down) The video works great on desktop but on mobile is totally the wrong size. I would like to display the fallback image on mobile OR resize the background video. How do I do this?
  10. Hi :) How can I resize the embedded Figma block to have the proportions of a mobile phone? I would like to add a Figma prototype for a mobile application to my Squarespace website. I tried adding it, but it has the wrong proportions - it is too short and too broad. This is how it looks: I would like the Figma prototype to look more like this and to be responsive for mobile view: I used this code to create it: <html> <head> <style> #content { width: 800px; margin: auto; height: 100%; display: flex; align-items: center; } </style> </head> <body> <div id="content"> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqfvtLv9FQgLOek1VqmI9OM%2FPhoneScreenTestSqurespace%3Fnode-id%3D1%253A32%26scaling%3Dmin-zoom%26page-id%3D0%253A1" allowfullscreen></iframe> </div> </body> </html> I found the code here: https://www.figma.com/developers/embed Here the link to the prototype again: https://www.figma.com/proto/qfvtLv9FQgLOek1VqmI9OM/PhoneScreenTestSqurespace?node-id=1%3A32&scaling=min-zoom&page-id=0%3A1 I would be very grateful if you could help me :) Thank you in advance!
  11. Site URL: https://www.inneco.de/eco-basic-eco-premium Hi there, how can I make my landing page responsive to different screen sizes? It is quite fine for mobile view and big screens. But it does not look good in between desktop and mobile view. the Logo gets too big or the banner is not full width so it is cut off on the right side (see screen shots). Does anyone know what code I need to show the banner in full width and to avoid the logo (image) getting too big? Thank you for helping!
  12. I have a customer after a custom mobile view for their home page. They want have a totally different background image loaded. Is this possible somehow? I would love some ideas and a solution and happy to work with a third party contractor if needed. Cheers, Brent
  13. Site URL: https://www.platformartprojects.com/babar-suleman-project Hello, I have created an embedded image map with image-map.net. Is there some code I could add that will make this work responsively on all devices? I would also like to remove the header and footer space from just this page on the site so that the image is full bleed. At the moment it looks fine on desktop but white blocks appear in the top and bottom right side of the screen on mobile. I'm very grateful for any help!
  14. Site URL: https://data-construccion.squarespace.com/ Hello there - I'm struggling here. I have a customer who is super protective with his products. He wants to publish a book, but don't want people to download it (easily). So, I figured the Google Doc Publish option would be a good option. The problem is I paste the code of iFrame in my site... and it's not working. I mean, you'll see a horrible box and I tried to add size and everything, but still not looking good in the mobile version. Any help? <iframe src="https://docs.google.com/document/d/e/2PACX-1vR9v9lJ92AdWY892yS8nWyV9BwbiKvrgq5ozEIMOkRiBqnCpS7GCOMWgyKSzp4WSUTkneZ6dUYJba4c/pub?embedded=true"> </iframe>
  15. Site URL: https://www.nadiaizazi.com/ Hi there, I noticed when I scale down the browser, my text doesn't adjust automatically and instead it breaks the words apart randomly therefore making the copy unreadable. Would you be able to help with this please? Please see attached to see what I'm talking about. Thank you!
  16. Site URL: https://www.erateconsulting.com/ Hi everyone, I came across an issue when resizing my website using Chrome. On some screensizes (not all), the main navigation overlaps my logo instead of breaking into two lines. On the screen shot below my window is about half the size of my screen. Any ideas of how to fix it? 😞
  17. Site URL: https://www.relationshipcounsellingtoronto.com/ My client noticed that the images on the homepage under the service section (lower 3 images) are not aligned. I was able to recreate this by making the window size smaller and larger. It seem the image shifts as the text adjusts to different lines as the browser window get smaller. How can I prevent the images from shifting? The page is live so not sure if you still need my login info: https://www.relationshipcounsellingtoronto.com/ Thank you for your help.
  18. Site URL: https://www.wildflowerdesignco.co.uk/ Hello, Would someone be able to help me out with what CSS to use to get my images to go right up against the top, bottom and side of a section like the below website? And also add all the section borders? https://www.wildflowerdesignco.co.uk/ Also, how am I then able to have it mobile responsive in the same way as the above website? thanks so much!
  19. Site URL: https://www.humansinbetween.com.au/ Hi there, We are working on a group uni assignment and none of us are coders. Originally we had a banner image that was responsive but it kept being cut of depending what size you were looking at it. We wanted to constrain the proportions, because the graphic can't be cropped. One of my team members found a post for code to not crop the banner image: https://forum.squarespace.com/topic/22506-bedford-changing-the-banner-height/?fbclid=IwAR0ArUtAL0CMk9c8K9ZaZg3fOWHSvInfcifKyX_muI5EXknQ2xJR8DpaDtI But now it's not responsive. What can we do to fix this? Thanks so much.
  20. Site URL: https://algae-tuna-pjta.squarespace.com/home Hello! I am hoping to get some help with the css code to make two of the buttons on my homepage side-by-side for mobile? The site is :https://algae-tuna-pjta.squarespace.com/home Password: maggie The buttons are in the last section above the footer, screenshot attached. Thanks, in advance!
  21. Site URL: https://www.mikepruim.com Hi, on my responsive website, I have 2 blocks laid out side by side so that on desktop and tablet they are on the same row (see attached). However, on mobile the 2 blocks stack on top of each other which causes an odd layout because of the alignments of each. Is there any way to keep the social media buttons and the resume button on the same line on mobile?
  22. Site URL: https://cow-koi-sa4z.squarespace.com/mobile-design Hello πŸ™‚ I am looking for some help with the layout of a figma link I have embedded into my squarespace site, within my UI mobile design page. I would like to centre align the Figma block. At the moment it is off centre which also effects the display in mobile view. Any help would be greatly appreciated! Thank you!
  23. Site URL: https://www.ultimategearlists.com/ I am using Squarespace 7.0, with the Five template. The link to my site is: https://www.ultimategearlists.com/. My desktop navigation menu has grown, and now has too many elements to fit in a single line when viewing on a narrower desktop or a tablet. I would therefore like to use an arbitrary breakpoint (say around ~1200px) below which the navigation bar changes to a right-aligned hamburger icon and clicking on the hamburger icon will produce a drop down navigation similar to mobile. Unfortunately the breakpoint for switching from desktop navigation to mobile navigation (i.e. hamburger) appears hardcoded in the Five template, at 640px. So I likely need to use custom CSS to get around that. I have tried various custom CSS approaches based on other forum posts, but none seem to work. Perhaps since they aren't suitable to the Five template. Any assistance would be much appreciated!
  24. Site URL: https://seabass-wisteria-9mzs.squarespace.com/config/ Hi there, I am having trouble sizing a couple of images on my site on the 'our story' page. I am happy with how they are displayed on desktop, but i dont like how they are cropping when changing to the mobile spec. Could anyone help with the code i need to force these images to be uncropped (just showing the full width of the image in landscape size) when viewed in mobile please?
  25. Hello, I am currently having trouble making my shop page translate nicely when viewed on mobile devices. 2 questions 1. How do I ensure that my "shop" header is stays center aligned when going into mobile view (it is centered in the desktop view but left aligns on mobile) 2. How do I make my product description go right under the product title in mobile view? I don't like how the description comes after the product size options. Pictures are attached for reference!! Thank you in advance!!
  • Create New...