Jump to content

be-one

Member
  • Posts

    5
  • Joined

  • Last visited

be-one's Achievements

  1. Site URL: https://bastihansen.com Hey Friends, I achieved a scaling header via: //Shrink Your Logo #header .header-title-logo img { transition: max-height 800ms ease-in-out } #header.shrink { .header-announcement-bar-wrapper{ padding-top: 20px!important; padding-bottom: 20px!important; } .header-title-logo img { max-height: 80px; } } Is it possible to have this animation ONLY on the /home page? In every other page i would like to have it small all the time. Any way to target this? Thanks, Basti
  2. Ah wait. In Firefox Mobile it doesn't work. in Safari it actually does show up right and it's beautiful! Thanks so much!
  3. Thanks for this. Unfortunately it still shows the client gallery as 1 column in mobile. Nothing seems to have changed.
  4. Yeah exactly 🙂 Right now it shows up as one column in mobile which makes it way too long to scroll through all of them. So i'd rather have them show up as 3 or 4 in a row (only on mobile) for that specific gallery.
  5. Site URL: https://bastihansen.com/home Hey Guys! I figured out how to get only one row to show up on a mobile gallery (instead of two) via: // 1 Image Per Row On Mobile - 7.1 Version // @media only screen and (max-width: 640px) { .sqs-layout .sqs-gallery-design-grid-slide { width: 100% !important; } } However, now i have a client wall that i solved through a gallery as well. I made custom square client icons. they look great on desktop but look way to big on mobile (due to the one row css). I would love to see 3 or 4 rows on mobile for that specific gallery. Maybe there's a way to address that specific gallery throigh an ID and tell it what to do when a specific width threshold is met? I am completely new to CSS etc. Just guessing here. Any ideas? Thanks! 🙂 P.S. my complete custom css looks like this right now in case it's relevant: // 1 Image Per Row On Mobile - 7.1 Version // @media only screen and (max-width: 640px) { .sqs-layout .sqs-gallery-design-grid-slide { width: 100% !important; } } //Transparent Header .header { background: transparent!important; } //Shrink Your Logo #header .header-title-logo img { transition: max-height 800ms ease-in-out } #header.shrink { .header-announcement-bar-wrapper{ padding-top: 20px!important; padding-bottom: 20px!important; } .header-title-logo img { max-height: 80px; } } //Make Mobile Gallery One Column @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { .gallery-grid-wrapper { grid-template-columns : 1fr !important; } } //Disable Mobile Lightbox @media only screen and (max-width: 600px) { .gallery-grid-lightbox-link { pointer-events: none; } }
×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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