Jump to content

Recommended Posts

Hi there! I'm attempting to create a scrolling gallery of logos on my own website as well as a client's website and for whatever reason, the code seems to have a mind of its own and it'll be fine for a while, then I'll go back and it'll be all screwed up. I was following Inside the Square's tutorial here: 

Here's the CSS I'm using:

// DESKTOP LOGO GALLERY
#page {
overflow-x:hidden
}
section[data-section-id="668235411a9c550bc0d20f52"]
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 100s linear infinite
}
section[data-section-id="668235411a9c550bc0d20f52"]
.gallery-grid-wrapper .gallery-grid-item {
 min-width: 20%;
 margin-right: 2%
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -300%; }
}
// HIDE DESKTOP GALLERY ON MOBILE
@media only screen and (max-width:640px) {section[data-section-id="668235411a9c550bc0d20f52"]{display:none}}
// MOBILE LOGO GALLERY
#page {
overflow-x:hidden
}
section[data-section-id="66830aa883f7945f9d5c353a"]
.gallery-grid-wrapper {
display:flex !important;
animation: slideshow 40s linear infinite
}
section[data-section-id="66830aa883f7945f9d5c353a"]
.gallery-grid-wrapper .gallery-grid-item {
 min-width: 60%;
 margin-right: .01%
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -1300%; }
}
// HIDE MOBILE GALLERY ON DESKTOP
 @media only screen and (min-width:641px) {section[data-section-id="66830aa883f7945f9d5c353a"]{display:none}}

..

The mobile version was working beautifully the last I checked, but I can't seem to nail the desktop. My client's website is also having the same issue now. Inside the Square claims that as long as you fiddle with the keyframes second section here, you can control where the slideshow ends depending on how many images, but no matter what I try, it just goes white after it cycles through the logos once and never comes back again. It was working just fine for about a day when I finished it yesterday, then all of a sudden started speeding up super quickly and is all messed up now. It also appears that when I edit the mobile section, the desktop version changes at times, which shouldn't be happening given the fact that I'm using the section IDs to separate them. Any ideas where I'm going wrong or which keyframe -% I should be using for desktop? I'm SO stumped but I'm not a coder, so it's probably just something easy that I'm missing. Thanks!

Link to comment
  • Replies 1
  • Views 197
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.