Jump to content

Search the Community

Showing results for tags 'responsive-design'.

  • 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. Hey there! I am a newbie website designer and I'm looking for some help! My client pointed out that when we shrink down the website window, the icons overlay on the text in the footer, as well as some weird things happen throughout the pages. Is there a way to fix this? Can I have the site just stay stationary and size down, versus be responsive and move all the individual objects etc.? I also recognize there are some other issues going on with the homepage banner sizing that I'm going to write another forum post on, unless anyone here knows how to fix this as well? Thank you so much! The site URL is: https://www.jmillerconsulting.ca/ Image 1 is of the footer getting all wonky, image 2 is how it should look.
  2. Hi all, I'm currently building this website for a client, and while I've coded it to load different elements for desktop and mobile, portrait iPad/tablet is still a bit of an issue. What I'd love to do is force the website to just load the mobile version for portrait tablets but I'm not really sure where to start, or what size to specify the break at? Can anyone help me with a bit of code that could help address this? I've attached screens at desktop, mobile and then ipad portrait (the problem child). Site: https://houseofgods2023.squarespace.com/ Pass: hotdogwatermelon All the best, Asa
  3. Site URL: http://www.moonlitdesign.uk I am so disheartened and not sure what i've done wrong. How do I create a fully responsive design where images and text do not move around when you resize the browser? i've set the media queries for mobile, tablet and laptop perfectly. There isn't one set for desktop, as I did all that coding first, then did the media queries for the other devices after. is this my issue? I'm just trying to find out what is best practices to make it work.
  4. Hello! I am trying to figure out how to resolve an issue with the responsive design aspect of a site that I manage. I built this page: https://www.katyoberlecreative.com/media on a 16" Macbook Pro. It looks great on my screen as well as on mobile, but when it is viewed on a smaller laptop screen there are all sorts of issues with text overlapping, rather than dynamically resizing via responsive design, as I expected it would. Attached are screen shots from the client of how this content is appearing on their smaller laptop screen. I am able to produce the same results by dragging my browser screen to be smaller. It eventually switches to the view I see on mobile but in between is riddled with issues. Here is a screen share video: https://www.loom.com/share/c5252883c74d4357a57eb91335d1a147 I don't have any custom code on the page. Any ideas on what is causing this and how to correct it?
  5. Hi all, This has been driving me crazy for some time and wanted to see if I could get some advice on how to fix. My site is looking pretty solid, but on all pages it can be shifted left/right. I can't seem to find any reason why this would be happening. Any thoughts? Here is my site for reference: https://handandarrow.com/
  6. Site URL: https://demo.flothemes.com/velvet-template/ Hello, I would like to create a split navigation of 6 items (3 on each side) which is responsive and the navigation items are related to the logo. Example of responsiveness of the split navigation around logo is this: https://demo.flothemes.com/velvet-template/ Is it possible to create something from this code (see below) but with the smooth responsiveness of the example above? (Code source: https://stnsvn.com/blog/how-to-make-a-split-navigation-in-squarespace-71) .header-nav { position: absolute; top: 5px; bottom: 0; margin-top: 0!important; margin-left: -50px!important; } .header-nav-item:nth-of-type(3) { margin-right: 340px!important; } .header-title-logo a { z-index: 1000; position: relative; } Thank you!
  7. New here, my site is- heidiwright.co.uk - I have searched everywhere to ask if people can have a choice of styles of images on my site, colours etc that they click then what they choose will then go onto a card template? Mix and match, that then land on to a template, similar to how you pick a Snapchat emoji? Is Squarespace able to do this?
  8. Greetings! We would love feedback on the design of our resource page for teachers. We are trying to build this in the spirit of the web version of the email we send each day in Constant Contact (here is the link). I tried my best to build it using sections, an image as the background, and shapes on the left and right quarters of the page. We are seeing scaling issues that I don't see on other websites. When we zoom in (on mac using command-plus) the button text begins to shift to two rows along with other the other text shifting. Also, our users cant copy the image from the page by right-clicking without clicking on the image first. Is there a way to fix this, as well? Any first steps for fixing this for a math teacher/principal with very little experience? Super grateful for any responses! John
  9. Hi all - I am trying to find a way to apply a max-height, or height of 100vh for FE sections. I can easily adjust the section itself to max at 100vh, but I would like to be able to control the content so that when the veiwport is vertically squished, the content responds and adjusts with it (as much as possible). In 7.1, I could easily pop in a max-height to the .content, .content-wrapper, or .sqs-row if needed, but because FE is built on a grid system, I'm struggling to add in a limit to the rows that is compatible with vh as a unit of measurement. I've included a test site example here (pw: test), where you can see the bottom button disappear when the viewport is squished up. Any thoughts? TIA!
  10. Hello, my buttons are set like this on the desktop: but I would like to be able to center them horizontally on mobile! This is what I currently have in mobile version: What css code can I add to fix this? Can anyone help? url : https://preview-elisavanrullen.squarespace.com/ password : siteenconstruction Thank you!
  11. Hello! By using custom CSS in Squarespace 7.1 with the Classic editor, it's possible to control the number of columns by the width of the screen. As an example, the images on this site, appears in: one column on mobile (below 450px) two columns on tablet (screen size between 450 and 980px) four columns on desktop (screen size wider than 980px) This is controlled by the CSS coding below. My question is: With the Fluid Engine, is it possible to do something similar (with or without custom css)? /* Bildemenyer - Two column on tablet and mobile*/ /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { @media screen and (max-width: 980px) { .span-12 .span-3 { width: 50% !important; float: left !important; } } /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { .span-3 .sqs-block-content { width: 100% !important; } } } /* End- Bildemenyer - Two column on tablet and mobile*/ /* -------------------Bildemenyer - one column below 450px--------------*/ /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { @media screen and (max-width: 450px) { .span-12 .span-3 { width: 100% !important; float: left !important; } } /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { .span-3 .sqs-block-content { width: 100% !important; } } }
  12. Hi there, we are having an issue with the large photo slider gallery at the top of our website on the mobile version the height of the gallery is too tall so the images are cut off very narrow. We want to leave the height of the gallery on large for the desktop view and change it to small for mobile but when we change one it affects the other. How can we fix this issue with the responsive design? The gallery block does appear to be fluid engine already because there is no upgrade button at the top left. Thank you for your help!
  13. Hello, I am experiencing problems with the spacing on my website. On the display, which is much larger screen size than my laptop, the spacing on my page becomes increased and uneven. Is there a way I can turn off the responsiveness for desktop? The screenshot with lots of extra padding is from my monitor display.
  14. 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
  15. Hi, I'm having an issue in mobile view where images are being resized so I'm losing half the image. I've got the layout right in desktop mode, but not in mobile view. It for the images in the first section on the home page. Is it possible to get assistance with this? Thanks, Nikki
  16. Site URL: https://www.sliim.org I'm having trouble finding a good directory plugin I can use for Squarespace. I used community box and have been having endless problems with functionality and accessibility. Is there another site similar to it that works better? I can't seem to find anything about directories for squarespace. If you go to my site and go to Find a Practitioner, you'll see where the directory loads. This is a super important aspect of my site and business. I really need to change this ASAP. Thank you
  17. Hello, and thank you for taking the time to read this. I just redesigned my logo page, and and very happy with the results (on desktop). When I visited the page on mobile, all of the image blocks are scrambled and out of order completely, which would make it very hard for the user to understand what's going on- least of all enjoy the way it looks. Here is the page https://www.bmessinamyportfolio.com/design/logos How do you think I should go about fixing this? Although the page was not as optimally laid out before, nor as enjoyable- it at least worked on mobile. Even if the horizontal groups cannot be preserved, I would at least like it to keep the order. Any recommendations? Really want to keep this layout for both mobile and desktop if possible.
  18. Hi, I'm trying to make the embedded youtube videos on my website responsive to both mobile and narrow screens on laptops/desktops. I am encountering the issue on my Video Editing page in the Video Essays section (https://www.danielzemke.com/work/video-editing) and my Voice Over page (https://www.danielzemke.com/work/voice-overs). The videos look great on a mobile device and a full screen browser, but once you start shrinking the browser, they begin to overlap. Can you help me change the code of my embedded videos so that they're responsive to a changing browser size? Thanks! Below is an example of one of the embedded youtube codes. All of the embedded youtube videos have the same code with the exception of their individual source youtube videos. <iframe width="690" height="390" src="https://www.youtube.com/embed/wBEAjjioZFI?controls=0&amp;start=1098&end=1285" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <style> @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !important; height: 200px; } } </style>
  19. Hi there I am having issues with my newsletter block getting cut off when I resize my browser (Starting around 1000px). It seems to be going outside the margins. Is there a way to fix this or is there a proper way to make the footer items stack earlier? Thanks! Website: sisterseasons.com
  20. Hi Experts, Here is the code I've added in the CSS for the sticky announcement bar with a sticky nav (image attached). .Header { position: fixed; z-index: 9999; width: 100%; top: 35px; } .Content-outer { margin-top: 50px; } .sqs-announcement-bar-dropzone { top: 0; position: fixed; left: 0; right: 0; z-index: 999; } span.sqs-announcement-bar-close { display: none; } .tweak-mobile-bar-top-fixed .Mobile-bar--top { top: 80px; } However, if the browser is set to smaller, the set height of the announcement bar would cut off the messages (image attached). If I change the code for the header top to bigger than 35px, then it creates a gap between the announcement bar and the nav bar. Question: Is there any way to avoid this happening? TIA
  21. Hellloo everyone! I'm an old website designer with a modicum of experience on html and almost every wysiwyg you've ever heard of. This is my first time on squarespace though. If you check out the link to the staff page above, you'll see what I want. A circle photo with name, title, linkedin and email. I want to link them to the full bios (to be edited) to the full profiles below using Anchor links. That's the reason I've used a blank section instead of a "people" template, which don't seem to allow links. My problem is the responsiveness. Mobile fine, desktop fine, in-between (shrunk window) gets jumbly. Can this be avoided / is there a better way than what I've done here? Many thanks in advance folks! Ben
  22. PHOTOGRAPHY IS ABOUT FRAMING When creating a image block, we have the ability to select the focal point or focus of the photo. This is such a great feature and helps to get the right framing for an image. What I noticed, is that once I switch to the responsive design mode (another game-changing feature for my Squarespace experience), the photos I perfectly aligned in desktop view look... awful. So I went through the process of fine-tuning on mobile and return to Desktop View, only to find the photos misaligned again. Most users will be on mobile so I am prioritizing that view for the moment. The issue is mostly for my B2B clients who may have returning website visitors (typically the decision makers) visiting from their desk after some initial iPhone research. I want to make sure their second visit to the website is just as pleasing, if not more, than the first. The important feature in the desktop photos is the floor, and power wash action. The person's face is irrelevant, and honestly not having his head leaves room for imagination and is much more flexible as a stock photo. A PICTURE IS WORTH 1,000 WORDS: ---- PHOTO 1: MOBILE VIEW (OK) ---- PHOTO 2: DESKTOP VIEW (WRONG) ---- PHOTO 3: DESKTOP VIEW (OK)
  23. I read that SquareSpace automatically has responsiveness when building a website, but I just ran into an issue where I submitted my site for a project grade and it was all wonky on my professors desktop, which docked my grade. How do I fix this to where it is responsive on all screen sizes? I'm not sure what the issue could be since I thought responsiveness was automatic.
  24. Hi, I am having a issue with the responsiveness of videos on my squarespace site. This is my site: https://eh-test.squarespace.com/case_thecigar Password: Test19site The video blocks on the site, doesn't seem to scale the same way, the image blocks do on narrow screen sizes. See the attached screenshot for reference. This is what it is supposed to look like: When editing the site, it seems the videos doesn't fill the entire block. These videos are added using code, but the same thing seems to happen with normal video blocks. This is the code I am using: <video style="width: 100%" autoplay loop muted playsinline src="https://static1.squarespace.com/static/634ffc57ffdf0754b5b42989/t/637b6808e2b010736bb6ae04/1669031961613/Multiform+Design+element2+%E2%80%93+2000x1334.mp4"> <source type="video/mp4" src="https://static1.squarespace.com/static/634ffc57ffdf0754b5b42989/t/637b6808e2b010736bb6ae04/1669031961613/Multiform+Design+element2+%E2%80%93+2000x1334.mp4"> <body oncontextmenu="return false;"> </video> Does anyone know how to solve this issue?
  25. So, I have been having a conversation with a client over the past few months about the display of their website on their laptops. They do not like the fact that the website displays part of the page and then they have to scroll down. It really bugs them. Is there any way I can use HTML or CSS to make the pages on the website display where you don't have to scroll down to look at the products or whatever is on the various pages on their website? For example - the categories for the shop is not displayed until they scroll down. I've attached screenshots she sent to me. Any thoughts or suggestions would be awesome! Thanks! Kori
  • 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.