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: 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?
  2. Site URL: https://www.shrgeneralcontracting.com Hello, I am attempting to reorganize the footer so that on mobile the elements are organized in an in-line format on mobile. How it is on desktop: I have the social media buttons at the bottom left, a few links <a> spaced out in the middle and the logo on the right. Underneath them all I have a copyright <p> tag. Please take a look at the attached image for reference. How I want it on mobile: I would like either the logo first, followed by the social media buttons, the three <a> links on the same line and finally the copyright beneath that. All elements should be centered. If I was simply coding this it would not be that hard but working with the square space interface has thoroughly confused me. Please help!
  3. Site URL: https://www.charthouseinn.com/ Can someone help me with this issue I'm having I have line breaks on the site that work on the desktop view, but on mobile they create very weird line breaks. If I fix the line breaks in mobile it looks bad in desktop. Is there a code I can use that will make the mobile version not apply the line breaks? ex: this is how it reads on desktop: The Chart House Inn is centrally located in Newport, Rhode Island β€” the City by the Sea. but on mobile it reads: The Chart House Inn is centrally located in Newport, Rhode Island β€” the City by the Sea.
  4. 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
  5. Site URL: https://kazoo-lanternfish-ejx7.squarespace.com/home/#/new-page-1 Hi, I am building a custom sales page on Brine. I have removed the header logo and navigation and am now building out my 'header' of the sales page. I have managed to code the background image, logo & text to sit well when the window is full screen (13 inch) but any resizing sends things up and it gets cropped. I am wondering if someone has had similar happen? I am hoping to be able to code this for Desktop, Tablet and Mobile. The code I have used so far is as follows - PAGE HEADER CODE INJECTION - <style>.Header, .Footer, .Mobile-bar{display:none !important; }</style> Custom CSS - //Sales Page header //header image #block-yui_3_17_2_1_1652461734997_2785{ position: ; z-index:1!important; padding-top: 1%!important; margin-top: -26% !important; margin-left: -6.5% !important; margin-right: -6.5% !important; margin-bottom: 0px !important; } //header Logo #block-yui_3_17_2_1_1652455646794_1841 { position: relative; z-index: 100; margin-left: auto; margin-right: auto; top:-36em; max-width: 150px!important; } //Header Text Block #block-627e75e34300671849380e1a p {color: white!important;} #block-627e75e34300671849380e1a { position: relative; z-index: 100; top: -24em; margin-left: auto; margin-right: auto; } Any help is appreciated πŸ™‚
  6. Site URL: https://bysophie.es/pagina-nueva Hello, as you can see in this URL: https://bysophie.es/pagina-nueva I need to adapt the first slider to mobile, because the images aren't showing alright. I have the creativities in both dimensions (PC and Mobile) but i don't know how to create an slider exclusively for mobile and another for computers. Also, if it's another solution that could work like redimension only in mobile devices, etc. I'm grateful in you can share it with me, so I can do it the most simple way. Thanks!!
  7. I'd like to replace the background header image with one that is designed to fit a vertical layout when site is viewed on mobile. Ideally text and icon sit above the person in the image, rather than to the side like they do for larger displays. site is https://icosahedron-rust-5y3f.squarespace.com/ password: 2020 The image below is the one I'd like to use for mobile. I can adjust image size/dimensions if needed. Any help greatly appreciated!
  8. 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.
  9. Site URL: https://aaronredfieldnew.squarespace.com Hi! I am looking for a way to center justify the site title "Aaron Redfield" vs. having it in upper left. (pw for site is: chickenwings) If so, I will remove the HOME and CONTACT pages. If possible only on desktop and not mobile, that is fine too. Maybe @bangank36 might have an idea or two? Thanks!
  10. Site URL: https://cone-mouse-r3d2.squarespace.com/workpoints/test Hi, Hoping someone can help out with this problem. See attached screenshot - setting up product pages with a gallery & thumbnails below, but it seems when I add a few images, the thumbnail strip is too wide and causes the page to become not 'size responsive' and needing to horizontal scroll. Is there any way to fix this apart from removing images so there is less thumbnails, or reducing the size of the thumbnail image in the settings? (if I have 6-7 images in the gallery, in order to fit the thumbnail strip they would need to be too small and would look unusual) Would appreciate any help - if not, is there a gallery plugin that would work better in this case? https://cone-mouse-r3d2.squarespace.com/workpoints/test password to view is 1234
  11. Site URL: https://www.frjameslloyd.com/blog Hi Everyone! My new site blog has four grid blocks per row when viewed on a desktop and one block per row when viewed on a phone - those features are fine. What I'd like to do is add custom css (I'm on a personal plan) which shows only two blocks per row when the blog is viewed on devices that have a minimum width of 768 px and a maximum width of 1024 px. I've tried the following code (kindly suggested by someone in these forums) which worked perfectly on another site I'd created last year, but it doesn't seem to work on this new site: @media (min-width:751px) and (max-width:1024px) { .blog-basic-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }} If anyone has any other suggestions, I'd be very grateful! πŸ™‚ I'm using a basic grid block template. Thank you in advance!
  12. Site URL: https://bonjrmusic.com Hello, How can I avoid the white bar that appears while I resize the window? https://i.gyazo.com/c601d704708a402d0ce68d9d5bd70269.mp4 Appreciate any help I can get with this!
  13. Site URL: https://maroon-sphere-8bap.squarespace.com/ I've used a block that has three columns and one with just two, setting the width on the sliders. The % are different on both blocks but looks even on desktop. When on mobile, the widths are noticeably different. I can't figure out how to code it so that they're all similar widths on mobile. Password is chicken.
  14. Hi all, I found this really cool timeline that I would like to implement on my squarespace to speak about my study and work experience. I have tried to copy and paste the HTML and CSS codes into the code blocks or into the custom CSS but nothing is happening. I am not sure how to inject the JS part inside Squarespace. Do you have any idea how to implement this timeline inside Squarespace? Thanks a lot!
  15. Site URL: https://molliekeane.com/pagecv Hello, I have two buttons on a page that are displaying too big on mobile view. I would like to resize them so that they are smaller, and reposition them so that they are aligned horizontally, as opposed to vertically as they are now. Site URL: molliekeane.com Thank you in advance 😁
  16. Embedding it is simple enough. But that won’t work on smartphones or small devices quite well.
  17. Hello Everyone, Kind of in a dilemma and in hurry to see if anyone can help me... Is there any coding out there that can stop the use of responsive sizing? To be as clear as possible, I have a Wells template and I'm tired of having the images rearrange every time I move from one display size to another. In other words, is there a way so that the entire site can retain its proportions (including gallery thumbnails)? Thank you so much in advance!!
  18. Site URL: https://recreare.squarespace.com/ Site: https://recreare.squarespace.com/ Password: recreare Hi! I'm using the new auto-content blocks and would like the list items or cards to be equal height. Super thankful for any suggestions or help! Thanks! Jenni
  19. Site URL: https://ladybug-chicken-2tp4.squarespace.com/ Hi all, At the moment my Burger is appearing on the wrong side of page inbetween full width and mobile version we have the widescreen state which is the standard desktop (where nav is visible) which is fine and the mobile state which is also fine (both with a green tick under the image) However, in between these widths, so when desktop view is in too small of a width to fit the navigation items in, it reverts to the burger (which is correct) but the burger is on the left of the screen rather than the right (not how i would like it). When the site is in this responsive width id like the burger to be on the right of the page please. If you squidge the window down slowly you will see what i mean, ive shown in pictures here. Thanks so much for your help and expertise! Jack Site password: *3iRgpCKJ-8@bBZ7
  20. 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/
  21. Hi, I am building a site on 7.1 which has a portfolio area which holdis individual project case studies. Each project has a gallery slideshow (full width with bullet transitions). On desktop is works fine. On mobile the gallery has completely lost it's aspect ratio and is now portrait (extremely tall and thin) and therefore gives an awful crop. All other static images behave correctly. I have see other sites using the gallery and the aspect ratio is largely retained. If anyone has got a workaround or can help it would be appreciated?
  22. Site URL: https://cobalt-fennel-xn4n.squarespace.com/experience Hi I noticed that the text I added to a few poster images are shifting only on tablet (not mobile or desktop). Is there a way to fix this so that the text and icon stay within the parameters of the poster image? url: https://cobalt-fennel-xn4n.squarespace.com/experience pw: gcre2022
  23. 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
  24. Site URL: http://www.moonlitdesign.uk Hey there, i've just discovered this website built with Showit i believe, and i wondered how it is so responsive? I'm fairly new to coding and when I designed my site images and text would move all over the place when you resize the browser. This website however works completely seamlessly at any browser width and i basically just want to learn the secrets?! what code snippets and rules are allowing her to achieve this magic? https://www.bymartharose.com/
  25. Site URL: https://odepodcast.nl/testpage Hi! I've been trying to find a solution to a problem but having no succes as of yet. I hope the forum members here can help me out. There is a page on my website where I have an embedded player of a podcast via Springcast.fm. Their player is designed to be responsive to the width of the screen. On some mobile devices (iPhone SE for instance) the screen is too small to display the waveform in the player, which makes it kind of impossible to navigate through the podcast. Is there a way to override the responsiveness? I thought maybe the page-design can be done in such a way that it forces the player to a specific width or perhaps make a button where one can switch to the desktop-view? Thanks in advance for any help!
  • Create New...