Jump to content

travisandrew

Circle Member
 View Profile  See their activity

  • Posts

    15

  • Joined

  • Last visited

 Content Type 

Everything posted by travisandrew

  1. travisandrew
    Yes! I have a custom SVG I'd like to use as a scroll icon.
  2. travisandrew
    Hey team! I'm attempting to add a custom scroll indicator icon. Currently on the Burke template there are two options: Line or Arrow. I'd like to input a custom SVG file as the scroll indicator which I'm hosting here: https://www.dropbox.com/s/u3k05nggr0qoj5l/girl boat.svg?dl=0. Appreciate any help! https://ellipsoid-bellflower-dm4x.squarespace.com/ PW: dreamrut
  3. travisandrew
    Hey guys - I'm on the Burke template and am having issues with font on mobile for text over index sections. Font style should be Brandon Grotesque on desktop and mobile. Any help would be appreciated! Mock: https://ellipsoid-bellflower-dm4x.squarespace.com/ PW: dreamrut @font-face { font-family: 'Persephone'; src: url('https://static1.squarespace.com/static/63b392b9ae92f31b032bee1d/t/63b39d3a6350f4104142f3bf/1672715580928/Persephone.otf'); } .has-site-title .Header-branding {font-family: 'Persephone' !important; text-transform: capitalize;} h1 {font-family: 'Brandon Grotesque'; font-size: 32px;} h2 {font-family: 'Brandon Grotesque';} h3 {font-family: 'Brandon Grotesque';} body {font-family: 'Brandon Grotesque';} @media only screen and (max-width: 840px) { .has-site-title .Mobile-bar-branding {font-family: 'Persephone' !important; text-transform: capitalize;} h1 {font-family: 'Brandon Grotesque' !important; font-size: 32px;} h2 {font-family: 'Brandon Grotesque' !important;} h3 {font-family: 'Brandon Grotesque' !important;} body {font-family: 'Brandon Grotesque' !important;} }
  4. travisandrew
    Hey guys! Trying to do something similar here, keying in on hover-over animation for only the images with the numbers 1, 2, and 3 listed on them. Here's the link and the code thus far. Appreciate any help! https://hexaflexagon-gopher-sffb.squarespace.com/ PW: dreamrut .sqs-block .fluid-image-container::after { content: 'click'; font-size: 20px; font-type: Brandon Grotesque, helvetica; font-style: bold; position: absolute; top: 0; left: 0; background: #fdebd3; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 52px; border-radius: 100%; box-sizing: border-box; text-align: center; opacity: 0; transition: opacity 1s; } .sqs-block:hover .fluid-image-container::after { opacity: 0.5; }
  5. travisandrew
    Hey this is great! I can't figure out how to adapt to my site at the moment. Are you able to take a look? I'd like to vertically align the code block to the photo. Link and pw below. Thanks! Site mock: https://pigeon-maracas-9ccm.squarespace.com/ Password: happy2021
  6. travisandrew
    Hey there! Having trouble applying this to my site. I'd like the homepage menu to have a 0.2 or so transparent black background, and the other pages to have the solid blue that they have currently. Can you take a look please? Thanks! Site mock: https://pigeon-maracas-9ccm.squarespace.com/ Password: happy2021
  7. travisandrew
    Hey Wolfsilon! Great question. The issue is the dynamic movement of the card covers the subjects face when viewed on mobile. I'd like to use a different image when viewed on mobile that excludes the subjects profile image – the image that is hosted in dropbox and linked in the above code. Does that make sense? And yes, you're correct, this is the first slide in a carousel block which makes things a bit trickier. I don't want to impact the other slides in the carousel, only the first. Other solutions are welcome. haha Thank you!
  8. travisandrew
    Hey Dan - this is really helpful! But I'm having trouble adapting to the first slideshow image on my site. Can you take a look and let me know what I'm missing? Right now the background image is disappearing but not replacing with the new image. See below. Site: https://pigeon-maracas-9ccm.squarespace.com/ PW: happy2021 section[data-section-id="615df008e325c12851ac481a"] { @media only screen and (max-width: 640px) { .slideshow-holder .slide-media-container img { display: none; } .slideshow-holder .slide-media-container img img::before { content: ""; position: absolute; width: 100%; height: 100vh; background-image: url("https://www.dropbox.com/s/jp2j24i874qveg2/cassie-holmes-hero-banner_mobile-no-headshot.jpg?raw=1"); background-size: cover; background-position: center, center; background-repeat: no-repeat; z-index: 1; } } }
  9. travisandrew
    I think that works! Thank you!
  10. travisandrew
    Hey @tuanphan were you able to view the site above? Appreciate any insight you may have!
  11. travisandrew
    Of course! Here you go: https://pigeon-maracas-9ccm.squarespace.com/ pw: happy2021 Let me know that you are able to view.
  12. travisandrew
    Hey there! I'm having the same issue as the OP but this code isn't fixing the image size. Could you take a look? You'll see the background image on the banner is responsive so when the window is reduced the card covers the subject's face. Thanks!
  13. travisandrew
    Site URL: https://www.peterzizzo.com/ Hey Squarespace family — this site I've launched a few weeks ago is not performing as well as planned in terms of SEO ranking. I'd like to rank #1 for "Peter Zizzo". I've added an H1 tag to the text in the footer and the title is set up properly. The domain name is also set up properly. Can someone take a look and let me know if I need to modify the H1 tag in anyway? Do I need to add the tag behind the logo? https://www.peterzizzo.com/ Thanks!
  14. travisandrew
    Hey! Nope I think I'm all good here. Thanks for reaching out!
  15. travisandrew
    Site URL: https://contrabass-paddlefish-w396.squarespace.com/ Hey squarespace fam, I've got a video set up to autoplay on hover and have added command copy "hover to play". However, I'd like this text to fade out or hide on play so that it doesn't block the video or mess with the hover function. I'm assuming this will require Javascript. Can someone assist? Thanks in advance! HTML: <div class="container"> <video id="video" width="100%" height="auto" loop="true" playsinline="true" class="" onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;"> <source src="https://www.dropbox.com/s/tq636ve4wq81nir/IMG_3040.MOV?raw=1" type="video/mp4"> </video> <div class="overlay"> <p>Hover to play</p> </div> </div> CSS: .container { position:relative; } .container video { position:relative; z-index:0; text-align:center; vertical-align: middle; } .overlay { position:absolute; top:75%; left:0; z-index:1; font-size: 20px; font-family: Clarkson; font-weight: 800; font-style: italic; color: white; width:100%; text-align:center; vertical-align: middle; }
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources