Jump to content

GregLassale

Member
 View Profile  See their activity

  • Posts

    136

  • Joined

  • Last visited

 Content Type 

Everything posted by GregLassale

  1. GregLassale
    Ah, thank you! I did think that looked a bit weird. I must have accidentally deleted the ">" sign at some point. Thanks again.
  2. GregLassale
    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.
  3. GregLassale
    @tuanphan Yes.
  4. GregLassale
    Anyone?
  5. GregLassale
    Site URL: https://gregorylassale.com I am using a custom font injected in my cover page header but want to exclude buttons. I tried <style> /* Apply Custom Font to Entire Site Start */ @font-face { font-family: 'Montserrat Light'; src: url('https://static1.squarespace.com/static/5aeb7d827e3c3a2bedb60363/t/608f5cfc8e8bd04a9e4e399b/1620008188969/Montserrat-Light.ttf'); } /* target all elements except buttons */ * :not(.sqs-slice-buttons-content) { font-family: 'Montserrat Light' !important; } // --------------- End --------------- </style> but it's not working. What is wrong in my code? Thanks in advance.
  6. GregLassale
    Help no longer needed. Just a dumb syntax error.
  7. GregLassale
    Anyone? This is one of the last things on my to-fix list.
  8. GregLassale
    I don't get it. I know the selector is correct because the same query works on mobile @media only screen and (max-width: 640px) { .sqs-slice-heading #sqs-slash-page-header {font-size: 33px!important; } } I moved the min breakpoint to 641px to avoid conflicting with the code above, but no effect @media only screen and (min-width: 641px) and (max-width: 950px) { .sqs-slice-heading #sqs-slash-page-header {font-size: 45px;!important } } I also specified the orientation, but still nothing: @media only screen and (min-width: 641px) and (max-width: 950px) and (orientation: portrait) { .sqs-slice-heading #sqs-slash-page-header {font-size: 45px;!important } }
  9. GregLassale
    @tuanphan No, it's not solved. I'm not sure how it looks on other tablets, but on my 2018 iPad Pro 11, the title still breaks. I'd like for it to fit on one line.
  10. GregLassale
    Site URL: https://gregorylassale.com I am trying to reduce the font size for the cover page title to make it fit on one line. Here is my code: <style> @media only screen and (min-width: 640px) and (max-width: 950px) { .sqs-slice-heading #sqs-slash-page-header {font-size: 75px; !important}} </style> I'm injecting it locally, not via the custom CSS panel. The breakpoint worked to resize the font on my homepage, so I don't think that's the problem. The selector (.sqs-slice-heading #sqs-slash-page-header) worked for the animation, so I don't think that's the problem either. Not sure why this media query isn't working. Help would be greatly appreciated.
  11. GregLassale
    A quick follow up to say that I fixed the issue by adding a keyframe fade in animation to the cover page via CSS, which eliminates the "jumping" bug.
  12. GregLassale
    Any other idea?
  13. GregLassale
    Same problem : my desktop shows the correct version, but my iPad shows the wrong one. I've tried a bunch of different breakpoints and my iPad either shows the wrong version or both. Any other idea?
  14. GregLassale
    This one is driving me nuts. I don't understand why the query is working on desktop but not on mobile. The 1194px breakpoint works on my iPad for other scripts, but not the code above. Any idea, anyone?
  15. GregLassale
    Help no longer needed. I used the following: @media screen and (max-width:1194px) { .Index-page-content { padding-top: 15px; padding-bottom: 15px; } } Thanks
  16. GregLassale
    No, thank you. I managed to fix those issues.
  17. GregLassale
    Site URL: https://gregorylassale.com I created two versions of my homepage: "homepage-medium" for large screen. "homepage-small" for mobile. I am trying to sho/hide the correct version via media query. It's working on my desktop but not my tablet. @media only screen and (max-width: 1194px) { #homepage-medium { display: none; } } @media only screen and (min-width: 1195px) { #homepage-small { display: none;} } I have tried different breakpoints, but on mobile (iPad) either both versions are shown or only "homepage-medium" (instead of "homepage-small"). I am using an iPad Pro 11 (viewport 834 x 1194px) to test out the mobile version. Hoping someone will be able to figure out what I'm doing wrong. Thanks.
  18. GregLassale
    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>
  19. GregLassale
    All of them except the banners: #intro, #services, #about, #faq, #testimonials, #contact, #additional-info, + all the French versions #intro-fr, #services-fr, #about-fr, #faq-fr, #testimonials-fr, #contact-fr and #additional-info-fr.
  20. GregLassale
    Site URL: https://gregorylassale.com I am trying to reduce the top padding on a few pages specifically for tablets in landscape mode. I tested the following for the Intro page, which didn't work at all. /*remove padding on tablet lanscape*/ @media screen and (max-width:1194px) and (min-width:834px){ #intro { padding-top: 10px; } } Even if it did, it would probably exclude a lot of devices as I used my iPad Pro 11's specs and many tablets have lower resolution. Wondering if there is a more efficient way to Target tablets' landscape mode. Thanks.
  21. GregLassale
    Please desiregard. I fixed the issue by creating a alternate versions of the homepage for tablets and phones and decreasing the font size.
  22. GregLassale
    Resolved
  23. GregLassale
    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;} }
  24. GregLassale
    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.
  25. GregLassale
    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.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources