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. 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
  2. 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! 🙏
  3. 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
  4. 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!
  5. 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!!
  6. Site URL: https://meinphotokurs.ch Hi guys I'm trying to disable the background image of a section on mobile, but somehow I can't manage to do that. I found in different forums this code: @media screen and (max-width: 768px) { section[data-section-id="6242b5d7ad5bb6583194145b"] .section-background img { display:none !important; } } I tried also different variations I found over the net, but nothing really works... Does someone know what could be the problem? Best regards
  7. Site URL: https://www.midrunpress.com/ Can't figure out why the type gets larger before scaling down on responsive view on this site. Haven't seen this happen on other sites I've done. On 15" monitor full screen browser or larger type looks correct. If you narrow the window the text all jumps larger, before starting to scale down as I'd expect on responsive view. Any tips of why or how to avoid?
  8. Site URL: http://suziichan.com Hello! I've been trying to figure this out with other posts on the same issue, but I'm not having any luck. I am working on a site for a Client in 7.0 (and its been a while since using 7.0). I'm trying to use the Poster Image block and keep the text contained within the image on all screen sizes. Currently the font bleeds off the image. I have spacers between the images on desktop because the full images are too big there without them. The best view right now is on mobile with the images stacked (still not spaced correctly/button bleeding off bottom/need more padding), but I want to keep them side by side on larger screens. If the List section option was available in 7.0 I don't think I would be having this issue as that is the look/idea I'm trying to achieve. Help! It's driving me crazy! Thank you so much in advance, Emily
  9. Site URL: https://www.bauyu.com/ Here is the page I want to embed facebook video. https://www.bauyu.com/current-exhibition I'm trying to use this code : <iframe src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FBYARTTaipei%2Fvideos%2F363770025768375%2F&show_text=false&width=476&t=0" width="476" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe> It works well in desktop view, but in the mobile and tablet it looks bad. Please let me know how to adjust, thank you!
  10. Site URL: https://shoshinmatcha.com/select-your-matcha hello, when these two pics on my site https://shoshinmatcha.com/select-your-matcha go to mobile they take up the whole screen. how do I make them smaller and side by side like they look on an ipad or computer ??? please help?
  11. 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.
  12. Site URL: https://www.nancykononelos.com Hi, In mobile, my website footer doesn't display properly. It doesn't stack with the content above it. The typography doesn't size down Can you help me fix this, please? Thanks!
  13. 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!!
  14. Hello everybody! I'm creating an ecommerce, now it's not availble. I really dont like how the lighbox of the product's quick view appear in the mobile version. Is any way to keep the quick view option in the pc version and unable it ( or remove the button) in the mobile version? Please can anyone help me out? Thanks in advanced 🙂
  15. Site URL: https://www.aspireleadwell.com/services I am trying to adjust the icon images on this page into two columns when viewed on mobile. I used this code but the last two icons are hanging. Any idea how to adjust this code? Current Code: @media screen and (max-width:767px) { div#page-section-60615955e6fb7c423bfac5d6 .span-12 { .span-4 { width: 50% !important; float: left !important; } }
  16. Site URL: https://raspberry-lavender-gzxh.squarespace.com/ I'm looking for CSS to make these two circle buttons side by side on mobile. I've found this answered lots of places but still can't seem to get it to work. Site password is 1234
  17. 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.
  18. 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
  19. 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
  20. 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
  21. Site URL: http://www.tillgmuer.com Hi, I hope you can help me with the following problem: Until a few days ago I was able to embed my YouTube videos in VIDEO and edit the code. That worked fine, and it didn't matter what height and what width the video was. Now I have to enter the Code at EMBED and the film is no longer responsive...! See attached the screenshots. The Screenshot_Video.PNG shows the code as I entered it earlier under VIDEO. I cannot copy that code from VIDEO to EMBED. How can I fix that? I don't want to link the movie in VIDEO because I still want to customize the code! Thank You very much! Tillsen
  22. I've uploaded a autoplay video loop which is looking fine on desktop but when viewing on mobile it isn't responsive Could someone help me out please
  23. 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/
  24. Site URL: https://cobalt-fennel-xn4n.squarespace.com/experience-1 I am building a site on version 7.1. I am creating a page to showcase several client logos. I used code blocks to add each logo so that they are evenly sized. I would like the logos to show up in a two-column vertical list when viewed on mobile. Can anyone assist with this? Password to the site is gcre2022
  25. Site URL: https://altustraffic.squarespace.com/ Hi all, I ran my site through Pingdom and it has flagged the following: Avoid URL redirects F23 Add Expires headers F35 Reduce DNS lookups E56 Make fewer HTTP requests Forgive my ignorance - how do I fix these? Thanks! Daniel
  • Create New...