Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by AdamSupra

  1. OK, so after fixing some other code, I did get one of the two banners to slightly do as I wanted, but the one that is scrolling the right way on the top seems squished together and also doesn't repeat indefinitely....
  2. OK, Awesome, that fixed the hover of the menu items. Thank you for that! But the hover over image opacity still isn't working as before. See anything that may have messed that up trying to figure out the banner thing in my other thread?
  3. Still not working the way I had hoped. I have it there and it changes every 1 sec or whatever but I don't want it to do that, I want it to just smoothly move continuously. I also tried another way I found using code both in the blank space above it now and in CSS using a banner image I made myself but that doesn't seem to be showing either. so no clue at this point.
  4. Totally possible. I've changed so much trying to get that banner to work the way I want without resolution yet. /* Nav item color */ .header-nav-item a { color: hsl(11, 0%, 50%) !important; } /* Nav item hover color */ .header-nav-item a:hover { color: hsl(0, 0%, 0%) !important; } /* Nav item active color */ .header-nav-item--active a { color: hsl(0, 0%, 0%) !important; } .header-actions-action.header-actions-action--social a:hover svg { fill: black !important; } .form-wrapper .field-list .field { position: relative; margin: -10px 0px 15px; } .sqs-block-content hr { margin-top: -25px !important; } .sqs-block-horizontalrule { margin-bottom: -35px !important; } .header-layout-nav-center .header-nav { flex: 40% !important; width: 60% !important; } @media screen and (min-width: 990px){ .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 0 0 100%;} /* remove current icon */ .header-actions-action--social a:last-child svg { display: none; } /* set new icon */ .header-actions-action--social a:last-child { background-image: url(https://static1.squarespace.com/static/5e48bac3e8cf6318cdae0fb7/t/5ea5ff06cffe7b1a439472bc/1587937035935/lock-logo-test.png?format=300w); background-size: contain; background-repeat: no-repeat; background-position: center center; } .figure.gallery-masonry-item .gallery-masonry-item-wrapper a:before { background-color: rgba(255,255,255,.3); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .8s ease } .figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:before { opacity: 1; transition: all 330ms ease } .gallery-reel-wrapper { overflow: hidden; } /* list height */ div.user-items-list { padding-top: 0px !important; padding-bottom: 0px !important; } #page { overflow-x: hidden } .gallery-grid-wrapper { display:flex !important; animation: slideshow 50s inear infinite } .gallery-grid-wrapper .gallery-grid-item { min-width: 15%; margin-right: 1% } @keyframes slideshow { 0% { left: 0; } 100% { left: -550% } } .slider { width: 100%; overflow: hidden; } .slider .slider-image { background-image: url(https://static1.squarespace.com/static/5e48bac3e8cf6318cdae0fb7/t/65e6b16bba5e27001936631d/1709617516018/CLIENT+LOGO+BANNER.png); width: auto; height: 200px; background-size: 2950px 200px; animation: slide 60s linear infinite; } @keyframes slide { from {background-position-x: 0px;} to {background-position-x: -2950px;} } @media screen and (max-width:767px) { .user-items-list-item-containersection[data-section-id="65dac7c9f3365648bc920997"] ul { grid-template-columns: repeat(2,1fr) !important; }
  5. Wesite: https://www.adamhyattphotography.com/ So all of my hover coding on my site stopped working today while messing with trying to get a carousel to smoothly autoscroll. My menu nav use to change to being darker and so did my social icons. Then also my images on hover would change opacity. Code I had that worked just fine up until today... /* Nav item color */ .header-nav-item a { color: hsl(11, 0%, 50%) !important; } /* Nav item hover color */ .header-nav-item a:hover { color: hsl(0, 0%, 0%) !important; } /* Nav item active color */ .header-nav-item--active a { color: hsl(0, 0%, 0%) !important; } .header-actions-action.header-actions-action--social a:hover svg { fill: black !important; } Code for images.. figure.gallery-masonry-item .gallery-masonry-item-wrapper a:before { background-color: rgba(255,255,255,.3); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .8s ease } figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:before { opacity: 1; transition: all 330ms ease } Did some other code on the page mess with it. I've tried a million different things to get my client logos to work the way I want with no solution, so wondering if something interfered.
  6. i just came across this thread and tried this code as well and doesn't seem to work, but essentially trying to do the same thing https://forum.squarespace.com/topic/250400-scrolling-carousel-for-clients-showcase/
  7. Had to erase some of the codes to try different things as I thought some might be interfering with each other... still can't seem to get any of it to work how I want. Also the editor just seems to take FOREVER now and is making it almost impossible to edit anything.
  8. Actually looks like maybe I can do it a different way with a gallery of images.... but the logos don't fully show... Added that right underneath scrolling to show difference.
  9. OK.... so I got everything working for the most part. Thanks. I'm curious if its possible to get the auto scrolling to just be one smooth motion and not jittery from image to image. As well as make the arrows disappear. Basically just a smooth auto scrolling banner that is not interactable.
  10. So taking away the black space above and below the red lines here I added... again just making that thinner as apposed to how thick it is. And then just making the carousel a continuous scrolling image if possible. (even without the arrows if even more possible) Or if there is another/better way on the site to do this...
  11. basically just want it to be thinner. Like a code that can let me adjust the height on top and bottom. And then of course the auto scrolling continuously.
  12. Website: https://www.adamhyattphotography.com/ I have a carousel section I just added towards the bottom of my homepage with Brand logos in it. I would love to adjust the black background padding to be just larger than the logo space and in otherwards make it a lot thinner. As well as have the carousel just constantly scrolling. Thank you!
  13. It wasn't working how I wanted any other ways, so I added it in the media section of the Page settings (only allowed through a url of course. But now the padding is all off, and if I change the padding for that then it changes for all pages. Also, in mobile view crops differently. Or if you adjust the browser size on PC it just changes everything. Tablet View also looks horrible for many things. Don't understand why everything doesn't adjust properly for sizing.
  14. what's the coding for reducing the padding in the intro section on a particular page? I had to change the intro padding for my home page for a video but it messed up some other pages that I want to alter singularly now if I can instead of site wide.
  15. Ok, might have fixed the black bar problem at least in mobile view but I still see it in tablet mode for some reason.
  16. I've tried it that way, and also in the intro, and with code suggested by others on here. Nothing seems to make the video go the full width of the page or get rid of a black bar that I can now see on mobile view. There's other things on my page that I would like to go full width as well that don't but the video is the first thing I need to fix.
  17. Sorry for some reason it keeps not saving it in the post so just added it in the body...
  18. So I've tried doing the whole URL video and CSS offered to me here to get this intro section video to work how I want and nothing worked properly. So now I tried the new option of uploading the video directly via Squarespace's new video gallery option and it still has this black section behind it and even bigger on the mobile version. There has got to be a simple way to just get a video to display the length of the screen properly without any background showing like a normal website that just plays the video the width of the screen automatically upon going to the home page. Just want everything to be white around it and full width in both Computer, tablet or mobile views. https://www.timelessweddingfilms.com/ Password is: Weddings
  19. OK, so I figured out the background color for a section... The home video I think I have sized right on desktop version, but tablet and mobile still have problems. And still need the footer solved if possible.
  20. So that make the video show the correct size but adds a huge black space above and below...
  21. That's the thing. It doesn't, but every platform to upload to so I can embed it adds it because of the dimensions I guess.
  22. www.timelessweddingfilms.com Password: weddingday So I'm looking for a few things here. First and most import probably is the video on the main page. I am trying to get it to span the width of the screens for PC, Tablet, & mobile, and show the full dimensions of the video without the black bars on top and bottom that seem to be showing no matter how I resize the block. Second, I can't seem to figure out how to get the footer the way I want it. Currently it is stacked. I would like everything centered in its columns and relative to the site, but in a column layout where I have the business info stacked on the left, the navigation linked in the middle but kept it its horizontal form if possible, and then the social links on the right. When I try to even put it in the stacked form it looks weird to begin with and without any sort of way to move them at all. Third, I am trying to figure out how to extend or have a color background strip across the width of the page in a specific area. I couldn't figure out a way to create what I wanted on the site so just made an image but I want to extend the gray background. I've added some custom CSS for a few things already but I'm sure some of it needs to be fixed maybe. Also hoping there is a way to make the two gallery blocks on the home page the width of the site as well. AND when I view it in mobile mode they show up differently between the two for some reason. the first one is all together and the second one has a space between the photos. Is there a way to make it so the photos show one by one stacked in mobile view the width of the phone instead maybe? Any help for these three things would be greatly appreciated!!
  • 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.