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://olive-copper-nxmd.squarespace.com/ Hello! I have been working on a site for my employer, I was provided a lot of content for each section and so I decided to put this in a code block with two boxes that slightly overlap and flip in side and colour on each section. On my device, and my colleague also using a macbook, it looks fine (minus a few unfinished adjustments). However, when my manager looked at the site it looked very different. I checked the browser zoom was set to default, but its an issue for all colleagues on windows desktop. Is this just whilst the site isnt live, or will the site display differently for windows desktops? If so, how do i fix this? Of course the sections were messed up on mobile, but i am using media query to replace these with reformatted duplicates which is working fine. Just not sure why mac laptop and windows pc look so different, but i assume this is screen size rather than mac/windows. Attached is a screenshot from my browser, vs a screenshot from one of my colleagues. (You'll notice my colleague screenshot a different section, which is because for some reason the first one is fine for them. But the replica sections (when they flip over and. change colour) are having the issue. I have also attached a screenshot of what i see on that section. Note the text weight seemed to have changed for me too, not sure why... Theres 6 sections in total following this style, and will be a further 9 across other pages. Here is the code for the first one, which is a non issue: <div id= "ServiceNow Platform and Integration SN COE"> <div style="background-color: hsla(154, 27%, 63%, 0.99); opacity: 1; position: relative; top: -180px; left: -100px; width: 70%; height: 800px; border-right: 0px solid hsla(154, 27%, 63%, 0.99); padding: 30px; border-radius: 0px; box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);"> <h4 style="color: #000000; weight: bold; position: relative; top: 20px; left: 40px; padding: 30px; width: 50%;"> Customer Problem. </h4> <p> <span style="color: #000000; position: absolute; top: 100px; padding: 30px; left: 70px; width: 50%; font-size: 18px; ""> Many customers design their ESM processes in silos, the Change Management team define the Change process, the Incident Management Team the same; however while those processes may operate effectively – the interaction between them is often forgotten about. <br><br> A failed Change may result in an Incident (or even a Major Incident), conversely an Incident may require a Change to remediate the issue – but without understanding how these two need to operate together a huge amount of time, effort and ability to accurately understand the impact or root cause is often not possible. <br><br> Once the root cause is identified, where does that information get stored – Incident needs to link with Knowledge Management so that it doesn’t happen again, Change needs to be informed of ‘why’ so that future Changes don’t repeat the same issue. </p> </div> <div style="background-color: hsla(214, 0%, 0%, 0.99); opacity: 1; position: absolute; top: -50px; right: -100px; width: 60%; height: 500px; border-right: 0px solid hsla(154, 27%, 63%, 0.99); padding: 30px; border-radius: 0px; box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);"> <h4 style="color: #ffffff; weight: bold; position: relative; top: -15px; left: 0px; padding: 30px;"> CSX Capability.. </h4> <p> <span style="color: #ffffff; position: absolute; top: 70px; padding: 30px; left: 30px; width: 80%; font-size: 18px; ""> Our approach is different. Starting with defining the requirements and needs for each distinct ESM process, aligning where appropriate to ITIL V4 model, this is enhanced by then providing cross-process architecture to define a set of required inputs and outputs or ‘hand-offs’ that are mapped against any other ESM process, these include items such as tool usage, data requirements, access, security needs and communication between the people operating the processes. <br><br> Once identified, the hand-offs are discussed and an updated design is defined to ensure each can work successfully with its partner process and ensure a complete and holistic view of end-to-end Service Management. These powerful inter-connects between the processes enables organisations to reduce errors, increase service availability and identify very quickly areas that require additional attention or remediation. Here is the code for the one that is causing an issue (but not on my screen). <div id= "ServiceNow Platform and Integration SN COE"> <div style="background-color: hsla(154, 27%, 63%, 0.99); opacity: 1; position: relative; top: -120px; left: 500px; width: 60%; height: 800px; border-right: 0px solid hsla(154, 27%, 63%, 0.99); padding: 30px; border-radius: 0px; box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);"> <h4 style="color: #000000; weight: bold; position: relative; top: +15px; left: 250px; padding: 30px; width: 50%; "> CSX Capability.. </h4> <p> <span style="color: #000000; weight: normal; position: absolute; top: 110px; padding: 30px; left: 285px; width: 50%; font-size: 14px; ""> CSX promote the concept of a single point of truth (SPOT) for IT configuration and asset data. Modern tech (ie ServiceNow) means an automated solution is now possible which reduces the reliance on manual updates, and ensures a comprehensive view. ITIL’s Service Asset and Configuration Management processes can be largely automated, with workflow and ties to access control systems to ensure accountability and service ownership. <br>We focus on creating a CMDB structured on the Customer Service Data Model (CSDM). <br><br> The data and relationships are husbanded through: <br> 1) automated discovery of devices and applications, <br>2) managed processes for the creation and maintenance of services and products, <br>3) controls and reporting to drive compliance and performance. <br> <br>The benefits of a reliable, integrated CMDB are enormous: Operational Resilience planning; reducing MTTR; improved control of assets; managing technical debt, reducing impact of failed changes/releases and staying ahead of the regulatory auditors demands. In addition, the opportunities for automation are increased dramatically as orchestration of workflow can be driven from valid, trusted data. <br><br> Key Elements managed by CSX: ServiceNow ITOM Implementation, Discovery Implementation, Service Mapping, Establish Data model (ie CSDM), IT Controls Dashboards to drive compliance and – describe why important to get this agreed and how it relates to business activities. As with all process and technology improvements, strong comms and training of client stakeholders is an important success factor in adoption. </p> </div> <div style="background-color: hsla(214, 0%, 0%, 0.99); opacity: 1; position: relative; top: -900px; left: -90px; width: 60%; height: 635px; border-right: 0px solid hsla(154, 27%, 63%, 0.99); padding: 30px; border-radius: 0px; box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);"> <h4 style="color: #ffffff; weight: bold; position: relative; top: -15px; left: 10px; padding: 30px;"> Customer Problem. </h4> <p> <span style="color: #ffffff; position: absolute; top: 80px; padding: 30px; left: 40px; width: 80%; font-size: 18px; ""> For years, clients have seen the CMDB as a pink unicorn that is unobtainable. Data was not trusted, there was little ownership, and accountability was very hard to pin down. <br><br> To meet their needs for financial, service, procurement, regulatory, audit and even security purposes, they cobbled together lists and ran physical and virtual scans. They kept spreadsheets and registers and pulls from monitoring tools and bespoke apps and more scans. <br><br> There has been very little clarity and an incredible amount of risk piling up around this space. <br><br> Today, many firms are feeling the wrath of the regulator, resulting in career-limiting findings and in, more than a few cases, massive fines. </p> </div> </div>
  2. Site URL: https://www.alpha-alt.com/home1#services Hi I'm working on a 7.0 site and would like to make the 3 columns on this page (https://www.alpha-alt.com/home1#services) to stack into a single column with padding on either side for tablets. Similarly, on this page https://www.alpha-alt.com/contact-us-new I'd like the locations to become 2 columns on tablet.
  3. 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 screen and (max-width:767px) { .homepage #page section:first-child { min-height: 20vh !important; height: 30vh; } }
  4. Site URL: https://fbcamherst.squarespace.com/staff Hello! We want our "Read More" buttons to line up (see below). They do line up at a certain width (fully expanded on desktop) but when you shrink it, the are out of alignment (see second image) We want the body of this page to NOT be responsive to changing of window size so that we can have more control over what it looks like. How do we make it so the text does not wrap and move around as you change the window size? We want it to be fixed, unless on mobile where it would just use the mobile form of the website (single column). Site URL: https://fbcamherst.squarespace.com/staff Password on site is: fbcfbc Thank you! What we want it to always look like, unless it detects mobile-- then it should go to mobile design: When the window shrinks, so do all of the elements. How do we make it so that this doesn't happen on one page?
  5. Hi, I've been playing with CSS code to get the full bleed background image art to fit on the mobile site (see attached). Right now I can't see either subject. Can anyone help or give insight? Thanks in advance. This is for a client and the pages aren't published yet.
  6. Site URL: https://its1647.squarespace.com/ I'd like to use my mobile logo ONLY on tablets, not on desktop or phones. Is there a way to force Squarespace 7.1 to do this? site = https://its1647.squarespace.com/ password = teach Thank you!!
  7. Site URL: https://trombone-walrus-wzht.squarespace.com password: test How can I resize the two background videos of the mockup laptop and phone to fit within the width of the page on mobile without pixelating the video? Desktop background videos: Mobile background videos:
  8. Site URL: https://pte.squarespace.com/ Hi, I am having some trouble keeping my footer within the boundaries of the page. I was hoping to make the ^ABOUT ^WORK ^BLOG ^CAREERS ^CONTACT footer h4 text get smaller as the window resizes, however since I'm using nowrap, it makes the buttons fall off the page. Do you know a solution for this? Also, there is a lot of empty space to the right of the "Part Time Evil" logo that is keeping the menu buttons from using that space. You're help is much appreciated. All my footer custom CSS is under the advanced Footer section.
  9. Site URL: https://ladybug-chicken-2tp4.squarespace.com/ Hi there, My issue is with the footer, I'm trying to achieve a responsive design where the footer items take up the negative space defined by the spacer block instead of breaking at random point to accomodate the spacer as the browser window size changes responsively. Explained much more clearly in images attached to this post. Site: https://ladybug-chicken-2tp4.squarespace.com/ pass: *3iRgpCKJ-8@bBZ7 Any help would be greatly appreciated as its a little bit out of my league in terms of knowledge. Thanks in advance, Jack
  10. Site URL: https://www.soulfruit.co.uk/ Hi! is there custom code that we can use so that our banner images on the top of each page don't resize when going into mobile? Thank you!
  11. Site URL: https://www.curtains2u.co.nz/curtains-new I have these image cards which look great on desktop and mobile, but they look terible on tablet view. Any thoughts how to fix this? <div class="sec-rev-data" style="background-color:#ffffff; color:black; padding:40px; border-style: solid; border-width: 1px; border-color:#dedede;"> <center><img src="https://static1.squarespace.com/static/5d1d5299ef1a470001944e7b/t/6192e994508e700542845f72/1637018006368/C2U_Block+Out.jpg" class="card-img-top" style="display:block;width:250px;height:250px;display:flex;"></center> <h3 style="color:black;">Block Out Curtains</h3> <p style="color:#A72A4B;font-size:0.8125rem;">Light control - Versatile - Bold </p> <p>For superior privacy, choose block out curtains. Beautiful and highly practical, block out curtains give you complete control over light levels and regulate room temperature. </p> </div>
  12. Site URL: https://www.mcamedia.com/teatro-gerolamo Hi All, I'm working on this website and I'd like to put a different sizing for the video on Mobile/Tablet. The Desktop version is perfect as is but the mobile is not as good as the desktop one and there is also a LOT of padding. I'd like to achieve this results Any suggestions? Here is the link: https://www.mcamedia.com/teatro-gerolamo
  13. Site URL: https://jingzhang.co Hi there, I have uploaded image as the cover media for each of my projects, however, there is padding in between each item, making it confusing which project is being clicked when it's in between two projects. This issue is even worse on mobile where the space/padding in between is much more severe. I've tried different settings but none solved the issue. Images are below the show the padding. Would greatly appreciate any help! Website is www.jingzhang.co Password: ginkgo
  14. Hello, I made a comparison table for desktop view, the table has expandable rows using js. I made another smaller table for mobile and I am willing to hide the first one on mobile, show the second etc.. but when I am inserting the second table on the same page under the main one, the expand functionality stops working. I will share the link privately Thank you
  15. Hi everyone! I have added an SVG to my splash page: thelazydogcreates.co It looks fine on desktop and tablet, but the SVG on mobile is too small. I'd like to increase the size on mobile. I'm not very familiar with code, so any help would be much appreciated. This is the code I have in place currently, pulled from Adobe Illustrator: <div style="text-align:center;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70%" height="70%" viewBox="0 0 670 200" xml:space="preserve" preserveAspectRatio="xMinyMin slice"> <style type="text/css"> .st0{fill:#222222;} </style> <path class="st0" d="M377.48,80.85h6.67l-7.73-8.1l-11.86-3.77l-14.5-16.01l-15.82-11.3l-0.19,6.78l-27.49-3.39l12.27,10.57 l8.26,9.15l-12.81,9.28l0.88,10.16l-28.38,21.29l14.88,10.92h18.83l15.44-6.98l1.32,2.47l-12.81,21.09l2.07,13.23l5.62-7.58 l5.12,19.02l5.84-13.18l39.17-27.87l4.52-16.76L377.48,80.85z M293.69,107.62l-3.1-2.14l3.01-2.26l1.44,0.17l0.69,3.53 L293.69,107.62z M327.96,85.25l-3.18,0.98l-2.44-2.27l0.5-2.18L328.7,82L327.96,85.25z"/> </svg> </div>
  16. Site URL: http://lauritz.com.au/motion Hi All The banner images linking to my videos embedded from Vimeo remain in proportion when resizing vertically but not horizontally. On iPad in horizontal format they are severely distorted. Is there anything I can do to correct this? Thanks James
  17. Site URL: https://www.scatr.com/ The images in gallery on home page are not responsive on mobile, tablet seems fine though. I've tried multiple Custom CSS options I've found in the forum and they work in Squarespace but not on the live site. Any help appreciated!
  18. 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!
  19. 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!
  20. 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.
  21. 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
  22. 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!
  23. 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.
  24. 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
  25. 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!!
  • Create New...