GregLassale

Ah, thank you! I did think that looked a bit weird. I must have accidentally deleted the ">" sign at some point. Thanks again.

Site URL: https://gregorylassale.com In the "Additional Info" section (under the Contact section) of my website in both the English and French version of my website, the email address is no longer clickable. I am using font awesome icon in front of it, not sure if that's the source of the problem, or maybe a Squarespace software update might have broken the link. I'm pretty sure it used to work fine. Here is the HTML code in the block: <center><span class="fa fa-envelope"></span>&nbsp; <span style="color: hsl(18, 52%, 60%);" <a href="mailto:glassaletrans@gmail.com" title="glassaletrans@gmail.com">glassaletrans@gmail.com</a></center> Any idea what the issue might be? Thank you.

Following up on this. Is there a way to modify the code below so that the navigation bar slides out after a short delay whenever the scrolling stops? <style> header.Header, .Mobile-bar { transition: transform 0.4s; } .scroll-down header.Header, .scroll-down .Mobile-bar { transform: translate3d(0, -100%, 0); } </style> <script> document.addEventListener('DOMContentLoaded', function() { const body = document.body; const scrollUp = "scroll-up"; const scrollDown = "scroll-down"; let lastScroll = 0; window.addEventListener("scroll", () => { const currentScroll = window.pageYOffset; if (currentScroll <= 0) { body.classList.remove(scrollUp); return; } if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) { // down body.classList.remove(scrollUp); body.classList.add(scrollDown); } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) { // up body.classList.remove(scrollDown); body.classList.add(scrollUp); } lastScroll = currentScroll; }); }); </script>

Please desiregard. I fixed the issue by creating a alternate versions of the homepage for tablets and phones and decreasing the font size.

Resolved

I also tried this CSS with different widths but no dice 😞 @media only screen and (max-width: 2388) {#landing-banner {display: none;} } @media only screen and (min-width: 2389) {#landing-banner-mobile {display: none;} }

Is this script supposed to work on all templates? It's not working on Brine. I'm trying to show "/landing-banner" on large screens and "/landing-banner-mobile" on mobile. Thanks.

Following up on this. Reducing the padding to 0 for the title block didn't fix the problem at all, while reducing the font size didn't yield very good results. It looks ok in portrait mode, but too small in landscape mode (iPad Pro 11). I set the max width at 1668px (iPad Pro 11's portrait width pic count), but the font stayed the same size in landscape mode. Does anyone have a workaround? I'd be fine with having the title on two lines on mobile phones and tablet portrait mode as long as they don't overlap. Any help much appreciated.

Site URL: https://gregorylassale.com I just redesigned my top page which is now large banner image which includes Markdown text blocks. As you can see on the screenshot below, the top Markdown block and the background image do not scale well on mobile. What would be the best way to fix those two issues? For the text, I don't know if just modifying the padding on mobile is the best option. I think it might be better to decrease the font size for mobile. The current Markdown code in that block is <div style="color:white; text-align:center; font-size:4.5em">GREGORY LASSALE</div> For the background image, I'm thinking thinking resized versions of the same image, but not sure what other options there are. The affected pages are: https://gregorylassale.com/english https://gregorylassale.com/french Thanks in advance for the help.

@bangank36 Could your script be modified so that the navigation is revealed if the person stops scrolling (or if they click a link that takes them down the page)?

Got it. I had removed my fixed nav CSS thinking it would conflict with your code, but it looks like it's the other way around and your script needs a fixed header in order to work? All good now. Thanks!

Hi @bangank36 I also use a 7.0 Brine family template (Sofia), but the code above doesn't work for me. Any idea? Site URL is https://gregorylassale.com Thanks in advance.

Hi - can't help with the code but thought I'd mention that "résumé" uses acute accents ( "é" ). Just in case that wasn't a stylistic choice. 🙂

Site URL: https://gregorylassale.com/ I read that responsive design is built into all Squarespace templates. I use the Sofia (Brine Family, 7.0) template. The cover page does scale according to screen size, but my other pages do not. Here are a few screenshots to illustrate. Cover page on desktop (5K Retina 27-inch screen): Cover page on iPad Pro 11 inch: Contact page desktop: \ Contact page iPad: The problem is similar on any smaller screen size (e.g. laptops). Shouldn't all pages scale to fit any screen size? What am I missing? Thanks.

I'm dealing with a cover page bug of a different nature (elements jumping on load). I double checked and the bug occurs right out of the box and isn't tied to any custom code or assets added to my site. I use the Sofia template. Not sure whether other templates are affected. I contacted support (again) and was given the same answer as when I first reported the problem a year ago: Issue noted for review and future bug fixing. In the meantime, my cover page - the first thing potential customers set - looks unprofessional. Not so happy with this.