Jump to content

skali

Circle Member
 View Profile  See their activity

  • Posts

    43

  • Joined

  • Last visited

 Content Type 

Posts posted by skali

    Sticky Text Not Working on Mobile (7.1)

    in Customize with code

    Posted

    On this site we have a few sticky heading text elements that tuck behind the other elements. Everything is working, but for some reason on the "About" page, the heading won't tuck behind everything on mobile only. In that section there is the heading (About Us), a line block, and a solid white shape block that the text should be tucking behind.

    When testing out the mobile view in Squarespace Editor, it works as intended (see static screenshot). But on the actual mobile site, it doesn't tuck behind (see video screengrab).

    https://lucas-studio.squarespace.com/about

    pw: LSI123

    Can anyone help? Thanks!

    Screenshot 2024-03-05 at 9.38.30 AM.png

    Masonry Gallery Block - Image Links Not Working (7.1)

    in Customize with code

    Posted

    Hello! I'm using a masonry style gallery sectionon this page (https://www.michaeldruker.com/properties). I've included the CSC code below that is implemented to style the captions & color change on hover.

    In addition to this we'd like to link out each image, but the links aren't activating. I'm thinking this code might be stacked on top of the click event or is disabling it for some reason. Or maybe it has to do with the initial opacity?

    Does anyone have thoughts on how I can bring the links forward so that they are clickable? 

    The first image has a link applied for testing purposes (screenshot attached)

    Thank you in advance!!
      

    // *Caption Styling - Title* //
@media @desktop {
section[data-section-id="63eb213085c26b62e058f848"] .gallery-masonry-item .gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    margin: 0;
    color: white;
    font-family: 'Goudy+Modern+MT+Std+Regular';
    font-style: normal;
    letter-spacing: 0em;
    line-height: 1.1em;
    font-size: 2rem;
    text-align: center;
}}

// *Caption Styling - Second Line (Location)* //
@media @desktop {
section[data-section-id="63eb213085c26b62e058f848"] .gallery-masonry-item .gallery-caption .gallery-caption-wrapper p.gallery-caption-content strong {
    color: white;
    font-size: 1rem;
    font-family: 'Karla';
    letter-spacing: .05em;
    font-weight: 400;
    display: block;
    text-transform: uppercase;
    line-height: 20px;
    margin-top: 8px;
    line-height: 0em !important;
    margin-bottom: 30px !important;
  }}


//* PROPERTIES GALLERY GREYSCALE EFFECT * //
@media @desktop {
section[data-section-id="63eb213085c26b62e058f848"] {
.gallery-masonry-item img {
  filter: grayscale(100%);
  transition: filter .2s ease-in-out;
}

.gallery-masonry-item:hover img {
    filter: none;
    transition: filter .2s ease-in-out;
  }}}

//* PROPERTIES GALLERY CAPTIONS (DESKTOP) * //

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.25); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}



.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-masonry-item {
position: relative;
}
.gallery-masonry-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-masonry {
transition-delay: 3ms;
  }

     

    Screenshot 2024-01-28 at 12.05.43 PM.png

    Portfolio Page Titles - Add a Stretchy Line on Hover (7.1)

    in Customize with code

    Posted

    On 7/22/2023 at 9:35 PM, tuanphan said:

    Use this CSS for View project underline hover 

    h3.portfolio-title:before {
  content: "";
  background: black; 
  height: 1px;
  width: 0;
  margin-top: 1px !important;
  transition: width 1s;
  margin: 0 auto;
    position: absolute;
    bottom: 0;
}

h3.portfolio-title:hover:before {
  width: 100%;
}
h3.portfolio-title {
    display: inline-block;
    position: relative;
}

     

    @tuanphan Incredible. Thank you so much!!

    Portfolio Page Titles - Add a Stretchy Line on Hover (7.1)

    in Customize with code

    Posted

    Hi there! 

    On the Portfolio page, I'm wondering if it's possible to add the same hover animation as the navigation/header underneath the "View Project" line of each project?

    This is the code I'm using for the hover navigation: 

    // Stretchy Navigation Line
