Chlobot

Hi @tuanphan - Ideally I would like the lottie logo to appear on all screen sizes.  Thanks!

Hi @tuanphan 🙂
I used this code to add a lottie animation as the logo in the header. It's mostly working but there are two issues:

1) Neither the animated logo nor the .png logo show up on tablet or mobile devices. I tried adding: 

if (screen.width <= 767) {

to the code but I couldn't get this tow work.

If using the lottie for this is tricky I'd be happy to just use the regular logo on mobile and tablet view

2) On desktop, the logo doesn't show up on any of the the Contact pages (in the different languages).

Pease help 😅

Website:  https://www.iamglobal.aero/en/home

@tuanphan Worked perfectly! Thank you so much!!

Hi @tuanphan, I'm trying to use this same effect on a website but something isn't working.  I think it's something with the "-webkit-background-clip: text;"? Any help would be much appreciated!

https://moose-chinchilla-wpdt.squarespace.com/

pw: Hawthorn

This is the section I want to apply it to (on the homepage): 

Yay!! It worked!! Thanks for your help @Ziggy

Hello lovely angels of Squarespace forum (and superhero @tuanphan)

I added a custom image for the hamburger and also made the mobile menu active for desktop view. It's working pretty well, I'm just having issues with the alignment and size. I want to icon to be relatively large (around 90 px wide), but on smaller screen and on mobile, the icon gets cut off. I can't figure out how to move the icons to the left a little so it doesn't get cut off.

Website: https://www.crystalmind.design/

PW: happydog

THANK YOU SO MUCH!

- Chloe

Here is the code I used:

// CUSTOM HAMBURGER
/* Non-active burger */
.burger-inner:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5ee903c7326ba435104d57a9/t/6362909e6596c42839983790/1667403934287/Hamburger.png);
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: right;
    background-color: transparent !important;
    display: block;
    width: 100px;
    height: 60px;
}
.burger-inner>div {
    display: none !important;
}
/* Burger when active */
body.header--menu-open .burger-inner:after {
    background-image: url(https://static1.squarespace.com/static/5ee903c7326ba435104d57a9/t/6364ff46b118c16557fff23c/1667563334640/Hamburger_1.png) !important;
}

Keeping this thread going! Yes, this would be really great to be able to add events to the campaigns, and it seems odd that blog posts are so easy to add, but not events...

Hey @tuanphan

Thanks! This did something but not exactly what I need. Now three of the sides appear, but not all, and sometimes there is a little space between the border and the image, depending on the screen size.

Here is the code I'm using 

  .fluid-image-container.sqs-image-content {
    overflow: visible !important;
}
    img {
    border: 2px solid #f26522;
}

 
 

Hi lovely people! and @tuanphan

Is there a trick to getting image borders to work in fluid engine? I used the code provided in this thread, which works, but it only shows up on the top and bottom of the image. I also tried a few other codes but none of them put the border around the entire image without weird spacing or getting cut off. The image is set to fit, which is important.

URL: https://maroon-potato-2ta2.squarespace.com/

PW: Breathe:)

(you'll see there is a thin blue border around the image but this is from the actual image file. I'm trying to set up this border with code so that if the client updates the photo, it will still have a border)

Thanks!

Thank you! This worked perfectly!! @tuanphan

@tuanphan

I would also like the area in the screenshot to stack in tablet view so the image gallery appears below the text area. I tried the code you shared above but I couldn't figure out the div#page or maybe I was doing something else wrong?. Your coding wizardry is much appreciated!!

Website: https://pelican-elk-2p37.squarespace.com/

PW: TM2022

Danke!

Thank you @tuanphan! Worked perfectly 😄

I have a question on this topic. I've tried using the css mentioned for my situation but can't get it to work. I would like the first two multiple choice questions to be side by side. Thanks for you help! @tuanphan

Website: https://wisteria-semicircle-yap8.squarespace.com/contact

PW: NutmegState

@tuanphan Once again you saved the day! Thank you, this worked perfectly :D

@tuanphan Hi Tuan!

How would I do this for an alternating side by side blog? I tried altering the code above but I couldn't figure it out.

Here is the website: https://watermelon-walrus-pmsj.squarespace.com/learn

pw: ilovecrystals

Thank you!!

- Chloe

@tuanphan Thank you so much! Worked like a charm! You are a Squarespace hero!!

@tuanphan Hi!! Tuanphan to the rescue!! Sorry about that. The problem is on the "work with me page," right here: https://impala-rose-x7cw.squarespace.com/work-with-me . Thank you for helping me! I so appreciate it.

Quote

@tuanphan hi! Do you think you could help me with this? I would so much appreciate it!!

Site URL: https://impala-rose-x7cw.squarespace.com/

Hi there!

I'm working on a 7.1 website, and on the "Work with me" page, I have 2 rows of "stack" images where the buttons are not in alignment.

Here is the 1st one:

And here is the 2nd one:

I looked through the forum and tried a bunch of different code people suggested, but nothing worked. Can someone please help? Thank you so much in advance!! - Chloe

https://impala-rose-x7cw.squarespace.com/

Site PW: Peony2021

Thanks Katie! It seems like the CSS is back up. There have been a bunch of weird glitches lately!

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

Hi there!

I finished designing a website for a client 2 weeks ago. Today she emailed me about a simple issue she was having. Something was being buggy with Squarespace and so I removed all the code, and then pasted it back in. The original issue resolved, but now none of the custom css is showing up. When I enter the css editor it all shows up perfectly, but then when I save and go to the pages or reload it all disappears. I made a video to show this happening.

The website is live, here is the url: https://www.katiebraja.com/

Thanks for your help!