ampddesigns

On 3/6/2023 at 1:21 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-nav .ProductItem-nav-breadcrumb, .ProductItem-nav {
    display: flex !important;
}
.hidden-sm-down {
    display: block !important;
    width: 100% !important;
}
}

 

I spoke too soon — this actually created some other problems where the button wasn't clickable and the image repeated 3 times on mobile. I imagine the button issue could be fixed with z-index. I didn't have much time to figure out what was going on with the image, so I just removed the code and will forego the breadcrumb for now.

Hopefully Squarespace will add this feature in for mobile; not sure why it isn't an option.

14 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-nav .ProductItem-nav-breadcrumb, .ProductItem-nav {
    display: flex !important;
}
.hidden-sm-down {
    display: block !important;
    width: 100% !important;
}
}

 

Awesome, this worked for me. Thank you!

Hi! Is there a way to still show the breadcrumbs on mobile view? I've tried targeting the breadcrumb code and displaying it to block with a media query for mobile, but that doesn't seem to work.

For reference, here's the site and a product page. Breadcrumb shows up on desktop but not mobile:

https://beamcenter.squarespace.com/benefit-brunch

https://beamcenter.squarespace.com/benefit-brunch/p/illuminator

Password: beam

Thank you!

Hey All! Was just talking about this with some other designers. This seems like a huge and very concerning issue.

Even with embedding fonts or uploading woff files, the google fonts will still load in the background. Not to mention it's just a huge hassle to upload a bunch of font files when they're already built right in. Also, any business owner who DIYs their site is definitely not going to know anything about this.

Does anyone from the Squarespace team have any insights into if/how this is being addressed?

On 10/4/2021 at 10:42 AM, jntfoster said:

@ampddesigns, were you able to find a solution to your pricing table? I am looking for the exact same pricing table layout and can't find what I want. Thanks for your help!

Nope, ended up uploading an image. /:

2 hours ago, sorca_marian said:

Hello!

Add the below code in Settings -> Advanced -> Code Injection > FOOTER

 

<script>
window.addEventListener("scroll", function() {
  var siteTitle = document.querySelector("#site-title"); 
  if(window.pageYOffset >= 30) {
    siteTitle.className = "smaller-font";
  } else {
    siteTitle.className = "";
  }
});
</script>

And the below code in Design -> Custom CSS 
 

#site-title.smaller-font {
    font-size : 23px;
}

 

Amazing, thank you so much!

Site URL: https://circle-triceratops-tem9.squarespace.com/home

Hello! Seeing tons of solutions to shrink the logo on scroll, but what about the site title? Futzing around with it and can't seem to make it work. Any help would be much appreciated!

Just a test site:

https://circle-triceratops-tem9.squarespace.com/home

password: view

3 hours ago, tuanphan said:

You can search some code on CodePen. I think you will find it.

Then share link here, we can convert it into Squarespace

eg.

• https://codepen.io/blackellis/pen/QWjmEbz
• https://codepen.io/search/pens?q=toggle+pricing

Oh wow, thanks so much! Looking forward to digging through these.

Hi! Has anyone come across any code/plugin to create a checkbox pricing table like this?

Through search I've found a handful of great list-like column tables, but none with checkboxes so far, so thought I'd double check!

On 4/17/2021 at 5:36 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div.nested-category-tree-wrapper ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
}

 

Thank you so much!

In case it's helpful, I also used this to bring "all" in alignment:

.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
  padding-bottom:0px!important;
}

Hi @tuanphan So glad I stumbled upon this, thanks!

Was there ever a fix for mobile?

Here is the site:

https://kazoo-grape-t92x.squarespace.com/shop

Password: DailyMagicWholesale21

Also, is there a way to align "all products" with the rest of the items? Currently it is higher.

Currently on screen resizes this is what I see:

Hi! I'm Alyssa and I own a small business called Amp'd Designs. My focus is on branding and Squarespace web design. Mostly I work with small businesses and entrepreneurs across a variety of industries that are passionate & excited about what they do. Through design, I aim to help them communicate their values & brand personalities in order to better communicate with their audiences. In my work tend to use a lot of color, pattern, and illustration, and I love deeply conceptual logo design.

I've also done a bit of work in the music industry; I love music and credit it for getting me into design!

Hello,

I need to add the client's business location to Scheduling for her customers' confirmation emails. I've updated the location in Availability > Calendars > Calendar Settings > Location.

When I preview the confirmation email, it still shows "call in info or location." Is this going to display the location I put into the calendar settings, or is there anything else I need to do?

Thanks!

@luisgonzalez, @tuanphan, did you end up finding a solution to this? I have the same question.

Here's the test site (newsletter in the footer):

https://plantain-grasshopper-zlwt.squarespace.com/test

password: view

And here's the code I have so far:

//newsletter
.newsletter-form-header-title {
  font-size:20px!important;
font-family: 'Spartan', sans-serif!important;
      font-weight:800;
  text-transform:uppercase;
  letter-spacing:.075em;
  line-height:1.4em;
}
.newsletter-block .newsletter-form-field-element {
  color:white!important;
}
.form-submission-text {
  color:white!important;
}
input {
  color:white!important;
}
.newsletter-form-field-element {
 background: red !important;
  border:1px solid white!important;
 }
.newsletter-form-button {
      font-family: 'Spartan', sans-serif!important;
      font-weight:800;
  padding-top:18px!important;
  letter-spacing:.075em;
}
.newsletter-form-button:hover {
  background:#ff6100!important;
 color:white!important;
  opacity:1.0!important;
}