Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'safari'.

  • 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://wedge-sealion-b28m.squarespace.com/ I have attempted to install the font Fraunces on a site I am testing. I did this by adding some code in the Custom CSS block and it works some of the time. It shows correctly in headlines but I cannot get it to show up in paragraphs. Similarly it shows up correctly in chrome but not in safari. The code I used, noted below, was placed in the custom CSS panel although I see some folks suggesting it is better in "managing custom files" tab. @import url('https://fonts.googleapis.com/css?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400;1,9..144,500&display=swap'); @font-face{font-family: 'Fraunces', serif;} h1, p1 {font-family: 'Fraunces', serif;} I am not 100% sure I was able to grab the correct information from the import section of google, primarily because the interface of google fonts has changed quite a bit since most of the online tutorials I could find. I suspect this could also be complicated by the variable nature of the fonts. The password to get into the site is: pirate Any advice would be appreciated. Thanks in advance.
  2. Site URL: https://piano-clavichord-j48t.squarespace.com/ Hi guys! I noticed that the font doesn't work on my phone, I use Safari. Although everything is fine from the computer. What could be the problem? https://piano-clavichord-j48t.squarespace.com/ pw - hello
  3. Site URL: https://gtf-technologies.squarespace.com Password to access the site is: sustainability I've added a custom brand font upload to my client's website. It displays perfectly on Chrome, but defaults to a serif font on Safari. I've used custom fonts many times and never had this problem. There are multiple .otf files and I've linked them all in Custom CSS as follows: @font-face { font-family: 'Decimal Bold'; src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/62602780700de322bef6cdda/1650468736767/Decimal-Bold-Pro.otf'); font-family: 'Decimal Semibold'; src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/6260279055b5a43970fe6cbf/1650468752519/Decimal-Semibold-Pro.otf'); font-family: 'Decimal Book'; src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/62602785cc73d30b0c8e4e45/1650468741689/Decimal-Book-Pro.otf'); font-family: 'Decimal Medium'; src: url ('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/6260278ba67dc25a0def59f0/1650468747580/Decimal-Medium-Pro.otf') } h1 {font-family: 'Decimal Bold'!important;} h2 {font-family: 'Decimal Semibold'!important;} h3 {font-family: 'Decimal Semibold'!important;} h4 {font-family: 'Decimal Medium'!important;} sqsrte-large {font-family: 'Decimal Medium'!important;} p {font-family: 'Decimal Book'!important;} sqsrte-small {font-family: 'Decimal Book'!important; } .header-nav *, nav.header-menu-nav-list * { font-family: 'Decimal Semibold'!important; text-transform: uppercase; } .sqs-block-button-element { font-family: 'Decimal Semibold'!important; } .sqs-button-element--primary { font-family: 'Decimal Semibold'!important; } .user-items-list .list-section-title p { font-family: 'Decimal Bold'!important; } .user-items-list-carousel__slides h2.list-item-content__title { font-family: 'Decimal Semibold'!important; } .sqs-block-form .field-list .title { font-family: 'Decimal Semibold'!important; } Any feedback on possible errors or how to fix would be greatly appreciated!
  4. Site URL: http://www.jeffbierman.com/ariana-grande-1 I am having trouble with YouTube videos loading on my site. All of the videos that I have linked from my Vimeo account play fine on all browsers, but the two clips I have that are linked from YouTube don't load or even show a thumbnail in Safari on Mac or iOS, but they work fine in Chrome on both my laptop and phone. It's essential for me to be able to present these works of mine on an apple device. Has anyone experienced this or know what could be causing the issue? I have had my site for a long time, maybe 8 years and I only just have noticed this issue. These are the two pages with YouTube links that don't work: http://www.jeffbierman.com/ariana-grande-1 http://www.jeffbierman.com/halsey-1 Any help would be greatly appreciated. Thank you!
  5. Site URL: https://www.fabriziaschettino.com/ Hello, I m having trouble with my landing page/website. I uploaded a custom font in CSS but it is not showing the right one in Safari and on my iPhone (whatever the browser). Also, it happens that only if I select the "bold" version of the font it works. I uploaded the .ttt, .woff, .woff2, .eot but nothing changes. Please help me Thank you very much for the support, cheers
  6. Site URL: https://www.ditbaderum.dk/ Hi guys, So I have this custom font on my site using @font-face. However, it looks bad on buttons only... as if it does not work on it. Any suggestions for a solution? I know another site for which it works completely fine. Thank you for your time and have a nice day.
  7. Site URL: https://www.lewisrossignolart.com/ Hi everyone, On the homepage of my clients site I have a few product summary blocks. The variant selector is styled correctly, however the css styles don't work on Safari & Chrome so far. Oddly enough I was able to change the font family (using the code below) for Safari Mobile app on IOS explicitly. However, I wasn't even able to change the font color using this code...only the font family. Any help is appreciated. .sqs-block-product .data-variant-option-name { font-family: amatica sc; -webkit-appearance: none; appearance: none; }
  8. Site URL: https://www.sheepdogmn.com/ Hi there, I'm having some issues with how text is displaying on Safari: 1. Some lines of text are appearing cut off vertically 2. The "submit" text inside the form button disappears on Safari
  9. Site URL: https://sealion-swordfish-4y7r.squarespace.com/config/ Hello, I am trying to justify text in Squarespace 7.1. I have tried adding all of the CSS codes that have been recommended here and from YouTube. None of the code seems to work in the Safari browser. Please help. Thank you. Password: littlemoon (lowercase)
  10. I've added a custom font to my website (https://pelican-harpsichord-rmwm.squarespace.com/ password: tran) which works fine in Chrome, but doesn't show up in Safari. Can anyone help me with this? Any help much appreciated!
  11. So I've asked the "Customer Care" team a few times about this issue. Site scrolls fine on desktop but on mobile it is choppy and jumps up and down as you go by different content. I've tried experimenting with parallax content on and off and other things, but it still happens. And quite frankly, just turning off parallax wouldn't be a "solution" really. So the answer I always get is, "We're aware of this, but no ETA on a fix." That's just not acceptable. So I'm posting this to see if anyone has had any success with any hack to improve how jumpy things are on mobile. We predominantly use Sonora and Mojave templates. Perhaps it isn't as bad on some templates? Thanks.
  12. Site URL: https://www.ktrestaurants.com/ Hello, I create most of my sites with Brine and rely heavily on the feature of setting certain Index pages to the full viewport height (100vh) especially the first page hero. I also like to use the scroll-indicator feature which sits at the bottom of the page. With Safari 15 on iOS there is now a bottom tab/location bar that covers a portion of this "full-height" section. When you scroll down the tab bar goes away, but on initial page load it is blocking the scroll indicator as well as part of the background image. Basically this breaks setting height to 100vh. Has anyone determined a way to ensure that this content is reliably placed above this bar and not obscured? Does anyone know if Squarespace is working on any kind of fix for this feature on iOS? I've haven't had any luck so far.
  13. Site URL: http://www.timjobling.co.uk Hi, I've recently added image fades to the images on my homepage and I have come across a glitch when viewing the site in Chrome and Safari. When you scroll down the page the images load fine, however if you click through to a gallery page and then go back to the homepage anything that hadn't previously loaded will not show until the page has been refreshed. I have attached video to show the issue. This doesn't seem to happen when viewing the site in Firefox. I have cleared all browsing history and made sure everything is up to date so I have no idea what is going wrong. I have checked other sites that use the same image fades and the same problem seems to occur there too. Has anyone come across this before and have a solution? Thanks, Tim. TJ_WEB.mov TJ_WEB.mov
  14. Site URL: https://petercook.com/blog/on-staying-calm As part of a quick refresh on a client's existing 7.0 website I have changed the typefaces to Merriweather and Merriweather Sans (using the standard Styles options). Any italic text is rendered with extreme letter-spacing in Safari (on both Mac and iPhone), but it's fine on Chrome. Chrome (as expected): Safari (WTF?): On the Google Fonts Merriweather page the type is rendered very similarly on both Safari and Chrome. So presumably this isn't a Safari problem per se, but rather something either specific to my site or Squarespace more generally. (I can approximate the look on the Google Fonts sample page by using `letter-spacing: 0.04em` in an Inspector window) _________ For what it's worth here's some additional info. If the client does not use italics the 'upright'/normal text displays as expected (eg see letter spacing for 'Zyl' and 'Zoë'). This text is styled by a piece of custom code (so that my client can easily style the questions simply by making them H2, but without affecting the styling of any other H2 text on his site). That code is simply: .blog-item h2 { font-size: 24px; line-height: 1.5em; font-weight: 700; color: #296978;} In the Inspector window's properties section the letter-spacing is shown as 'normal'. This is inherited from the H2 css, which explicitly sets the letter-spacing to 0. If I use the browsers' respective Inspector windows to modify the headline's attributes to display it as Italics I get an interesting result. The headline is set in 900 weight. But when set to italics it seems to display in 400 weight on Safari, and 700 weight on Chrome. Does this suggest Squarespace is only downloading a subset of the full font? My client's newsletter is sent using MailChimp, which also offers Merriweather as a custom font. That displays just fine on Apple Mail
  15. As much as I'm loving the evolution of SS (we have about 100 sites on the platform currently and have been working with it for about 5 years), I'm disappointed to have to switch back to Chrome due to the SS experience now being unbearable on Safari. This won't be an issue for you Windows users, but the huge backlash against Chrome (mostly over privacy) has caused us to [attempt to] switch to Safari since it's native (unlike Firefox), fast, and simple. However, as of this month, we're finding SS to be almost unusable in Safari... When clicking to edit any block on an SS site, Safari jumps back to the top of the page. When you scroll back down to click on the block again, it puts it into Edit mode, but it once again jumps back to the top of the page. When you scroll back down to that block again, you can then edit. So, it takes 3 clicks and 3 scrolls to edit any block on any page on any site. And with many of our pages being long, scrolling pages, this takes about 5 times longer to edit a site on Safari than on Chrome. I know that Safari only has about 16% global market share but that number includes all Windows and ChromeOS users. Amongst Mac users in North America, the percentage is much higher. I would estimate that about 25% of SS users are on Safari, so why isn't the compatibility a bigger issue? SS is literally the only reason we are forced to keep using Chrome at our agency.
  16. Site URL: https://www.alexandra-lyon.com Hi! Seeking help with this, any insight is so appreciated! Just noticed the buttons on my clients site look different on Safari and Chrome. On Chrome they show up like this: https://www.alexandra-lyon.com/ https://www.alexandra-lyon.com/course But on Safari they show up like this: https://www.alexandra-lyon.com/ https://www.alexandra-lyon.com/course This is the code I used to further customize the site styles: //Button outline// .primary-button-style-outline .sqs-block-button-element--small, .primary-button-style-outline .sqs-block-button-element--medium, .primary-button-style-outline .sqs-block-button-element--large, .primary-button-style-outline .image-button a, .primary-button-style-outline .newsletter-form-button, .primary-button-style-outline .list-item-content__button { border-width: 1px; border-style: solid; } .primary-button-style-outline .dark .sqs-block-form .sqs-editable-button { background: transparent!important; color: #ffffff!important; border-color: #ffffff!important; font-family: ss-pro!important; font-weight: 600!important; font-style: normal!important; text-transform: uppercase!important; line-height: 1.2em!important; letter-spacing: .25em!important; font-size: .8rem!important; } .primary-button-style-outline .dark .sqs-block-form .sqs-editable-button:hover { background: #ffffff!important; color: #888!important; border-color: #ffffff!important; } Any help is so appreciated, thank you!!
  17. Site URL: https://www.awakenkali.com/ Hello, I've uploaded a font to squarespace and added the CSS code but it doesnt show on some computers/browsers like safari. Any advice? Here is the code I typed: @font-face { font-family: Classico; src: url();https://static1.squarespace.com/static/605f4ff1a45fbc59069babdc/t/606f07e087c8fc5a71d384f9/1617889248411/Classico.otf } @font-face { font-family: Classico-Bold; src: url();https://static1.squarespace.com/static/605f4ff1a45fbc59069babdc/t/606f07e087c8fc5a71d384f9/1617889248411/Classico.otfhttps://static1.squarespace.com/static/605f4ff1a45fbc59069babdc/t/606f094d3062b77635fbb408/1617889613671/Classico-Bold.otf } h1 { font-family: Classico; } h2 { font-family: Classico; } h3 { font-family: Classico; } H4 { font-family: Classico; } .header-title-text { font-family:Classico; } @media screen and (max-width:640px) { @font-face { font-family: 'Classico'; src: url('https://static1.squarespace.com/static/605f4ff1a45fbc59069babdc/t/606f07e087c8fc5a71d384f9/1617889248411/Classico.otf'); } h1#sqs-slash-page-header { font-family: 'Classico' !important; } }
  18. Site URL: https://www.passwithpebbles.com/ HI - I have a whole lot of custom code on this website - and its giving me so much of a headache - help appreciated where ever possible! firstly there's is an additional font in Heading 2 and Paragraph 2 - a squarespace font - 'Rollerscript smooth' Its not showing in safari or on mobile. I have added it as Rollerscript & rollerscript-smooth - no change. I've looked at past posts and every answer is different what's the up to date resolution? www.passwithpebbles.com - pw P388l3s (thats a lower case L not a 1) h1 { font-family: 'Circe'; } h2 { font-family: 'Rollerscript-smooth'; } h3 { font-family: 'circe'; } H4 { font-family: 'circe'; } .sqsrte-large { font-family: 'Rollerscript-smooth'; } p { font-family: 'Circe'; } .sqsrte-small { font-family: 'Circe'; }
  19. Site URL: https://www.loxd.io/home-page/ Hello! I'm encountering an issue when I use safari to open my website. The pages loads up and then refreshes. I'm not sure what the issue is so I'm wondering if anybody has encountered it as well or it might be something with just my website and the custom code I'm using. Any help would be appreciated. Thanks! PW: loxd
  20. The logo image file on my site suddenly stopped working, but only on Safari. The image loads fine in Chrome and Firefox. When I inspect the logo in Safari, it says there's an error loading the resource.
  21. Site URL: http://www.thepeak1group.com/home Hi there, I'm using the following CSS code (in Custom CSS under the Design tab, in a 7.0 Brine family site) to add drop shadows to specific images: This works *perfectly* on Chrome and I never realized there were issues with it until working with a client this week who primarily uses Safari (I work on Chrome) -- he noticed that there were "breaks" in the drop shadows across the site where I'd used the code to create the shadows. I even tried a code to add drop shadows to ALL images universally (instead of using block IDs to isolate specific ones) and still ran into issues...but only on Safari. Is there a fix for this? Or something that needs to get added/edited/removed from the code that would enable Safari to recognize it and implement it correctly? Or another code entirely that would help Safari read it correctly? This is my first time running into cross-browser issues. Attaching an image from each browser for a "shadow break" example. Thanks so much!
  22. Site URL: https://www.sarvacenter.com Hello! A site I created is loading incorrectly in Safari - initially, the banner text is too high and the banner image stops short. This only happens when a user first lands on the page. Once you refresh or open the page in a different window/tab, it load correctly. It appears to only happen on the homepage. https://tiger-cobalt-x42w.squarespace.com Any ideas what might be causing this glitch? Thank you!
  23. Site URL: https://www.yellowbikepress.com/ Hello! Here is the site I am working on and the page I am referencing: https://www.yellowbikepress.com/blog. I used code to change the font of the blog post title and "Read More" button in the summary section, as well as the "Sign Up" button in the Subscribe section on the right. In Chrome the fonts show up fine, however in Safari they don't appear. Here is the correct formatting: And here is how it appears in Safari: Any thoughts on how to fix this? Thanks!
  24. Site URL: https://www.movingexperience.me/ I used custom css to justify text on my webiste. This is what I used in the : p { text-align: justify } I also tried adding this to the code blocks: <p style="text-align: justify ;margin-top:-20px;white-space:pre-wrap;font-weight: 500;" Now it is only being displayed correctly when the site is viewed in google chrome, it doesn't work in safari. I also tried adding this: body p, .sqs-layout .sqs-block.html-block p { text-align: justify !important; } but it's only affecting the regular text blocks, not the coding blocks with the text I actually want to justify. I'm thankful for any ideas what might be the problem here!
  25. Hello community, I’ve encountered a weird bug with png’s. Some of them, probably only those that use a greyscale model, won’t show up in Safari, but instead look black. Sometimes you can even see how Safari loads the picture correctly and then switches to a black image. However the problem is inside the png. And it is not inside the original png, it only occurs through the formatting that Squarespace does with the picture. I can track it back by downloading the picture and it looks good in every program, except for Safari; however if I save it without changes but as a colour RGB, Safari opens it well. I upload it again and Squarespace changes it again and it becomes black again. Can anyone think of a solution to it? Both png’s are attached. Thank you very much.
  • Create New...