Groeipiraat

It is indeed enough. Again, thanks a lot for the help! Very much appreciated! 👏

This works! Amazing, thank you for this! 🙌 Is this all I need, or do I still need the code I posted here?

Site URL: https://finch-stingray-xe7m.squarespace.com/werkgebied My page can be viewed using this password: clogs Hi, I am trying to show a Google MyMaps iframe to load in responsive view. It should be at 100% width on both desktop and mobile view, but it is failing to do so. The code I injected is from this tutorial: https://www.w3schools.com/howto/howto_css_responsive_iframes.asp This is the code I used in the code-block: <div class="container"> <iframe class="responsive-iframe" src="https://www.google.com/maps/d/embed?mid=1z5TX60I4DPiRlBfMpn16J2iNhscPWlI&ehbc=2E312F"></iframe> </div> And this in the Custom CSS: /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ .container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } I am no coder myself, so I followed the tutorial, but perhaps I need to set the CSS classes different for SQSP. never understand how this works for SQSP. Hopefully there is a CSS guru who know what I need to do to make it work. 😏 Thanks in advance! 🙏 Cheers, Steven

UPDATE: As it turns out, the image editor of SQSP is causing this issue. When cropping an image, the white background gets added. So for anyone encountering the same issue. Crop images BEFORE uploading into SQSP!

Site URL: https://blueberry-maroon.squarespace.com/ In the Portfolio Collection overview every gallery grid item is showing a white background which I am not able to make it look transparent (or black). The hover color is the only thing that can be changed, but this is fine as is. What is even stranger is that on the portfolio detail page the image is shown like it is meant to be, on a black background (transparent). What I tried so far is changing every possible color setting I could find and also applying all sorts of custom CSS, but with no luck so far. 🧐 The challenge is to change the white background color to transparent (or black) using custom CSS. I am a noob when it comes to such coding, so if somebody could help me to accomplish this using custom CSS, I would be forever grateful! 🙏 I am using SQSP 7.1 and the password is set to: monaco

Thank you very much @creedon, it works perfectly now! 👏

Thank you sooo much for this code! It worked perfectly to transform the US date and time to EU format. I really appreciate your help! Have an amazing day and me the Gods be with you on your journey, my friend! 🙏

You are absolutely AMAZING!

@bangank36 The site is currently still in DEV, so I can only share the link and password in a DM. Would that be okay? I would love posting the solution here once it works, just to help the community!

@bangank36 I tried this for events, but this does not work. Is there a way of making this code also work for Event dates for Squarespace 7.1 events (e.g. dd-mm-jjjj)? And maybe even for Event times, to convert 12hr into 24hr system (e.g. 23:59:59) instead of the AM/PM Squarespace is using now? Would be much appreciated if you could provide such code (since I don't know how to code). Thanks in advance! ^Steven

Hi @creedon, I came across this post since I have the same issue for which I need to have a different url for the Contact button in my SS7.1 site header. The translation switch between the default English (EN) language and the second Dutch (NL) language works fine, I even have different footers for both languages. But the url of the contact button remains /en/contact and won't switch to /nl/contact. This is the code I have in place at Advanced/Code injection (Footer area): <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = 'en'; var lang = location.pathname.split("/")[1]; var defaultClass = 'lang-'+defaultLanguage+''; var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']"; if (lang == "" || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+''); $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () { var langType = $(this).attr('href').split("/")[1]; var multiLanguageClass = 'multilanguage lang-' + langType + ''; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $('nav button').each(function () { var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0]; var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + ''; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == "nl") { $('a[href="/"]').attr("href", "/nl/word-lid/"); } /* ADD EXCLUSION NAV ITEMS */ $('.exclude-me,.exclude-me a').addClass('exclude'); $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude'); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $('.multilanguage:not(".lang-'+lang+',.exclude")').remove(); }); /*setup language switcher*/ $('body').prepend('<div class="language"><a href="/en/join-us/" class="lang-en">EN</a> | <a href="/nl/word-lid/" class="lang-nl">NL</a></div>'); $( ( ) => { /* begin change cta button text and url based on language Version : 0.1d1 SS Version : 7.1 Dependancies : jQuery lang variable being set by language switching code Note : this code must be run after the language switching code has set the lang variable By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ const languageTextUrlMap = { /* the format of each language code/text/url data structure is as follows [enter language code here] : { text : '[enter language text here]', url : '[enter url here]' }, */ en : { text : 'Contact', url : '/en/contact' }, nl : { text : 'Contact', url : '/nl/contact' }, } // do not change anything below, there be the borg here if ( ! ( lang in languageTextUrlMap ) ) return; // bail if not defined $( '.header-actions-action--cta .btn, .header-menu-cta .btn' ) .attr ( 'href', languageTextUrlMap [ lang ].url ) .text ( languageTextUrlMap [ lang ].text ); // end change cta button text and url based on language } ); </script> Perhaps you can tell me what is happening.. Help would be much appreciated! I could share the password, but not public and i need to publish the site first since it is still in DEV. Best regards, Steven