ruthob93

Any ideas anyone? 🙏

@tuanphan well, yes something similar. This particular bit of code I tried out doesn't work though. I can get the images to scale / zoom on hover,, but I can't get them to stay within the original bounding box / hide the overflow when they scale /zoom.

Any ideas?🙏      

Hi @tuanphan

I removed this effect from the homepage since my last post but I've now put it on another https://www.broadlough.ie/estate

Appreciate your help!

Thank you so much! That worked!

Really appreciate it

@creedon thank you so much for pointing that out. I really appreciate it!

Hi @creedon 

I can't seem to get code to work - any chance you could take a look? I've checked as well in an incognito window. I'm sure I must have missed something in the installation of the code. I'm not really very used to working with Java Script.

Its https://www.broadlough.ie/single-casks

Thanks so much

Ruth

Hi,

I'm having a similar problem - I'm having my images scale on hover. Since it's fluid engine I'm using .sqs-block-image to scale, but I don't want the images to overflow. However I can't seem to find the right parent to get overflow: hidden to work. Could you please help? 🙏

Broadlough.ie

I have tried all of these, lifted from inspecting the page code but it appears they aren't the right ones: 

.image-block-outer-wrapper .fluid-image-animation-wrapper .fluid-image-container .sqs-block-image
  {overflow: hidden !important;}

I have this same issue on all of my sites. I guess I like generously sized headers on my websites. I don't really like having to reduce it on a block by block basis as things can slip through the cracks, and I think too what shrinks it "enough" on one screen might not be quite enough to prevent the word splitting on another. Surely this should be an easy enough bug for Squarespace to fix? Images shrink to fit the page on mobile so surely in the same manner, text should shrink to fit the longest word of each block. I hope this gets fixed soon!

Hi everyone,

I'm hoping someone would be so kind as to help me figure out how to apply a background image filter of grayscale 100% when the image is not being hovered over, and that the filter would be removed on hover.

Selecting the background image itself seems difficult with fluid engine. .section-border seems to be working as a selector but I think this also encompasses the divider lines. I would rather if only the background image could be selected. 

I have the following code which works to turn it to grayscale but I can't seem to get the right code to remove the filter on hover. Any recommendations?

@media (hover: hover) 
{ 
.section-border {
      filter:grayscale(100%) !important;
    }
  }

Many thanks!

Ruth

5 hours ago, tuanphan said:

Font file url in your code doesn't exist. You try checking again

(Do you use Trial Plan? Sometime, uploaded file won't work on trial)

https://static1.squarespace.com/static/5f7f1b3695baee1b6d038760/t/632084187177b03cc891a297/1663075353118/Milkstore05-Rough.ttf

@tuanphan Thank you so much! When I read your message I realised that while solving the original issue with the custom fonts I re-linked it incorrectly! 😅 Thank you so much - I thought I was losing my mind but all fixed now! Cheers!

5 hours ago, tuanphan said:

What is your site url? We can help easier

@tuanphan Thanks! It's provenancespiritsgroup.com

I have managed to get the fonts loading on desktop but not mobile. Squarespace editor shows them loading on mobile version, but on actual mobile phones it doesn't load!

Thanks in advance for your help 😁

On 9/13/2022 at 4:05 PM, Venera said:

Unfortunately they couldn't help me, I renamed the font and add it again and it worked.

Hi Venera! Is there any chance you could share exactly what you did to make it work? Did you rename the font file on you computer and re-upload?

3 hours ago, ruthob93 said:

Thank you Paul, on this occasion I actually managed to resolve the issue.

In case it is useful to anyone - I got it working by removing all the relevant CSS, deleting the files, re-uploading the files and re-introducing the CSS.

It seems I spoke too soon - My Heading 1 font is not loading on Mobile, only desktop, but the others are ok. It DOES load in the Squarespace editor mobile mode, but not on actual mobiles. My site is provenancespiritsgroup.com. I would greatly appreciate if anyone can help! I've never had this issue with Squarespace custom fonts before. I'm guessing there's a glitch with Squarespace?

1 hour ago, Ziggy said:

Hi @ruthob93,

It looks like the SquareKicker extension that you're using has set this section to have a top padding of 100px. You could either fix this in SquareKicker, or you could probably duplicate the section and delete the original (this should break the link between the padding code and this design).

Let me know if that answers your question and fixes this problem!

Hi Ziggy,

Thanks a million for narrowing down the cause of the issue for me. Squarekicker used to have padding controls, but it seems it doesn't since the intro of Fluid Engine, so I guess this is a bug - I'll email them and see if they can help. 

Thanks again!

On 9/13/2022 at 2:59 PM, paul2009 said:

Whenever you post a question, please include a working link to your site so that forum users can take a look at the site and the code being used. The post How to Post a Forum Question provides more detail.

Thank you Paul, on this occasion I actually managed to resolve the issue.

In case it is useful to anyone - I got it working by removing all the relevant CSS, deleting the files, re-uploading the files and re-introducing the CSS.

Site URL: https://www.carriagegrandtour.com/

Hi everyone,

I was hoping for some help resolving an issue with excessive padding/margins space above the start of the design grid in my mobile sections.

I have tried:

• Moving the section height slider all the way down
• Choosing vertical alignment top, middle and bottom - strangely, align to bottom actually reduces the top of section padding the most, but not nearly enough
• Using the following code:

Quote

@media (max-width: 800px)
{#page section .content-wrapper {
    padding-top: 0px !important;
}
}

