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

Search the Community

Showing results for tags 'responsive-design'.

  • 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.aireelography.ca I have a video on our home page as Code Injection. it autoplays and loops fine on desktop <center> <video autoplay loop width=1280; height: auto > <source src="https://static1.squarespace.com/static/62aa4929c26e8132135830a4/t/62d806511b9c3c0b8dd2f62c/1658324572985/Home-web-page-intro.mp4" type="video/mp4"/> </video> </center> iPhone format is terrible (need to scroll and all other elements are pushed to left). I would like to modify the video so it displays on the mobile iPhone correctly in Portrait (I guess using Media query) and have it play only when user clicks start button (so no autoplay or loop). Desktop autoplay and loop should remain Also adding text to video will help as well thanks in advance
  2. Site URL: https://chartreuse-lemon-44ak.squarespace.com/work/bellie Hi! I have a full width image on my website. Squarespace's responsive design cuts off parts of the image on different devices. Anyway to stop squarespace from resizing the image? I just want to keep the full width image as is. Thanks! https://chartreuse-lemon-44ak.squarespace.com/work/bellie Password: HELP I would like the below 2 images to not be cropped when viewed on difference sized devices : Thank you so much!!!
  3. Hey there, I embedded the acuity scheduling booking system into my Wordpress site. Appears to work fine on most devices apart from one user who has a samsung galaxy S10+. She reports that when she tries to use the booking system, when she needs to add her contact details the form becomes too big for the screen and requires tricky scrolling to enter details and move between input fields. I also have an android (Huawei) and I don't have this problem. Any support with this would be much appreciated. Thanks booking video.mp4
  4. Site URL: https://chartreuse-lemon-44ak.squarespace.com/work/bellie Hi! I have a full width image on my website. Squarespace's responsive design cuts off parts of the image on different devices. Anyway to stop squarespace from resizing the image? I just want to keep the full width image as is. Thanks! https://chartreuse-lemon-44ak.squarespace.com/work/bellie Password: HELP Note: See below for details
  5. Site URL: https://grey-sapphire-9lfk.squarespace.com I thought this was going to be easier than it's turning out to be... On the desktop and tablet view - the banner image is a good height and the content fits well and works. However, on the mobile view, the banner is essentially the same height and therefore cuts a significant amount of the picture out. What I'm wanting is for the mobile view to respond and display at a height that is similar to the site in desktop view. Please see below for current desktop and mobile view and *desired* mobile view. @tuanphan Desktop view: Current Mobile view: *DESIRED* mobile view: Password for site: summary Thank you!
  6. 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/
  7. Site URL: https://www.psychologybayarea.com/ I would love feedback on my website. Thank you!
  8. The new fluid engine is still a bit wonky when it comes to responsive formatting. In response I have been designing entirely different page sections for each screen size (mobile, tablet, desktop) and then just hiding them based on media queries. My question is... will this method kill my load time and therefore SEO or will display:none prevent them from factoring in? Please excuse my ignorane. Thanks.
  9. Site URL: https://www.tgtfresh.com/shroominfo (the problem occurs on every page) Recently, having to post a link to my site on Facebook, I discovered that there's an issue with scaling when scrolling. From what I've seen, whilst this doesn't occur on most dedicated browser apps on mobile, it is particularly prevalent for built-in browsers in apps like Facebook and Instagram (only in posts, doesn't happen when the link is opened in messages). I think the problem mainly stems from their UI, where the top and bottom bars expand/hide when you scroll up/down, and because of that, the page height constantly changes leading to rapid resizing. I'm not sure how this works, but is there a way for the entire site (not just some elements) to prevent scaling by height and only by width in these situations / ignore the bottom half of the screen's height / or to add a very long delay to the resizing's transitions? Examples: video-1660854896.mp4 video-1660854905.mp4
  10. Site URL: http://leirbaaletlyd.no Hello everyone, I'm quite new to this; I have been working on my website for a couple of weeks. I've managed to glean from the forums here how to display both logo and title for my site header, and have been quite happy with my design (still undecided on the color scheme, though). However, when I added a dark photograph to the top of my homepage, I saw that I needed to add a different logo to that particular page. I've managed to do something of the sort by adding css styling to the advanced-section of that page (also from what I've read here), but now the logo only displays at top left screen, regardless of screen size - whereas all other pages has logo and title left for web, and logo above title centered for mobile, which is what I prefer. Here's what the other pages look like: And here's the troublesome mobile one: and the working web-version: Website at http://www.leirbaaletlyd.no Pw: BaaletsKnitren Any help would be much appreciated! Kind regards, Roald
  11. Site URL: https://heidiandscott.squarespace.com/ I am trying to embed the following on my site: <iframe src="https://www.online-rsvp.com/event/index.php?event_id=4982&embed=1&token=b3fc3df4027237dc117fd5f5ba582986" style="min-height:800px; width:100%; border:none" title="Online-RSVP.com event" onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"></iframe> The form is dynamic and the height is variable based on what is entered. Type "Joe Smith" into the first and last name fields. I've tried adjusting the height to 1500px which gets the job done (no scroll bar) but it's not elegant as it leaves the too much empty space. Once the form is submitted, the content shrinks to ~300px and you won't be able to see the "Success" message unless you scroll all the way back up. I've tried using CSS to create a responsive container, like this: https://blog.theodo.com/2018/01/responsive-iframes-css-trick/ But the content still gets cut off and the scroll is enabled. Any suggestions to have the iframe increase and decrease in height as the form is filled out? Thanks in advance!
  12. Site URL: https://www.trworks.com/wood-slate/p/slate/texas-word-art In my store, (see https://www.trworks.com/wood-slate/p/slate/texas-word-art for an example) the up and down quantity arrows show on the desktop, but do not show on mobile devices. Is there any way to get them to show? Thanks!
  13. Site URL: https://dreamavenuestudio.com/ I saw a few posts on this forum on "How to Disable Mobile View On SquareSpace 7.1". I did not find a solution, such as a button that would disable the mobile view completely. However, there is a way to make it look prettier with CSS. I don't know anything about CSS, but I thought someone might help me with this. Here is my website: https://dreamavenuestudio.com/ I am trying to make the following changes to my homepage: - Make the hero image/banner (with the "It's Time to Start Dreaming Again" text on top) look like the desktop version. Right now, it's cropped, and there is no symmetry. - Make the image behind the "Limited Edition" scrolling appear larger. On the desktop version, the image is big, and the text looks beautiful next to it. On the mobile version, the image is very small, and there is huge padding on the top and bottom. Also, the text "Shop our new, limited collection of minimalist designs" should be above the "SHOP" button, whereas right now it's under the button. - Make the text in the footer smaller, right now it does not fit on one line, so the "Dream Avenue Studio" is above "Privacy Policy, Terms &, etc..." I would like them all to be fitted into one line. I would appreciate any help!
  14. Site URL: http://andbaron.com My site is formatted exactly how I want, and images are cropped in just the right way for desktop. When previewing or visiting the site on mobile, there is no sort of good responsive design happening. Everything is just cropped to death to the width of a mobile screen, instead of shrinking images proportionally. Is there any way to retain full images, but obviously to reduce size globally to work on a mobile screen... like 99.9% of other websites?
  15. Hi, I have a section on the homepage of a website I am working on with 3 columns, created with fluid engine. I am trying to force the 3 columns to 1 colums on tablet portrait mode (for mobile screen it does it automatically), but so far no luck. If it would be possible to force the whole site instead of 1 section on a page, even better. I tried this code: @media screen and (max-width:1024px) and (min-width:750px) { [data-section-id="62e128679b13b7022c5d2826"] .content { width: 100% !important; } } and this one: @media screen and (max-width:1000px) { #collection-5dc4a4cd714889457f7615c2 div>.row>.col { width: 100% !important; } } Thanks for any help.
  16. Site URL: https://www.cindyho.design/ Hi, I did not know how to delete my original question but I've decided to go another way with my web design so no longer need a response. Thanks anyway!
  17. Site URL: https://www.thefabricant.com/ Hi, I have a video on our home page as Code Injection atm. I would love to include a part in the code to make the video responsive to the size of the browser window. This is easy to do with the video block and Vimeo link, however I need to be able to do it with the Code Injection. Below is the code I'm using now. <center> <iframe src="https://player.vimeo.com/video/680815668??autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=2&portrait=0" width="1170" height= "600" frameborder="0" allow="autoplay; fullscreen"allowfullscreen></iframe> </center> Here's the embed code I'm getting from Vimeo <div style="padding:50% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/680815668?h=b5fa6fda37&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="The Fabricant - Digital Fashion House"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script> What do I need to change in the original code to get the responsiveness in it? AND bonus question. Can I add text on top of the video?
  18. Site URL: http://www.chumbo.org Hello! I have an issue with the navigation bar on tablet view - 800px until 1024px - where my menu morphs into something in between its desktop and mobile design (see attached). I don't know what to do, it's probably related to the javascript, but I don't know Java. Is there any way this can be solved by a self- taught like me? Thank you in advance. Catarina
  19. Site URL: https://mandolin-trumpet-8ajp.squarespace.com/history On many of the pages I'm working on, I've set the Fluid Engine layout for the desktop and mobile views. But when I view those pages on a phone in landscape view, there are huge spaces between blocks. It looks terrible, and there doesn't seem to be any way to fix it. The same is true when I resize my browser window to a narrow width (but not narrow enough to mimic a phone screen). This seems to be a bug in the Fluid Engine. Either there should be an editor mode for these intermediate screen sizes (between desktop and phone) or the layout should follow the mobile layout without the extra spaces.
  20. Site URL: http://www.whoisraag.com/ My website looks alright on desktop and mobile but it's a mess on tablets. @tuanphan I remember you pointing this out a while ago. How can I solve this without writing a million lines of code? Please let me know if you can help in any way 😞 It's okay for the tablet to follow the same rules as the mobile layout for my website. The same thing is happening for my company website - http://www.madebydot.tv/
  21. Site URL: https://derrickfagan.squarespace.com/ Hi, Is there a way to force tablet screens to load the mobile version instead of the desktop version? I've been battling with this for this past few days now. Looking forward to getting any response....thanks in advance 🙂.BTW, the password to be able to view the site is - password
  22. 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!
  23. Site URL: https://www.geraldinejosephine.com/travailler-avec-moi Hello, For my service page I am using two poster blocs next to each other with different backgrounds. On comptuer view it's ok but when I am in tablet view or mobile view the text goes out of the background image and overflows. I would like the text to be contained in the image background in all the modes. Is it possible? Can you help me with that please ?
  24. Site URL: http://www.mortenskovlund.dk Hi all I have made my new site, but discover that it is not responsive on mobile (vertical) 😭 My home page is displayed catastrophically. Is it my theme or something I have not set correctly? Has searched in all settings. I have a hard time imagining themes that are belly without being able to be displayed properly on mobile br Morten
  25. Site URL: https://www.coalminetheatre.com/ Hello, I'm having a problem with my site (slider gallery on main page gets cut off in mobile, works fine on desktop) and I would like for it to be responsive and not cut the image off when viewed on mobile. I've tried all the suggested code on other threads, but none of it seems to work. Any suggestions? Thank you in advance!
  • Create New...