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


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

  1. Site URL: https://markusgjengaar.com/ Hi! I've made a custom HTML/CSS code that could play a video on my front page. The video works on Safari (both mobil and desktop) and it works on Google Chrome on my iPhone. However the video does not work on Chrome Desktop version for some reason. It used to work, but now it does not play anything. It's just a blank black space where the video should be. Anyone out there knows whats happening? Here is my code: <section class="Intro"> <video class="Intro-video" src="/s/Hero-Home-page_v4.mp4" preload="auto" autoplay="auto" playsinline="auto" muted="auto" loop="auto" > </video> </section> <style> .Intro-video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; } .Intro { width: 100%; height: 80vh; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; overflow: hidden; z-index: 1; } </style>
  2. Site URL: https://www.thorpe-hall.org/paypalbookingform I have a form built with google apps script: https://script.google.com/a/macros/thorpe-hall.org/s/AKfycbzSjpbW8moBJ75Q82NEux6ezDTbFAEtGIVki4i0PcelrbxjveletfyYtZ1ic9rQ_k-Szg/exec. I would like to display it in a code block as an iframe: eg: <iframe src="https://script.google.com/a/macros/thorpe-hall.org/s/AKfycbywQJsGAqumlhdBvw0AlYy6b2fFfqKy8cn8wgY0FYGCURQZApeVCnU2ZlxiUFyxKaTWAg/exec" > Loading ... </iframe> This displays ok on MS edge and on Chrome but does not display at all in Safari, at least v11. Interestingly, the parent div does display, just not the form. Also, I have another a form, this one created using google forms, and included in a code block as an iframe: <iframe src="https://docs.google.com/forms/d/e/1FAIpQLScBeUGhrtxNNqq4F0FS0dWPwwTFMNAr6llRu-p343dYoWjUcg/viewform?embedded=true" > </iframe> and this DOES display fine in all three browsers mentioned above. so it seems that my safari browser will display an iframe ok, but presumably only if it is setup ok. So my question is what needs to go into the header of my google apps script form to make it display ok.
  3. Hi, I have complex product variants set up (small, medium and large) and then quantities (bundle of 100, bundle of 200 and so on) and I want to hide certain options from the quantities list and only display those relevant to the consumer. unfortunately squarespace doesn't allow this as standard. Here is my code (in a code block under "additional info" in the inventory product). This works fine in Chrome but not in Safari or iOS. In Safari the dropdown menus don't update to show the customer's choice (eg small, bundle of 100). Does anyone know what the issue in Safari is? <script type="text/javascript"> $(function() { $("select[data-variant-option-name='size']").change(function () { console.log($(this).val()); if ($(this).val() == 'small') { $("select[data-variant-option-name='pack of']") .find("option") .remove() .end() .val("Select pack of"); var selectSize = {"Select pack of":"Select pack of","bundle of 100":"bundle of 100","bundle of 200":"bundle of 200", "box of 1000":"box of 1000"} $.each(selectSize, function(key, value) { $("select[data-variant-option-name='pack of']") .append($("<option></option>") .prop("value",key) .text(value)); }); }; console.log($(this).val()); if ($(this).val() == 'medium') { $("select[data-variant-option-name='pack of']") .find("option") .remove() .end() .val("Select pack of"); var selectSize = {"Select pack of":"Select pack of","bundle of 50":"bundle of 50","bundle of 100":"bundle of 100", "box of 500":"box of 500"} $.each(selectSize, function(key, value) { $("select[data-variant-option-name='pack of']") .append($("<option></option>") .prop("value",key) .text(value)); }); }; console.log($(this).val()); if ($(this).val() == 'large') { $("select[data-variant-option-name='pack of']") .find("option") .remove() .end() .val("Select pack of"); var selectSize = {"Select pack of":"Select pack of","bundle of 50":"bundle of 50","box of 200":"box of 200"} $.each(selectSize, function(key, value) { $("select[data-variant-option-name='pack of']") .append($("<option></option>") .prop("value",key) .text(value)); }); }; }); }); </script>
  4. 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.
  5. Hi everyone, I've customised a form on my site slightly using CSS and it is appearing perfectly everywhere except for Safari on a 15inch screen. The form fields are getting cut off (see below image). All other browsers are fine and Safari on mobile and larger screens eg 27inch are fine it's just Safari on 15inch screen. This is the code I am using to customise. //---CONTACT FORM CUSTOMISATION //- Titles .form-wrapper .field-list .title { display: none; } //--Fields .form-wrapper .field-list .field .field-element { border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0px !important; background: #F5F4EE; padding: 10px 10px 10px 0px }
  6. Site URL: https://www.rebeccaannelouisewatson.com Hiya, i am using a custom font 'neue machina', which seems to work on chrome, but doesn't on safari or mobile. I have tried many custom codes, but none have worked. I am desperate to get this working, so any help would be so gratefully appreciated. thank you in advance
  7. Site URL: https://chihuahua-parrot-rjda.squarespace.com/ I've added a custom font (both woff and woff2 files) and it's working fine for Chrome but not Safari. Safari is showing up as a serif font, even though the font pack selected in squarespace is sans serif (Neue Haas). Here is my code: @font-face {font-family: 'Banana-Grotesk-Regular'; src:url(https://static1.squarespace.com/static/6099b1999f075203e3da1346/t/609cbd37811c1e67f7a48445/1620884791285/BananaGrotesk-Regular.woff) format('woff'), url(https://static1.squarespace.com/static/6099b1999f075203e3da1346/t/609cbd3ca6cf026bb5edcc79/1620884796131/BananaGrotesk-Regular.woff2) format('woff2'),} .header-nav *, nav.header-menu-nav-list * { font-family: 'BananaGrotesk-Regular' !important;} Site URL: https://chihuahua-parrot-rjda.squarespace.com/ Site password: RG999!!! Any help would be fabulous! Thank you!
  8. Hi Everyone First time posting so apologies for any mistakes. We currently have a site being developed and we've had some custom code put on to the landing page. The code creates a search widget which is linked to our vacation rental software. Once the code was complete and uploaded to the site we requested some minor changes, the problem we have is that you can see the old version on safari and when you make the window smaller you can see the new lines in behind. The new up to date code looks ok on chrome. is this an issue with the browser or the code? Any support on the matter would be greatly appreciated Thanks in advance David
  9. I've added a split navigation for a client and it looks and works great on Google Chrome, however as soon as open de website on Safari the navigation items all seem to be pushed together. However, as soon as I hover over the services tab it fixes itself. Anyone have any experience with this or might know what is going on? I've added screenshots. Bottom screenshot shows what it looks like when I open the site, the top one is what it is supposed to look like. Thanks!
  10. 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!
  11. Site URL: https://www.lucylawson.co.uk Hi there, My clients website is viewing the custom fonts differently on safari and iOs. Looks totally as expected on Chrome, but appears different on Safari. .ttf .otf .woff .woff2 have all been uploaded. @font-face { font-family: 'NoeDisplay'; src: url('https://static1.squarespace.com/static/60661ef2806161468599d160/t/60661fb6b8414c574a547e86/1617305526790/NoeDisplay-Black.otf'); font-weight: black; } @font-face { font-family: 'Graphik'; src: url('https://static1.squarespace.com/static/60661ef2806161468599d160/t/60661fd8db8f047724129954/1617305560410/Graphik-Black.otf') } h1 {font-family: 'NoeDisplay-Black';} h2 {font-family: 'NoeDisplay-Medium';} h3 {font-family: 'Graphik-Medium';}
  12. Site URL: https://www.novospectrum.com/top-teams Hi All, I have something strange happening in my website and i cant seem to find the solution why its happening. In Safari, when I activate the full screen function of my implemented issuu document, a bar is showing on top of the full screen document. With some testing with the transparanties of certain styles in my design, i found out the bar is responding to the 'content background color'. Making the content background color transparant solves my issue, but then the design of the website changes, and of course i don't want that to happen. It would maybe make sense to change the z-index of the content background color, but this would also influence the design, and assuming the Issuu full screen z-index is already on 2147483647, the content background color must be behind it anyway. Did anybody maybe experience similar issues, or has any suggestion of a solution? Thanks in advance p
  13. 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; } }
  14. 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!
  15. 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'; }
  16. Site URL: https://www.takecontrolphysicaltherapy.com/ Hi, I have added a secondary font for my H3 and H4 headers on my client's site, but it won't load properly on Safari (desktop or mobile). The font is a Squarespace available font (Museo Slab). Here is the code I am using: /* header changes */ h3 { font-family: "museo slab"!important; font-weight: 500; line-height: 1.15em; } h4 { font-family: "museo slab"!important; font-weight: 500; line-height: 1.15em; } TIA!
  17. 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!
  18. Site URL: https://mabuhay.squarespace.com Hi! I'm using an Adobe font for one of my headings (H4) via custom CSS on 7.1. It's showing correctly on Chrome and Firefox but not on Safari. Any advice how to solve this issue? Code I'm using: h4 {font-family: Olicana !important; font-size: 50px;} Used in the footer on "The service you can trust". I have the same issue on some other pages where it's used in headings. The fallback font is also not the regular heading font I'm using on this website.
  19. Hello! I use a large Heading 1 and a smaller Heading 4 on my site and they look great on Firefox, but on Chrome and Safari all of the heading styles appear as the same size. Is there any fix for this? Thanks!
  20. Site URL: https://www.alexandrebustamante.com I've uploaded WOFF custom webfonts to my website (it's password protected, just enter bustabusta if you need to view it), but they are not displaying on Safari or iOS (or Chrome on iOS). It works fine on Chrome and Firefox on Desktop. The template I'm using is Zion - can anyone help me clarify what is happening?
  21. Hi im trying to add an anchor link into my website and want it to smooth scroll to it. Unfortunately I cannot find a way to make it work with safari, it works with chrome I have enabled smooth scroll in Design > Custom CSS
  22. Site URL: https://www.hustlelikeubroke.com/episodes I embedded a visual of an RSS feed into our episodes page, because we wanted to show episode description as well. All the player embeds we use cut that out. In doing so, I realized the embed displays properly on Chrome/Firefox but doesn't display anything on Safari. Anyone have any ideas of what might cause that and how I could remedy?
  23. Site URL: https://www.2pt5.co.uk Hi, I have a code block with rotating text on my home page (2pt5.co.uk) Having problems with the padding being different on Chrome and Safari. No idea how to fix this! If anyone can help it would be greatly appreciated!
  24. Site URL: https://martine-emdur.squarespace.com/vanessa-stockard-artworks/after-christus Have had tremendous help from @bangank36 with providing css to vertically align text to the bottom of an inline image on blogs to display exhibition artwork however have one problem with it. On Mac Chrome looks perfect with position: absolute; bottom: 1%; but as you can see Safari gives it an extra push down below the edge of the image. Is anyone able to help with how I account for the different padding in Safari? https://martine-emdur.squarespace.com/vanessa-stockard-artworks/after-christus password = elliot Many thanks in advance.
  25. Site URL: http://www.goodmorekombucha.com I happened to check on my site today and discovered the content occupied only a narrow column, as if significant padding had been added on right and left. This occurs on non-mobile (tested on a mac) in Safari, not Chrome, Firefox or Opera. It looks normal on iOS. I have added a LOT of CSS to the site, though I have not edited it in many months. Picture's worth 1,000 words, so here are screenshots. Anyone know how this may have occurred or have tips for troubleshooting this myself?
×
×
  • Create New...