-
Posts
17 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by travisandrew
-
Hey team - I'm attempting to code a background image replacement for the first section when the following page is viewed on mobile: https://www.peterzizzo.com/dare-to-suck I've attempted the following code but I'm afraid I'm not targeting the right section id as I can't get the background image to adjust when viewed in mobile. Could someone please assist? Thanks! // mobile background replace section[data-section-id="662817ff05ecb2537fa28cbd"] { @media only screen and (max-width:640px){ .section-background img { opacity:0; } .section-background { background-image:url('https://static1.squarespace.com/static/601982cee0432c611d54064e/t/665280a48c8f5d0e8086219c/1716682918770/pete-zizzo-demons-graphic-mobile-animated-2304x4096.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } } }
-
Custom Scroll Indicator Icon on Burke Template
travisandrew replied to travisandrew's topic in Customize with code
Yes! I have a custom SVG I'd like to use as a scroll icon. -
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
-
(Share) Navigation Custom Font - 92 Templates
travisandrew replied to tuanphan's topic in Customize with code
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;} }- 12 replies
-
- font
- customized
-
(and 1 more)
Tagged with:
-
How to apply CSS to specific image blocks on 7.1 FE
travisandrew replied to MJohn's topic in Customize with code
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; } -
Vertically Centering Blocks of Two Columns
travisandrew replied to kaitschmidek's topic in Customize with code
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- 33 replies
-
- custom-css
- alignment
-
(and 2 more)
Tagged with:
-
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
- 19 replies
-
- custom-css
- css
-
(and 2 more)
Tagged with:
-
How to replace images when viewed in mobile
travisandrew replied to jessclark98's topic in Customize with code
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! -
How to replace images when viewed in mobile
travisandrew replied to jessclark98's topic in Customize with code
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; } } } -
Headline image size (mobile breakpoint)
travisandrew replied to Maksymrewko's topic in Customize with code
I think that works! Thank you! -
Headline image size (mobile breakpoint)
travisandrew replied to Maksymrewko's topic in Customize with code
Hey @tuanphan were you able to view the site above? Appreciate any insight you may have! -
Headline image size (mobile breakpoint)
travisandrew replied to Maksymrewko's topic in Customize with code
Of course! Here you go: https://pigeon-maracas-9ccm.squarespace.com/ pw: happy2021 Let me know that you are able to view. -
Headline image size (mobile breakpoint)
travisandrew replied to Maksymrewko's topic in Customize with code
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!