.header-nav-item::after {
  content: '';
  background: #FFFFFF; //color
  height: 1px; //thickness
  width: 0;
  display: block;
  margin-top: 1px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
}

    And then this is the CSS for the 2nd line of the Portfolio title "View Project" (the URL is then changed per project.  

    a.grid-item[href="/projects/manhattan-beach"] h3:after {
    content: "View Project";
}
a.grid-item[href="/projects/manhattan-beach"] h3:after {
    content: "View Project";
}

    I'm running into the issue that the code is similar in that the content: element overrides one another when trying to apply both to achieve the effect.

    PW: LSI123!

    Squarespace 7.0 - Button in Navigation Menu Troubleshooting

    in Customize with code

    Posted

    Site URL: https://kazoo-chipmunk-khcn.squarespace.com/

    I'm looking to add a button to the primary header nav, but it's also appearing below in the folder dropdown menus. Could anyone help me isolate the button to only appear in the main nav and not in any dropdown folders?

    This is the 7.0 template, Five, and I'm using the following code: 

    nav#main-navigation ul li:last-child a {
   background: #000000;
   color: #ffffff !important;
   padding: 10px 20px !important;
   border-radius: 30px;
   border: 2px solid #ffd966;
}

     

    https://kazoo-chipmunk-khcn.squarespace.com/
    PW: Sunshine012!

     

    Thank you!

    Screen Shot 2022-03-04 at 2.08.32 PM.png

    Custom Fonts in Squarespace 7.1

    in Customize with code

    Posted

    Site URL: https://terrier-hexagon-22dr.squarespace.com/

    Hello! 

    I'm using a font for a website that seems to default to using the special/ligature marks. Is there a code that would fix this within Squarespace or is this more of a font file issue? Assuming it might be the latter, but would love any insight if someone has encountered this before on a site.

    https://terrier-hexagon-22dr.squarespace.com/

    PW: Sunshine201!

    Thanks!

    Screen Shot 2022-03-02 at 12.01.47 PM.png

    Custom Social Icon / General Link 7.1

    in Customize with code

    Posted

    Hi! 

    I have three social links I'd like to include in the footer of the site and one is an external shop link. Can anyone help me customize the generic link icon to show my own image/icon?

    Also, is there a way to customize the size of that image once it's placed? I'm thinking it might be a bit wider than the link image looks to be now.

     

    Screen Shot 2021-11-18 at 7.54.11 AM.png

    Portfolio Grid - Unique Images on Hover

    in Customize with code

    Posted · Edited by skali
    typo

    6 hours ago, tuanphan said:

    #1. Use this new code. 

    a.grid-item[href*="/westchester"] {
  &:hover img {
      visibility: hidden;
          transition: opacity ease 100ms;
  }
 img {
    transition: opacity ease 100ms;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
&:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/605ca059ca12273e08012873/t/6182ebfe907f2f58f9d0fdb4/1635970050490/DDP_5231-1-web.jpg) !important;
    background-size: cover !important
}}

    #2. Disable hover for text + image?

    @tuanphan 

    Thank you!

    For #2 (disabling the hover), I'm looking to have the third project image (Coming Soon: Kenilworth, IL) remain as-is. https://www.arielokin.com/test-page-reverse-hover

    So, having it stay the blue background with white border with the caption text in the middle. Right now the hover makes it disappear.

    Portfolio Grid - Unique Images on Hover

    in Customize with code

    Posted

    3 hours ago, tuanphan said: 
    /* Change image on portfolio item hover */
a.grid-item[href*="/westchester"]:hover img {
    visibility: hidden;
	transition: all 0.5s;
}
a.grid-item[href*="/westchester"] img {
	transition: all 0.5s;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href*="/westchester"]:hover .grid-image-inner-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
}


    @tuanphan Thanks! This gets me close, but the caption seems to be transitioning at a different speed than the background image. Do you have any thoughts on how they could both move at the same speed?

    Also, is there a way I can target certain projects to disable the hover completely?

    Thanks!!

    Portfolio Grid - Unique Images on Hover

    in Customize with code

    Posted

    On 11/9/2021 at 10:07 PM, tuanphan said:

    @skali Try adding this to Design > Custom CSS 

    /* Change image on portfolio item hover */
/* Change image on portfolio item hover */
a.grid-item[href*="/westchester"]:hover img {
    visibility: hidden;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href*="/westchester"]:hover .grid-image-inner-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
}

    (the code for first image, if it works, I will send code for other items)

    @tuanphan this is perfect! Is there a way to integrate a slower transition?

    Portfolio Grid - Unique Images on Hover

    in Customize with code

    Posted · Edited by skali
    Additional information

    Site URL: https://www.arielokin.com/test-page-reverse-hover

    Hi! I'm trying to build out a project landing page using the portfolio (Grid Overlay) and want to customize each project's hover with a unique image. I know how to overlay an image, but not a photo that is unique to each product since there are no block IDs associated to each project. Is it possible to do so?

    For additional context, it would essentially be reversing this image and hover set up minus a few decorative details.

    Thank you!

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