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
    • 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 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
  2. Site URL: https://www.craigkleila.com/ Password to site is "password" In hero section of my homepage, I want the google search image and the image behind it to have a consistent design across devices. I want it to look like the attached image on all device sizes. Currently, the image behind the google search image moves depending on the screens size. How can I do this?
  3. Site URL: https://www.sandravfeder.com/angry-me There's a few sections where the content wrapper seems to be larger than the width of the page, and so when it resizes the content doesn't size down enough and is cut off on the edge of the screen. I tried removing all my css and that didn't fix it, so I'm not sure what's going on. I included a few screenshots but it's definitely easier to see on the live site - only happens at certain screen sizes though. It's happening in a few sections, these are the ones I've noticed so far - "The Fun Stuff" section at the bottom of the homepage: https://www.sandravfeder.com/ "School Visits" section on this page: https://www.sandravfeder.com/presentations and "Additional Content Related to Angry Me" on this page: https://www.sandravfeder.com/angry-me If anyone knows how to fix this I'd be very appreciative:)
  4. Site URL: https://defendprogram.squarespace.com/ I know it's possible with CSS on 7.1 but not sure about 7.1 Fluid Engine... the CSS I'm finding isn't working The top banner image focal points are to the far left AND right (not in the center). If I could get it to display like it does on desktop my client would be incredibly happy SITE: https://defendprogram.squarespace.com/ PW: Defender Thank you in advance for any help with this Cheers, Kelli
  5. Site URL: https://lizard-antelope-tm9b.squarespace.com/ I put a blog post via a summary block on my home page, and I just want the image, but it's responsive in a completely different way - it keeps its aspect ratio/proportion no matter what. - I've turned off all the metadata. So nothing should be hiding below it. Tried all the aspect ratio options, that doesn't help. Automatic is the worst. The image is currently 4:3. Love to know if there's another way to put a blog post on the home page and have it act the same way as other blocks, with no padding (if that's the issue)
  6. Site URL: https://bozoo.it/ Site URL: https://bozoo.it/ Password: Bozooimilioni Hello, I am trying resize the header image for the mobile and tablet. I've tried several custom code published in the forum but nothing works for my website. Also the shopping icon is cut on the right, how can i fix that? Thank in advance for the help!
  7. Hello all, Wondering if somebody can help me with this. I'm looking to create a footer where a list of URLs collapse into an accordion on mobile only. I would like this to work in the same way as how the footer works on squarespace.com. I've found this approach on stack overflow, which appears like it should work, but i'm unsure of how to integrate the jquery portion of the code. I presume it needs to be tweaked in order to work within the header/footer within code injection, but I can't seem to get it working. Also, very happy to look at a different approach if there's something that might be more suitable to a squarespace site. Any advise would really be appreciated. Thanks, Neal
  8. Site URL: https://brijtrivedi.com Hello all, Is there ay media query or custom-css that enables my site to show the slideshow in mobile view and have the 'show thumbnails' button instead of it being stacked images? I am on 7.0 and I have tried to play around with the code but no luck Thank you!
  9. Hi all, I am trying to make a "Our Team" section. I need it to be clean and simple, so just 4 headshots, 1-2 sentences below each, and a "read more" or button to expand. Upon expansion, I'd like a new section to appear (not in a new window/tab) with the full bio of the person who was clicked. The first screenshot is a great example of what I want, but I need the unselected pictures to be greyed out, or something to indicate which name belongs to whom. Second screenshot would also be acceptable. 3rd screenshot is the sketch I made when first imagining this section. It is my favorite example, but I understand it might be too custom to come to reality for this small project. I'm using 7.1. Thanks in advance for your help or for pointing me to some code I can copy/paste for this effect.
  10. Site URL: https://frencholistic.squarespace.com/config/design/custom-css I have a summary for my posts on my blog. I wish that when I resize the window to be smaller, the thumbnail decrease in size and stay on the same row.
  11. 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.
  12. Hi. I built the header images on Mac but on PC they don't fit. I re-did them to PC, but now they are different on two of the PC's in the office. Are the sites not responsive to different size screens? Thank you
  13. 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!
  14. Site URL: https://laurabennettdesign.com Hello Coding experts, my site won't load correctly when you click on the main logo to "return to home". Rather it has to be refreshed each time to allow all of the home page blocks to load correctly. Im noticing this specifically on the home section titled "Heart-led, Purposeful Design" with the photo block on the right. When clicking on the main logo, this section actually doesn't display the photos or subtext at all (see photo attached). But upon refresh it works normally. It seems perhaps it's working on the backend of SS but not working when the site is accessed by browser (ie. Safari, Chrome, etc.) Please help! site: laurabennettdesign.com
  15. Site URL: https://www.bouldersgym.com/signinwaiver Hi, We use a POS system that integrates into our site using an Iframe. Unfortunately the iframe works well on the desktop version but on mobile fails to be properly responsive. Any tips?
  16. 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
  17. 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/
  18. Site URL: https://www.chumbo.org Hello! I'm having issues with embed podcasts on mobile and tablet. It doesn't respond well once resized. It appears to be underneath the background layer. Please see attached pic illustrating the issue. Any thoughts? Thank you
  19. Site URL: https://finch-stingray-xe7m.squarespace.com/werkgebied My page can be viewed using this password: clogs Hi, I am trying to show a Google MyMaps iframe to load in responsive view. It should be at 100% width on both desktop and mobile view, but it is failing to do so. The code I injected is from this tutorial: https://www.w3schools.com/howto/howto_css_responsive_iframes.asp This is the code I used in the code-block: <div class="container"> <iframe class="responsive-iframe" src="https://www.google.com/maps/d/embed?mid=1z5TX60I4DPiRlBfMpn16J2iNhscPWlI&ehbc=2E312F"></iframe> </div> And this in the Custom CSS: /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ .container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } I am no coder myself, so I followed the tutorial, but perhaps I need to set the CSS classes different for SQSP. never understand how this works for SQSP. Hopefully there is a CSS guru who know what I need to do to make it work. 😏 Thanks in advance! 🙏 Cheers, Steven
  20. 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
  21. 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
  22. Hello squarespace community, I've always disliked the way that squarespace shows it's menu options in the mobile view, but I've never been able to get the code right to fix it. Instead of showing the nested view after clicking a folder, I would like for the available pages to smoothly display underneath that folder as a drop down menu with the appropriate arrow directions too. This means hiding the 'back' link which I think have the right code for: .header-menu-controls-control[data-action="back"] { display: none; } I've attached a rough example of what I would like for the menu to do. HUGE thanks if you can also help with the CSS for the arrows to display on folders in the desktop view too!!
  23. Site URL: https://carillon-flower-3xhs.squarespace.com/ Hello. I need to modify the mobile stacking order of content in a 3-column image/text/spacer layout. Site password: XRdesign Jump or scroll to the "Process" section. For larger displays, the order of the content blocks is: ROW A: Image — spacer — Text ROW B: Text — spacer — Image ... rinse and repeat. On mobile they all need to follow one pattern: COLUMN: Image — spacer — Text I've done a search on this and there were a number of threads covering but they all kind of dead-end(ed). I honestly feel like a fix to this should have been baked into 7.0 since it's such a common UI pattern. Any help would be appreciated. And thank you! 🙏
  24. Site URL: https://briancullenfurniture.squarespace.com/lighting/wallsconce I would like to know how I can keep the ".item-pagination" navigation arrows centered vertically pass: BCF-light230522 Thanks
  25. Hi all, I am on 7.1 and was hoping to see if there was a way to change the overall website breakpoint for mobile responsive viewing (as there was in 7.0). I know that I can target specific elements with min/max @media screen CSS snippets, but my hope is to make the entire website change to the mobile view at a specific width. Say, for example anything 1000px and under switches to the mobile responsive view. Many thanks for any and all help!
  • Create New...