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
  • 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.ursulamcmanus.earth/ RPReplay_Final1635195642.movI don't know the proper terms, so please advise 🙂 How can I make pages stationary-fixed? Pages are bouncy on mobile, there's a blue trough at the bottom and some pages seem to come 'unglued' when navigating on mobile, and pull side to side. Also, where does that blue background live, and can I change it? Thanks for the help!
  2. Site URL: https://www.tretuser.com Hi, my site looks good on desktop but the "join waitlist" button doesn't look good on an actual mobile phone. How do I make it the same size (length & width) as the "enter email" form field and align them? Thanks in advance for your help.
  3. Site URL: https://caper-goose-m247.squarespace.com/services Hi I'm trying to reverse some blocks on mobile for some sections on my website, the sections are under the tab "services" and I would like to reverse 'Discovery call" so the image appears before the text and "Planning Session" o the image appears before the text as well, could anyone help with this please? Password:Client
  4. Site URL: https://pigeon-disc-bftz.squarespace.com/home Site URL: https://pigeon-disc-bftz.squarespace.com/home Hi I have come so long with the css custom coding but now I really need some help: My website looks like this; But I want it to look like this in 3 lines on my frontpage; And I can see that my code with the text and picture between not totally are responsive to the mobile phone and iPad size; And I want it to look more like this, but with my images between; I really hope someone can help me 🙂 This is my Password: Jensen1259 and this is my url link: https://pigeon-disc-bftz.squarespace.com/home Best regards Jensen Retail
  5. Site URL: https://pigeon-disc-bftz.squarespace.com/home Hi I have come so long with the css custom coding but now I really need some help: My website looks like this; But I want it to look like this in 3 lines on my frontpage; And I can see that my code with the text and picture between not totally are responsive to the mobile phone and iPad size; And I want it to look more like this, but with my images between; I really hope someone can help me 🙂 This is my Password: Jensen1259 and this is my url link: https://pigeon-disc-bftz.squarespace.com/home Best regards Jensen Retail
  6. Site URL: https://silver-elephant-jdg7.squarespace.com/ Hi all, I am one of the creators of Insideout Studios. We are newly college grads coming together and are having issues with some of the css in our new site. We typically out source when it comes to code dealing with clients but I decided to take on the project for our new site. I will admit this was challenging but I'm at a place where I'm happy with it. There's just a few issues we are having with css and javascript. We were wondering if anyone is able to assist us please. 1st Issue: We are having trouble with the java script in the hero section of every page. We are trying to make it fade to black instead of white. 2nd Issue: On the home page our service section, we are having trouble with the css mobile view 2 by 2. 3rd Issue: On the about page our process section, we are having trouble with the css mobile view 3 across evenly. Password: DRAW2 Please feel free to let us know what else there is that you need from us. Also would love to hear HONEST feedback Thank you! P.S. ignore most descriptions and images, still making changes to the content.
  7. 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!
  8. Site URL: https://www.madeofair.com/ Hi, I am tweaking my site (madeofair.com) for tablet format using custom css. I am struggling with the "auto layout" list section. It looks good on desktop and mobile, but tablet is not looking good at all. Here is a photo of that: I tried a variety of css codes to change the margin, padding, width, etc, but I can't seem to find the write combination. * note: this code is not correct * section[data-section-id="615b2fd71249de2a06ebdfcf"] { padding-left: -250px !important; padding-right: -250px !important; } h1, .user-items-list-item-container * { font-family: 'geographmedium' !important; width: 25vw; } From my tests, I could successfully increase the size of the images and the text, but could not figure out how to extend the width of the content to make more space for the text to fit properly. I figured out how to manipulate the title font size, but then it was effecting all the H1 text on the site, which we do not want to do obviously haha. I would like to do one of the following: 1) reduce the title font size so title text fits better 2) extend margin on left and right so the text has more space 3) shrink the overall size of the list section so all three items can have more space and of course, I am open to suggestions on what you think is best. Many thanks in advance, - Kristen
  9. Site URL: https://www.legaspi-company.com/ Hello, My webpage works fine on computer, but when I try it on a phone, or on the phone version while designing it, I can only see the home page. When I click on the menu bar it goes blank, instead of deploying the menu bar with: work, studio , contact. Can someone help please? 🙂
  10. Is there a way to change an item's colours depending on light or dark background colours? Any item like a header, or nav. I was wondering how we can implement colour change depending on section backgrounds.For example, a fixed H1 text in the middle of the screen, how do we make the text change colour WHILST SCROLLING between light and dark background colors?What's the best way to do this?I was trying out with color-blend-mode:difference but the effects felt too much on the eyes.Thanks in advance! ❤️ ❤️
  11. Site URL: http://practice.cat Hi everyone, I would like to display the images of our products with a landscape 16:9 ratio crop on desktop, but on mobile want it to switch to 3:4 vertical crop. Essentially choosing different ratios for mobile and desktop. Can anybody help me with this?
  12. Site URL: https://tulip-ranunculus-xc8d.squarespace.com/travel-house Hello I am looking for some help in re-ordering blocks on this page here: https://tulip-ranunculus-xc8d.squarespace.com/travel-house In the "Aruba Takeover 2021" Section I would like the gallery block to stack first on mobile above the text content. I have seen a few similar threads but not having any luck with those solutions. Any help/guidance is appreciated!
  13. Site URL: https://www.mistymountainyoga.com/blog/why-journal Hello, I am not sure what is going on but the text on my blog posts is getting cut off on mobile from left to right. On other posts that have video, the videos are not showing up on mobile. Any ideas?
  14. 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
  15. Site URL: https://chiton-amphibian-hjdg.squarespace.com/shops Hi, I'm having issues with the sizing of the list items. I'm using the new auto content blocks and just one block is bigger than the other ones. Is there a way to make all the boxes equal height? Site:https://chiton-amphibian-hjdg.squarespace.com/shops PW:Metro!23 Thanks, Jeff
  16. Site URL: https://butterfly-clover-xpmk.squarespace.com/ Hi - I'm having trouble trying to force my image and text blocks to progressive stack responsively as the screen size decreases in width. I'd like to make it so it is divisible by 2: It's currently 6 column width in large screen, and when it scales down the columns become really skinny and the text is not nice to read; and then it snaps to the default single column. What I'd like it to do is as the width decreases from 6 columns, I'd like it to stack to 3 column (?), then 2 column, then finally 1 column. Is this possible? Current 'desktop' view: Nasty skinny smaller width view that I want to avoid and force elegant stacking:
  17. Site URL: https://www.mamascoach.com Hey all, I have NEVER had complete loss of responsive design on my squarespace site before. My paragraph text is just completely unresponsive. I can't find any CSS that is impacting it. Does anyone have any ideas? password to my site is "password" See picture below:
  18. 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
  19. Site URL: https://www.itekascents.com/about Hi all I'm having trouble with one section on one page only on this website/page - https://www.itekascents.com/about (password - louisef) I removed the paddings at the top and bottom of each section id, including the troublesome one here (currently has a temporary pink background). I think the issue lies with the slideshow/gallery itself. The code I used to remove the top and bottom space here was .gallery-slideshow.preFade.fadeIn { padding-top: 0 !important; padding-bottom: 0 !important; } But once the screen size hits under a certain width (I think round about the 960px wide mark) the above code just doesn't seem to apply and I need it to. Does anyone have a fix for me please? Thanks in advance!
  20. Hi all, Is there a way to force mobile responsive-design? The blog post I'm looking at looks great on a wide screen until I reduce the width to about half a 27" wide screen then the design starts to deteriorate. https://projectsinsider.com/project/3-rubida-court-endeavour-hills lifeisgood At wide screen: At half screen: Then just before mobile responsive-design kicks in: Mobile responsive-design: Additionally, is there a way to have the page response created in this way whereby the main body does not get reduced until the unused/empty spaces on the left and right have been used first? https://a-d.com.au/new-apartments-developments/vic/footscray-3011/millhouse Full screen: Half screen: Tablet size I think: Mobile: Other similar sites: https://www.urban.com.au/new-apartments/liberty-one-1-warde-street-footscray https://www.realestate.com.au/project/millhouse-footscray-600031454 https://www.ibuynew.com.au/apartments/vic/melbourne/east/hawthorn-east/hawthorn-park
  21. 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>
  22. 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?)
  23. Site URL: https://www.coachcourtney.net/ Hi, please help. Is there a way for these pictures to "NOT" somehow hanging? These photos keep on floating as soon as my screen resizes from width 945px to smaller widths. I have similar pictures like these across the web pages 😞 1. homepage https://www.coachcourtney.net/ 2. About me https://www.coachcourtney.net/about 3. Training packages https://www.coachcourtney.net/trainingpackages I also think that the padding on top is not responsive. I'm not sure why. I use the following code for the desktop previously: //Home PAGE// //CC Picture at Home PAGE// div#block-yui_3_17_2_1_1631304561541_3905 { padding-bottom: 0; } [data-section-id="6128352549b74866b4b70d81"] { min-height: 10vh !important; } [data-section-id="6128352549b74866b4b70d81"] .content-wrapper { padding-top: 30px !important; padding-bottom: 0px !important; } //removing padding bottom at about me picture// div#block-yui_3_17_2_1_1631167739251_2488 { padding-bottom: 0; } [data-section-id="6139a4c760236d737ef81c08"] { min-height: 10vh !important; } [data-section-id="6139a4c760236d737ef81c08"] .content-wrapper { padding-top: 80px !important; padding-bottom: 0px !important; } //removing padding bottom at Training Packages Page// //CC Picture at Training Packages Page// div#block-yui_3_17_2_1_1631303218959_4742 { padding-bottom: 0; } //STRENGTH and SOUL IMAGE LEFT// div#block-yui_3_17_2_1_1631140439839_4960 { padding-bottom: 0; padding-top: 0px; } [data-section-id="61393a6b321ef9720209c260"] { min-height: 10vh !important; } [data-section-id="61393a6b321ef9720209c260"] .content-wrapper { padding-top: 30px !important; padding-bottom: 0px !important; } //removing padding bottom at TRIBE Retreat Page// //CC Picture at TRIBE Retreat Page// div#block-yui_3_17_2_1_1631220058643_14982 { padding-bottom: 0; } //ABOUT THE RETREAT at TRIBE Retreat Page// div#block-yui_3_17_2_1_1631220058643_13789 { padding-bottom: 0; padding-top: 40px; } [data-section-id="6139abe393764a70eda3bbe8"] { min-height: 10vh !important; } [data-section-id="6139abe393764a70eda3bbe8"] .content-wrapper { padding-top: 20px !important; padding-bottom: 0px !important; } Also, as my screen reaches somewhere from 1205px width, there's a white space on the right side of the screen. It only disappears after the menu burger icon becomes visible. So sorry for bombarding you with these problems.. I'm not really good at this. Thank you so much.
  24. 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
  25. Site URL: https://perthtimelapse.com Hi all, I've been working on the website for my new business for the last few weeks, and I think it's finally at a place where I am happy with it. If anyone has any feedback on the site (good or bad), I would love to hear it 😀 https://perthtimelapse.com
  • Create New...