• And also this one:

Quote

@media (max-width: 800px)
{min-height: 0 !important;
}
}

But alas, the top margin remains. You can see that the issue does not exist with the lower margin - the grid goes all the way to the end of the section.

Any help would be greatly appreciated. URL: carriagegrandtour.com

Cheers
Ruth

I'm having this same problem. I have 6 sites, and am not having this problem on any of the other sites. The code is copy/pasted across so I don't believe it's a code error. Tried re-uploading and re-linking to no avail. Anybody have any tips pretty please?

On 3/10/2022 at 1:15 PM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
.header-title {
    flex: 30% !important;
    max-width: unset !important;
}
}

Thank you so so much @tuanphan! I am so grateful - this issue has been driving me insane. I can't believe it's fixed at last! Thank you thank you!!

@tuanphan Sorry I forgot I changed it last week. It's carriage-grand-tour.squarespace.com

Thanks!

Hi @tuanphan, 

Still having this issue, and I'd be eternally grateful if there's any chance you might be able to help. I have played with dozens of code variants and what I have now if you go to my site seems to be the closest I can get - 

The header bar is narrowed correctly but the title is not within the header, and the navigation items are not displaying. 

For what I am trying to do, you can see the desktop version.

Thanks!

Quote

4 hours ago, tuanphan said:

It looks like you figured it out?

Hi @tuanphan I'm halfway there I think, but when I go to mobile there are 2 problems:

1) The navigation links don't appear on Mobile

2) The bar vertical header bar suddenly becomes wider on mobile, and the logo moves from the top to the centre and goes out of alignment. 

It's very odd. My best guess is that my code for vertical header, and code for always desktop navigation are in some way clashing.

Hi @tuanphan! Any chance you could help me with a similar issue please? I want to do the same thing but I already have a vertical left aligned menu bar. I want it to apply to all screen sizes and stay as a desktop version (i.e. show nav items and hide burger menu) on mobile as well as desktop.

Really grateful if you can help at all!

My site is https://badger-fuchsia-m8za.squarespace.com/ 

Password carriage

@tuanphan Yes, I finally got it working after months! But I have one more problem and I would be soooo grateful if you can help! 

I have my logo centered in the header but the alignment is off - On mobile it is off line to the left and on desktop it is off to the right. I've searched the forum but can't find a solution.. If you could take a look I'd be so grateful! Thanks!

@tuanphan Sorry I didn't see your response before. I still can't get it to work! If you can help I would be so grateful!

Hi everyone,

I'm using this code but for some reason not getting a loading page to appear at all. I tried it in the general code injection, but now have it placed directly in the home page under pages > gear icon > advanced. Neither has worked! Any help greatly appreciated! My URL is www.tandemcraft.com

Thanks!