Hi,
I am not a coder at all, and I have played around with this code to create a moving banner, but I just can’t get it right. You can see it as the “pick 3 pay 2” banner which is moving on our website: www.arcticdrip.com
- I need help with fixing it to look proper on mobile, here is how it currently looks on mobile view:
-
I need help with making it “consistent” currently moves to the left side and disappears before popping up again, I need it to slide smoothly and consistently without any space and sudden jumping when the text comes back.
-
I need help with the padding/space between the text and the next section, if its possible to make that slimmer
I appreciate all the help I can get. Here is the code:
logo-carousel{ display:block; overflow:hidden } logo-carousel.logo-carousel{ margin:25px 0; } @media (min-width: 992px){ logo-carousel.logo-carousel{ margin:40px 0; } } logo-carousel .logo-carousel__container{ display:flex; height: 90px; } logo-carousel .logo-carousel__images{ -webkit-animation-name:animate; animation-name:animate; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-duration:var(--imgSpeed); animation-duration:var(--imgSpeed); display:flex; align-items: center; } logo-carousel .logo-carousel__image{ flex:0 0 150px; width:150px; height:175px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; position:relative; margin: 0 20px; } logo-carousel .logo-carousel__image{ flex:0 0 auto; height:auto } logo-carousel .logo-carousel__image.empty{ background-color:#f7f7f9; border-right:1px solid #E2E2EA } logo-carousel .logo-carousel__image.empty:before{ content:"6:7"; left:16px; bottom:16px; position:absolute; font-family:FuturaPT-Heavy,sans-serif; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#e2e2ea; font-size:30px; line-height:30px } logo-carousel .logo-carousel__image-column{ position:absolute; top:0; right:0; bottom:0; left:0; display:block } logo-carousel .logo-carousel__image img{ display:block; pointer-events:none; transition:opacity .32s ease } logo-carousel .logo-carousel__image-column img.lazyloaded{ opacity:1; height: 100%; } .logo-carousel__image-column:hover{ opacity:0.8; } img[alt="GQ"]{ width: 56px; height: auto; opacity: .6; } img[alt="BuzFeed"],img[alt="NBC"],img[alt="Esquire"],img[alt="Maxim"]{ width: 90px; height: auto; opacity: .6; } img[alt="NBC"]{ width: 90px; height: auto; opacity: .6; } @-webkit-keyframes animate{ to{ -webkit-transform:translateX(-100%); transform:translate(-100%) } } @keyframes animate{ to{ -webkit-transform:translateX(-100%); transform:translate(-100%) } }