Jump to content

Search the Community

Showing results for tags 'responsive'.

  • 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. 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!!
  2. Hi there! I am wanting to embed a vertical Vimeo video so that the sizing is responsive for desktop and mobile viewing. The issue I am having is that when I embed the video, it seems to be responsive to the width instead of the height, making the video much too tall so I have to scroll down to find the play button. When I adjust the size limitations and add centering code, I can get this to work on the desktop but then the mobile version is still off. Is there a way to have the the responsive embedding work based off the height of the video instead of the width? Ideally the video is centered in the block and fits within the visible height of the browser. I am not a coder so I'm feeling around in the dark here. I would appreciate any help! Thanks!
  3. 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?
  4. Hiya, I've just made my new website live and shared it on FB but when you open the link from FB on some phone browsers the font doesn't resize properly, but if you view straight through a browser on a phone it's fine. Any ideas on what that could be/how I could fix that? Thank you! https://www.jadeeleanor.com (but it's fine when you click from here on a phone... I think)
  5. Site URL: https://elephant-quillfish-ct6l.squarespace.com Password: Pineapple Hey folks I have added a background video to this site https://elephant-quillfish-ct6l.squarespace.com and reduced it to fit on mobile a little better. The problem I have is that it isn't playing on mobile and just shows the fall back image? Any ideas?
  6. Hi, I have some text (project titles) that are set to full width of content on my site, it all looks fine when full screen on desktop, but when I scale the browser down the text visibly overflows to the right of the block into the white margin. I would like to contain the title in the block and have the text responsivley scale down within the full width block (not breaking the line or overflowing). I have tried to use a text box with heading 1 font settings and some custom CSS to achieve a responsive design that contains the title when scaling, aswell as using a code block and writing my own CSS, both have same result... I feel like I'm missing something and can't find another answer to this issue, any help appreciated. Thanks Link to title example: https://www.alexchinneck.com/in-a-while-crocodile-test
  7. Hiya I'm editing a site which has a landing page and an animation embedded within that. It looks great at desktop view but when viewed on mobile, the animation is too large to fit the screen. Is there standard CSS to embed in order to make the animation appear smaller on only the mobile view without compromising the background colour being the animation which fills the screen? Thanks!
  8. 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!
  9. 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!
  10. 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; } } }
  11. Hi! I recently redesigned my website and added images from my mobile app onto the site so that users can see how it works. Unfortunately, I've found that the built in responsive-layout for my site doesn't play well with the reformatted design. I've tried adding mobile breakpoints and re-aligning elements using CSS to get the mobile layout how I'd like, but there are a few places where I can't seem to adjust images or layouts. I know this is an incredibly talented community and I'm hoping someone can offer some advice A few specifics that I'm struggling with: I have an image in my 'hero' area which doesn't resize at mobile breakpoints and instead shows up as a tiny tiny image on mobile (screenshots attached) Does anyone know whether it is possible to keep the image at a more readable size or maybe make it scroll behind the text/buttons? Note: I've tried variations of the following CSS, but it doesn't seem to impact the image @media screen and (max-width:640px) { #yui_3_17_2_1_1672111932636_71 { width: 60% !important; height: 100% !important; margin: 0 auto; } } In the 'body' of my page, I have an alternating side layout with mobile phone images and descriptions. These appear in the layout I want on desktop devices, but after mobile breakpoints the images get oddly cut off and don't align how I'd like - specifically one of the images at the top of the section gets slid in at the bottom of the stack on mobile. I tried hiding this image, but then end up with a big blank spot on mobile (screenshot attached of where the image would appear but now just shows the blank area) Thank you! Taly
  12. https://dandelion-buffalo-965p.squarespace.com Password to the site is "fhi" I built this site a few days ago and it looked fine. it's now experiencing some major issues: The Pill buttons (see team page) have no padding. There isn't a setting to fix this anywhere. The header font sizes and background images change and zoom sizes when you scroll around on mobile. This looks super broken and wasn't happening before. What changed? I need to release this soon and I'm pooping my pants because I did nothing and it now my site looks really bad. Scrolling_issue.mov
  13. 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>
  14. 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
  15. 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)
  16. 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.
  17. Hey, Good Evening I am looking for a way to make the 1st section background media on my Homepage fill the height & width of the visitor browser window dynamically. I want the first section media to resize as the window size changes, in imitation of the homepage of https://grailwatch.com Site URL: https://sartori.squarespace.com
  18. Hi, I just changed the front page of my site to include a video but the quality is substatially low. Is there any way to make it higher quality or is this the best I can get? Thank you!
  19. I'm using weglot to translate my site in to Korean. I am having an issue where Korean words are being split up across lines. On the English version of the site, line breaks always occur between words - but in Korean line breaks are occurring between characters. Where the line breaks depends on the browser window size, as the responsive text feature adjusts the text. Anyone have a solution to prevent Korean words from being split across lines? url is https://www.thefootprintbook.com/
  20. 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.
  21. Hi I have added a blank section and added images along with text boxes but its not responsive can anyone tell me why?
  22. Site URL: http://https/raccoon-lion-49am.squarespace.com i would like to disable a media query on a specific section on the home page, i like the template banner to bring people to the shop and would like to keep the same look for mobile and just shrink it to fit but i dont know how to stop the auto resize thats making it flip vertically
  23. 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!
  24. 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?
  25. Site URL: https://liyasafina.squarespace.com/?password=pearler I've quite heavily customised this navigation bar, however I'm struggling to get on of the elements to respond to different screen sizes properly. I'd love to know if I've gone to far or if this is fixable πŸ™‚ https://liyasafina.squarespace.com/?password=pearler // SPLIT NAV➷ ☯ ☯ ☯ ☯ // .header-nav { position: absolute; top: -10px; bottom: 0; margin-top: 0!important; } .header-nav-item:nth-of-type(1) { margin-right: 250px!important; } .header-title-logo a { z-index: 1000; position: relative; } // FORCE MOBILE MENU ➷ ☯ ☯ ☯ ☯ // .header-display-desktop { .header-burger { position: absolute; left: 0; } } @media screen and (min-width:768px) { .header-nav { display: none; } .header-burger { display: flex; } .header--menu-open .header-menu { opacity: 1; visibility: visible; } } // STYLING ➷ ☯ ☯ ☯ ☯ // .header { padding-left: 2vw !important; padding-right: 2vw !important; } .header-announcement-bar-wrapper { margin-top: 2vh !important; } .header-blur-background { border: 1px solid #fff; border-radius: 100px !important; padding: 1em !important; } // POP OUT MENU STYLING ➷ ☯ ☯ ☯ ☯ // .header-actions-action .theme-btn--primary-inverse { color: #fff !important; } .header-menu { backdrop-filter: blur(20px)!important; } .header-menu-nav-item { border: 1px solid @white; border-radius: 1000px !important; margin-bottom: 3vh !important; } .header-menu-nav-folder .sqs-button-element--primary { display: none !important; } @media screen and (min-width: 768px) { .header-menu-nav-item a { font-size: 3vmin; } } // ARROW ICON ➷ ☯ ☯ ☯ ☯ // .header-actions-action--cta::before { content: ""; position:absolute; background-image:url(https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633b8cbffda77e2e702deadb/1664847039839/Arrow.png); background-size:contain; background-repeat:no-repeat; width:200%; height:200%; top: -50%; left: 6vw; z-index:2; } // PSEUDO 'MENU' WORD ➷ ☯ ☯ ☯ ☯ // .burger-box::after { content: "MENU"; color: #fff; font-family: 'Inter' !important; font-size: 1rem; position:absolute; top: 25%; left: 75%; z-index:2; } // CUSTOM BURGER ICON ➷ ☯ ☯ ☯ ☯ // .burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun { background-color:transparent !important; } .burger-inner::before { content:""; background-image:url("https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633b8ac03c30215fd4c6a749/1664846528294/Burger.png"); background-size:cover; position:absolute; width:150%; height:150%; z-index:2; top: -30%; left:-2vw; } // MOBILE MENU SPACING ➷ ☯ ☯ ☯ ☯ // .header-menu-nav-folder-content { flex-grow: unset !important; width: 95%; margin: auto; } .header-menu-nav-item a { margin: 2vw 2vw !important; } Big thanks!
  • 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.