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
  • 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://www.sarahjacobus.com/ Hello! I'm needing some help with a responsive design issue I'm having on my client's website. The sub-line on the homepage that lists her work "Teaching Artist | Social Worker, etc..." is getting pushed down too low so it's getting cut off and you have to scroll to see the list. The homepage is supposed to be one section with a full scale image background with no scrolling. On the squarespace mobile view it shows it correctly (seen in first picture) on my phone as well as my iPad it shows incorrectly (shown in second picture. Any one have any ideas for code that could help make sure this doesn't happen? Thanks!
  2. Site URL: https://marketingrecruitment.digital/services Hey all, I'm looking to create a responsive grid layout for a services section on my website. Right now it looks pretty good, however, I'd like to be able to adjust two things: 1) Keep the height of each image block in the row the same height regardless of the amount of text. 2) As screen size shrinks, instead of going from 3 columns to one, it should go from 3 to 2 to 1. Here's the existing code I have for the image blocks. section[data-section-id="6166c23546b0db43ac0138d0"] .sqs-block-image { background-color: white; border-radius:10px; box-sizing: border-box; margin: 5%; padding: 30px; } @tuanphan I've been seeing your name everywhere. If you have any suggestions I'd love to hear them.
  3. Site URL: http://www.james-starkey.com Hi, I'm really in need of some help with gallery block sizing and also in need of help with responsive design for desktop, Macbook pro and Iphone/tablet. I'm going through all of my projects on my site and changing the layout to a slideshow gallery block instead of an image scroll, which you will see if you take a look at projects further down my site. Im happy with the sizing of the gallery blocks in these projects. (See examples below) I've uploaded this project, (see example below) The sizing of the gallery block is way off and I can't for the life of me figure out how get the gallery block the same and the examples above. And also how do I get my site to be responsive to all screens, Is there anyway to get my site to view the same on I mac/macbook/pro and Iphone etc. Is there anyone that could shine some knowledge on this problems i'm having? Thankyou! Best, James
  4. Hello! So my site is https://earthlycraft.co/ It's almost there... but i cant work one thing out. How to change one of my banner hero images for mobile. It looks great on desktop however its too small on mobile, so i have another logo ready thats zoomed right in that i'd like to use for mobile only. I've added the file in design > custom css > manage custom files so i can use the link to the file I'm fairly familiar with media queries but i don't know the code to change the banner. When I inspect I get this code: .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img Therefore i'm going for something along the lines of: @media only screen and (max-width: 600px) {.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img {background image: https://static1.squarespace.com/static/5d00032088447c0001487495/t/5dcdc90c40062f0cf29e9ddc/1573767446853/mobilelogo.png;}} Help would be much appreciated!! Cheers!!
  5. Site URL: https://hebdenroydprimary.squarespace.com/new-homepage As I gradually improve at Squarespace design, I'm focussing on trying to make sure that mobile and tablet views look as good as desktop. One thing I'd like to be able to control is the point at which content blocks stack on top of one another rather than side by side. In a couple of sections on this homepage (in 7.0 Brine), the tablet view just looks off because the side by side sections get too skinny, or a button gets cut off. I'd like them to stack sooner. Is that something I can control? Set a minimum width for certain block types maybe? Can I do it for certain sections or site wide?
  6. Site URL: https://www.thefirst.vc/portfolio Hello, so i created image overlay effect for my portfolio page complete with custom css. It is working perfectly fine on desktop browser (https://www.thefirst.vc/portfolio) but its completely not working for mobiles. Can anyone suggest what can did i do here? How can i make this responsive? Code: <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style> .flex-container { position: inherit; display: flex; } .img1-wrap { position: relative; overflow: hidden; width: 280px; padding: 50px; } .image { width: 2000px; } .overlay { display: block; position: sticky; bottom: 0; left: 0; right: 0; background-color: #ad0909; overflow: hidden; height: 0%; transition: .5s ease; } .img1-wrap:hover .overlay { height: 100%; } .text { color: white; font-size: 12px; font-family: Reggae One; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } </style> <link href='https://fonts.googleapis.com/css?family=Reggae One' rel='stylesheet'> </head> <body> <div class="flex-container"> <div class="img1-wrap"> <img src="/s/BBBook" alt="Avatar" class="image"> <div class="overlay"> <div class="text">BBBook is a community-based reading platform that facilitates collaborative study for university and school students.</div> </div> </div> <div class="img1-wrap"> <a href="https://www.cash.live/"> <img src="/s/Cash-Live-Logo.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Cash Live is a live-streamed, free to enter poker game show featuring daily tournaments where players compete for cash.</div> </div> </a> </div> <div class="img1-wrap"> <a href="https://codeblugames.com/"> <img src="/s/CBG" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Code Blue Games is developing 6Degrees, a Third Person Action Adventure/Tower Defense game.</div> </div> </a> </div> <div class="img1-wrap"> <img src="/s/Acces-Job" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Accessible Jobs is developing an online job portal focused on helping people with disabilities find accessible work.</div> </div> </div> </div> <div class="flex-container"> <div class="img1-wrap"> <a href="https://dineeasy.ca/"> <img src="/s/dinenew" alt="Avatar" class="image"> <div class="overlay"> <div class="text">DineEasy is a one-stop platform for powering the digital infrastructure for restaurants, cafes, and hotels.</div> </div> </a> </div> <div class="img1-wrap"> <a href="https://www.gamejobs.ninja/" target="blank"> <img src="/s/gamesninja.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">GameJobs.Ninja is a recruitment platform focused on the video games industry.</div> </div> </a> </div> <div class="img1-wrap"> <a href="https://www.myhubly.com/" target="blank"> <img src="/s/hubli" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hubly is building technology to power the future of financial planning and advice.</div> </div> </a> </div> <div class="img1-wrap"> <a href="https://www.ludare.com/" target="blank"> <img src="/s/Ludare" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Ludare Games Group is a publisher of free-to-play mobile games featuring top-tier licensed intellectual properties.</div> </div> </a> </div> </div> <div class="flex-container"> <div class="img1-wrap"> <a href="https://pepper.gg/" target="blank"> <img src="/s/pepac.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">PEPPER lets gamers and organizers discover and create local and online events for cash prizes. Acquired by TGS Esports.</div> </div> </a> </div> <div class="img1-wrap"> <a href="https://storiiitime.com/" target="blank"> <img src="/s/StoriiTime" alt="Avatar" class="image"> <div class="overlay"> <div class="text">StoriiiTime empowers online influencers to earn more with less work through its no-code narrative game templates. </div> </div> </a> </div> <div class="img1-wrap"> <img src="/s/Startup" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Startup Arena is building a model for co-working startup spaces in a post-COVID world.</div> </div> </div> <div class="img1-wrap"> <img src="/s/SuperCommerce" alt="Avatar" class="image"> <div class="overlay"> <div class="text">SuperCommerce is a buyer, operator, and scaler of ecommerce websites. </div> </div> </div> </div> <div class="flex-container"> <div class="img1-wrap"> <img src="/s/v2ac.png" alt="Avatar" class="image"> <a href="https://victorysquare.com/" target="blank"> <div class="overlay"> <div class="text">V2 Games is a developer and publisher of casual mobile games. Acquired by Victory Square Technologies. </div> </div> </a> </div> <div class="img1-wrap"> <img src="/s/Vetsie" alt="Avatar" class="image"> <a href="https://www.vetsie.com/" target="blank"> <div class="overlay"> <div class="text">Vetsie is making veterinary care more accessible by leveraging innovative technology to transform pet care.</div> </div> </a> </div> </div> </body>
  7. Site URL: https://bbad-wwgc.squarespace.com I'm hoping to ask for some help/magic on a problem that I have on the Facebook page plugin. I have placed a codeblock and added the iFrame code however it is non responsive. When you scale the page the content inside the codeblock does not scale, is there a solution for this? Password: bbad-wwgc I hope to hear from you. Cheers, Dennis
  8. I would like to make all my full-bleed images from getting cropped when it turns into mobile view -- is there a code to make all full-bleed images responsive in different views? (so it scales down proportionally while still being full width?)
  9. 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
  10. Site URL: https://www.mikepruim.com Hi, on my responsive website, I have 2 blocks laid out side by side so that on desktop and tablet they are on the same row (see attached). However, on mobile the 2 blocks stack on top of each other which causes an odd layout because of the alignments of each. Is there any way to keep the social media buttons and the resume button on the same line on mobile?
  11. Site URL: https://nicholas-brtn.squarespace.com/eko Hey all, Preface I am not a coder: Apologies if this has been asked before but I've been looking through the forum for a solution and was unable to find one. I am attempting to put a Figma prototype on my website via embed code. It looks fine on all sizes of desktop however mobile cuts off chunks of the media. Below is the code I'm using: <iframe style="border: none;" width="100%" height="1032" padding="0" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FgcuVfb0daa4ej6WjR4iq9C%2FEko-Test%3Fpage-id%3D9%253A152%26node-id%3D35%253A2817%26starting-point-node-id%3D35%253A2817" allowfullscreen></iframe> </div> <br /> <div class="Container-slim"> I've tried two main ways of correcting this issue with non success. First playing with different width/height dimensions & percentages. Second using custom CSS using: ##block-yui_3_17_2_1_1631001115305_51759 iframe { height: 100vh; } Also tried the same css adjusting width. Appreciate all the help so much, been spending countless cups of coffee on this.
  12. Hello, im trying to edit the site styles in my squarespace template. the button does not respond and the features does fails to provide the side bar window to make edits. im not sure why this is. when i copied the site it allowed me to use the site styles button. however on my published site while attempting to make edits it does not respond. The image below shwos the brush icon for the site syles. it is located in the site editor at the top right.
  13. Site URL: https://tambourine-oarfish-c28h.squarespace.com/ Looking to center the navigation links between the logo and Add to Cart button without the links stacking or the logo shrinking. Currently using the code below to achieve something close to the desired look, but I'm having issues with the nav staying centered on all screen sizes and the logo not shrinking down to nothing on smaller screens. .header-title-nav-wrapper { flex: 1 0 82%; } .header-layout-nav-center .header-nav { width: 100% !important; flex: 0 1 auto; } .header-layout-nav-center .header-nav-list { justify-content: flex-end; flex-wrap: nowrap; } Desired effect attached. Thank you! https://tambourine-oarfish-c28h.squarespace.com/ password: Bestcannoli2021!
  14. Site URL: https://www.mirandakelton.com Hi everyone! Looking for a little bit of help with formatting my navigation menus. I have a widescreen desktop computer (17") and my navigation looks perfect with that screen width - however, when someone looks at my site with a smaller desktop screen (say 13") it's not quite small enough to shift to the tablet/mobile view, so my menu navigations get compressed and the dropdown menus all overlap each other. If I could do some sort of responsive text size css that would be great! I just want the navigation buttons to all stay inline & for the text to just become smaller if someone is looking at it on a smaller computer screen. Hopefully that make sense! Has anyone found a good way to fix this problem? Any suggestions would be much appreciated! Photos below to show the issue! Mobile Breakpoint is currently set at 1000px.
  15. Site URL: https://corfuvillacollection.com/rentals/villa-daisy Hello, I'm trying to create a page that displays the number of bedrooms and number of guests via two images, on Desktop the size is perfect but when the site is switched to Tablet view the images are too small and then again on mobile they become too large. There is a Spacer block either side of the image blocks to get them to the correct size on desktop. Is it possible to maintain the size on the tablets and mobiles, so it looks the same on Desktop? I have attached three screenshots to show as an example. Thanks.
  16. 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!
  17. Site URL: https://hypersphere-blueberry-ygcs.squarespace.com/ Hello! On the mobile version of this site, the photo and text of the sections alternate. Is there a way to have them consistently have the image on top and text underneath? Thank you in advance!
  18. Site URL: https://hypersphere-blueberry-ygcs.squarespace.com/ Hello! I currently have a summary blog of recent blog posts that looks fine on full desktop (4 columns) and mobile (either 2 columns stacked or 1 column stacked), but there is a strange in-between point that switches it over to 3 columns and creates an additional row for the single widow item. Can someone help me figure out a code customization to keep that point to 4 columns? Thank you in advance!!
  19. Site URL: https://scarlet-grape-g5ln.squarespace.com/ Hi there, I was looking for help with making a video full-bleed responsive with the website edge to edge. I also want it to work for both desktop and mobile. I have two examples running on my page right now. There was one where I am running it as a background video using BUT it wasn't centering properly. Part of it was being cut off by the header and it wasn't centering on the mobile properly either /* Section background image 16:9 video */ //show on mobile section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { display:block !important; } // show on desktop html.no-touch section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { display: block !important; top: 0 !important } section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { //16:9 spacer padding-bottom: 56.25%; min-height: 0 !important; .section-background .sqs-video-background iframe { //make it the size of parent no matter what automatic JS it would like to do border-width: 0; position: absolute !important ; top: 60%; left: 60%; margin-right: 0%; transform: translate(-50%, -50%) } // blocks would be here but we won't have any .content-wrapper{ display:none !important; } } I was currently using this (a code of yours that I found in the past) in the CSS for the second version of the video underneath the one that is currently full-bleed /* Video fullwidth */ [data-section-id="6103292e6ee0aa3483fa6e22"] .content-wrapper { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } Website: https://scarlet-grape-g5ln.squarespace.com/ P: doormat123
  20. Site URL: https://secretangelnumbers.com/ Hello Squarespace Community! Hope all of you are doing well. I am writing this request to get help from the expert who know how to optimize a squarespace website and get 90+ score on gtmetrix. Currently my website is not responsive. Here is URL: https://secretangelnumbers.com/ Let me know if anyone is available for my help. Thanks and Regards. Emma Gree
  21. Site URL: https://trainiz.com/ Hello, I added this code on my website to insert a qualtrics forms I created : <iframe src="https://edhec.az1.qualtrics.com/jfe/form/SV_9tTUol10UKXqMWq" width="800px" height="1000px"></iframe> The display works fine on the laptop version but on the mobile version we need to unzoom the page to see the entire form. Can you help me with that please ?
  22. Site URL: https://apricot-minnow-acst.squarespace.com/member-areas-4 Hi Everyone, I'm having an issue with an image looking strange when I am viewing the page on mobile. I am happy with how the "Freebie" block looks on desktop: ...But when I resize it on mobile it looks very small height-wise: The other blocks resize to an almost square shape and I would like something similar for the freebie bloack. Is there a way to achieve this when resized? Thanks!
  23. Site URL: https://mindfulwaves.com/ Hello! I can't find the way to add some margin to my mobile version. Hope someone can help! Thanks
  24. 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
  25. Site URL: https://sawfish-strawberry-4hha.squarespace.com/config/ Hi, ---How do I ensure that the logo I have in my footer displays smaller when viewed on a mobile than it does when viewed on a laptop? ---Also, is there a really specific video explaining how to do this? Much thanks in advance 😊
  • Create New...