Jump to content

Custom CSS - Hover animation, mobile responsivity

Go to solution Solved by Ziggy,

Recommended Posts

Hello, 

#1 - I would like to re-create this on-hover animation for my navigation links as shown in the Figma prototype: https://www.figma.com/proto/U6jZDvNUHVKwoe40FqhtCU/HIGH-IMPACT?page-id=0%3A1&type=design&node-id=135-286&viewport=569%2C429%2C0.21&t=MEqFC4p5Po5VEyFw-1&scaling=min-zoom&mode=design

#2 - I have two issues regarding my mobile responsiveness: 
(i) - The testimonial section - Is there a way I can increase the image without affecting the Desktop view?
(ii) -  Then the stats section: The spaces between everything is just so wide and I've tried everything I know but it's not working - Please if there is a way to fix this, it would be really helpful.   (View screenshot in attachment).
 
Password: hope

Screenshot 2023-10-sd21 121611.png

Screenshot 2023-10-22 141454.png

Link to comment
  • Solution

Try this for the testimonial image:

@media only screen and (max-width:767px) {
  .user-items-list-carousel[data-media-alignment="center"] .user-items-list-carousel__media-container {
    width: 30% !important;
  }
}

For the stats, why not set that up as a list section?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
4 minutes ago, PapaJoe said:

For the stats, how can I set up list section?

In the same way you added the testimonials, but set it to Grid instead of Carousel.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
19 minutes ago, PapaJoe said:

I only want to apply the animations to images alone; Is there a way I can do that?

I'm not aware of a good way to do that, though it would be nice to selectively add the animations.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
13 hours ago, PapaJoe said:

And the on-hover nav-links animation?

Try this as your starting point, you'll have to adjust the size and colour:

// Underline on hover
.header-nav-item a {
  width:0%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFBF00 65%);
  transition:ease-in-out 300ms;
  &:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFBF00 65%);
    width:65%;
  }
}
body:not(.header--menu-open) .header-nav-item--active>a {
  background-image:none;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 months later...
On 10/24/2023 at 5:52 PM, Ziggy said:

Try this as your starting point, you'll have to adjust the size and colour:

// Underline on hover
.header-nav-item a {
  width:0%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFBF00 65%);
  transition:ease-in-out 300ms;
  &:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFBF00 65%);
    width:65%;
  }
}
body:not(.header--menu-open) .header-nav-item--active>a {
  background-image:none;
}

This is great, thank you @Ziggy!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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