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
    • 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: http://www.keepfresh.io Looking to make my video banner responsive to mobile. Any help would be greatly appreciated!
  2. Site URL: https://cyan-teal-3zmw.squarespace.com/ I'm trying to override Squarespace's responsive font sizes for my H1s at certain screen widths, but my media queries don't seem to be taking effect no matter what I do. Here's the code I'm currently using: /* MY ATTEMPT TO OVERRIDE SQUARESPACE'S SETTINGS AT CERTAIN SIZES*/ h1 { @media screen and (min-width: 1024) and (max-width: 1111px) and (orientation: portrait), screen and (min-width: 1024) and (max-width: 1111px) and (orientation: landscape) { font-size: 54px!important; } @media screen and (min-width: 1112) and (max-widt
  3. Site URL: https://www.snibbe.com/store I'm setting up a store with my Squarespace site. So far, incredibly easy and beautiful. Thanks! I have a problem, though. On mobile only the content in "Header Content: Store" disappears. It is visible on tablet and web. Is there any way to change a setting or style somewhere so this Header Content block remains on mobile, or some workaround? Thank you!
  4. Site URL: https://www.oldsonmedical.com/ Hi I am struggling with the auto responsiveness of the home page banner on my site for mobile. The text runs over my clients face and she doesn't like it. My client wants to keep the photo there (not replace with a non headshot photo for mobile) but is there any way to bump the banner text above or below the photo with code? I've tried this code below but it just ends up cutting off the entire banner and text with it (second pic). It would be great if the header text + button bumped down into its own blue section below the banner image... @media
  5. 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!
  6. Site URL: https://www.periodictableofveg.com/ Hi there, I'm having an ongoing issue with the size of my homepage image. I have tried different bits of custom CSS and each seems to generate problems. My homepage banner image cuts off on some mobile devices and on all tablet devices. I've tried two things: OPTION 1 (this still has issues on some mobile and tablet devices) @media screen and (max-width:1200px) { [data-section-id="5feb9cc97360c774c5ed4562"] { min-height: 40vh !important; } } Can you help? Thanks! OPTION 2 (makes the design responsi
  7. Site URL: https://www.dogdays.fi Hi, Which code do I need to add to make my websites background video responsive? And how do I remove the unwanted blocks in the bottom, when viewing the website in example an iPad? I've tried searching this forum and the web. Added some code, helped a little but didn't really solve my problem. pw: koira
  8. Hi there! I've tried everything ...I cannot figure out how to get my embedded google sheet to be responsive. Do any of you fancy coding types have any ideas? I would appreciate your help or even your empathy! <iframe src="https://docs.google.com/document/d/1VouYUL9gPUHsjCvZPwHhZ1JQ8yMhIgTTI6md5Sn-5rE/pub?embedded=true" width="100%" height="2000" frameborder="0" scrolling="no" padding="0" margin= "0"></iframe></div> http://www.ryeeducationfoundation.org (password: ref100) path grants>find your liaison
  9. 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!
  10. Hi all! I am working on a dark mode version of my website. I am trying to change the first section background image of the landing page to another image when the viewer uses dark mode, but can't manage to make it work. Here is what I tried so far: @media (prefers-color-scheme: dark) { [data-section-id="5feca0a7dc82f97fd38e575d"] .section-background img { visibility: hidden; } /* set new image */ [data-section-id="5feca0a7dc82f97fd38e575d"] .section-background { background-image: url(https://static1.squarespace.com/static/5f0cd7575142de45f1d531a7/t/5feca8261d1415656f7995
  11. Site URL: https://photojourneys.co.uk/ Hi there, I have added two blocks on the following page, side by side - https://www.photojourneys.co.uk/journeys/istanbul While the height of the blocks looks fine whenever the maximum width of that section is reached (see screenshot 1), this is no longer the case whenever the page is narrower (think 16:9 screen viewed in portrait mode, as illustrated in screenshot 2). I was wondering whether there was a way for the map block to resize along with the text block? I would like for the two blocks to be of the same height at all time
  12. Hello, I have a map as .jpg (attached) , a javascript (imageMapResizer.min.js) which can be found at: https://github.com/davidjbradshaw/image-map-resizer, and simple html code found below. This works fine on a normal site but as I embed the code in SquareSpace - the image map works on full size, but upon resizing to a small size requiring the call to the javascript, it does not work. Has anyone any idea of maybe the flow of events ie Windows resizing or loading and the SquareSpace own responsive resizing which might interfere and override the javascript? Thanks. <!DOCTYPE HTML PUBLIC "
  13. Site URL: https://www.carlylecapitalinc.com Hi! I created the below code to make a responsive table but it is not responsive and the table overlaps and does not show correctly when resizing on computer or mobile. Any ideas how I can fix? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; font-family: 'Raleway' } th, td { border: 1px solid #074E7D; text-align: center;
  14. Hi, Is there a way to make Squarespace display a different image on mobile? We're having real trouble creating layouts that work well on mobile and desktop. For non-squarespace websites (where I, a designer, work with a developer) I would usually provide another image to the developer for mobile, or at least specify the crop/position of the image on mobile. Thanks!
  15. Hi. I have embedded some forms on a website using the styled HTML code (from Infusionsoft keap). I've tried different CSS to target the forms and make them responsive on mobile devices but I can't find the right code. The input fields and button are hanging of the screen. An example of a form is on this page https://www.soulspacehealers.uk/. Can anyone help?
  16. Site URL: https://www.kailynmoore.com/lumify Hi there! I'm creating a portfolio site and all of my full width images crop on mobile to the point you can't tell what you're looking at. I am looking to remove this responsive feature on ALL full width images (not just 1 instance). Ideally, the image would just span the actual full width of the screen regardless of the screen size, so no cropping ever occurs. Can anyone help me with this? I've looked everywhere for a solution and this seems like it would be a common issue. pw: kailyn
  17. 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? 😞
  18. Site URL: https://www.virusfreevoting.org/ I bought and downloaded a Responsive CSS Flexbox Grid Framework on envato market, but unfortunately, i don't see any documentation of how to add it to my 7.1 squarespace website. Help please. I'm trying to recreate this https://vote.poorpeoplescampaign.org/ (scroll down to the bottom) the photo collage where people can upload their picture and put in a quote. Thank you.
  19. Site URL: https://lsdrains.co.uk/ Hi, I am new in Website Development, one of my client is looking for the same website design as the above mentioned website has. I need help regarding how to find the theme or design which is used for this website? And how can I know about the platform this website is built on? Looking for helpful answers. Thank you.
  20. Site URL: https://hawk-cheetah-42a2.squarespace.com In my shop, the category links I have on the main shop page is not responsive to mobile. Half the links go missing. You can see here the difference. I don't see any place to fix that.
  21. Site URL: https://www.beginnerballetforadults.com/ Hi! I need help getting a Google calendar to show up on mobile and tablet. It shows up fine when you look from a computer. I've added two versions of the calendar, one big and one small, to the website temporarily. My hope is to make the design responsive so that computer users will see the big calendar and mobile & tablet users will see the smaller one. But right now neither calendar loads on mobile or tablet. There's just a blank rectangle. Any help or insight appreciated! Thank you.
  22. Site URL: https://chesapeakeheartland.org Hi all - I am trying to make all the image banners responsive when the window size changes. I would like to keep the image within the container but at the moment when resizing, the image extends out of the container / is cut off. I'm looking to respond to mobile displays to 2600px displays. I've tried some media queries and they don't seem to be working. A portion of the media query will be fine, but not the entire media query range. I've broken the query ranges up, thinking they were too long of a "px" range, but no luck. I also looked into "f
  23. Site URL: https://bison-buttercup-bdpb.squarespace.com/ IDUMA template: Link: https://bison-buttercup-bdpb.squarespace.com/ Password: 12345 (1) How to get the first image to display full width on mobile device? I tried the following code but it leaves a grey background on mobile. @media screen and (max-width:640px) { [data-section-id="5f249752d6f33d72e0925409"] .section-background img { width: 100% !important; height: auto !important; } } (2) How to get the last image - height large on desktop but small on mobile?
  24. Site URL: http://www.glossi.io Hi all, Is there a way to keep my background video from cropping when I adjust the size of the browser window? The video is towards the bottom of my home page in a section called "Look great on every screen" Thanks Jonathan http://www.glossi.io pass: Hi5Speaker
  25. Site URL: https://oval-reindeer-llrk.squarespace.com/projects/project-two-g2haz When the window size decreases in height, the arrow becomes covered and the images starts to cutoff. On the other hand, when the window size increases, there's too many white space underneath the arrow. How am i able to fix this? Version 7.1 Website is Password Protected - Password: test
  • Create New...