NickScola

8 hours ago, Byutyunev said:

Hey Nick, sorry for bothering you again, the code you gave me worked perfectly, but only to one of the pages and I have one more page where the image icons appear huge on mobile, how can I tell the code to go for that page too? That would help me a lot, I don't know if you saw my previous comment... 

I appreciate your help, 
Thank you 

Add the page section id to the CSS. So now your CSS should look like:

#page-section-60b5ff33c0b2d87d1b46b7d5 .image-block,
#page-section-60b618ca71ea826d88fbefbc .image-block
{
  
  @media (max-width: 640px) {
    width: 20%;
  } 
  
}

6 hours ago, drwhittelsey said:

Hey @tuanphan and @NickScola

The website is https://dodecahedron-coral-95nw.squarespace.com/

The password is Hoverhelp

Would really appreciate either of you looking into my code to see what's up. I'm totally stumped 😞

Sorry for the delay, try this: 

.gallery-grid--layout-grid .gallery-grid-item {
  position: relative;
  overflow: hidden;
  
  &:hover {
    
    .gallery-caption {
      opacity: 1;
    }
    
    .gallery-caption .gallery-caption-wrapper {
      transform: translateY(0);
    }
    
  }
  
  .gallery-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity ease-in-out 0.25s;
    
    .gallery-caption-wrapper {
      height: auto;
      padding: 0 20px;
      text-align: center;
      transform: translateY(25vh);
      transition: transform ease-in-out 0.5s;
  	}
    
  }
   
}

What's the password to the site? It's currently locked.

4 minutes ago, sundayseltzer said:

@NickScola Fantastic, that has worked perfectly!!

Do you know a code to reduce the block padding around the 'add to cart button'?
I am trying to stack the buttons closer together.

thanks,

Elvin

Yes, there's a few ways to go about this. Have a go at this:

.product-block .buy-button, .product-block .sqs-add-to-cart-button-wrapper {
  margin-top: 5px;
  margin-bottom: 5px;
}

Also, if your'e wondering why the checkout button is not moving closer its because there's a blank Squarespace block before the checkout button

1 hour ago, bloom-candles said:

Site URL: https://www.bloom-candles.com/

I am looking for someone to help with some custom CSS to make the new List Blocks show 2 wide on mobile. 
I have tried to use other CSS mentioned on the forums with the same end goal but for galleries, products, etc, but not list blocks.

On my site you will see after the headline block (2nd block down, list block) the section in question. On desktop is shows 3 wide (or two depending on screen) but on mobile it is only 1 wide and is taking up a lot of screen space and requires lots of scrolling which can't be good for conversions. 
 

I currently have this CSS running. I have tried my hand at making a copy of it that will work with list blocks but no luck.

@media only screen and (max-width:767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

Try adding this to the custom css section and let me know if this works for you:

.user-items-list-simple {
  
  /* -- Mobile devices (not tablet) -- */
  @media (max-width: 640px) {
    display: flex;
    grid-gap: 0px !important;
    padding: 0px !important;
    flex-wrap: wrap;
  } 
  
  .list-item {
    @media (max-width: 640px) {
      width: 39%;
      margin-bottom: 40px;
      
      .list-title {
        font-size: 13px;
      } 
      
      .list-item-content__button-container {
        max-width: 100% !important;
      } 
      
    } 
  } 
  
} 

35 minutes ago, miskomedia said:

Site URL: https://stonewall-construction-inc.squarespace.com/multi-family

Hi, I'm looking for the CSS to move the titles of each project on this page to the top of the images. The page is https://stonewall-construction-inc.squarespace.com/multi-family and the password is "jackson". There will be multiple pages like this so it doesn't need to be specific to just this page.

Add this to Custom CSS:

.portfolio-grid-basic .grid-item .grid-image {
  order: 2;
}

.portfolio-grid-basic .grid-item .portfolio-text {
  order: 1;
} 

44 minutes ago, sundayseltzer said:

Hi @NickScola

that worked perfect for the size reduction, however the button, once pressed, shoots off to a left alignment.
is there anyway to keep it centre aligned after being pressed?

 

thanks

Elvin

That's so strange. Add this:

.sqs-add-to-cart-button { margin: 0 auto; }

2 hours ago, sundayseltzer said:

Site URL: https://www.sundayseltzer.co.uk/barge-drinks

Hi there,

 

I have managed to re label all my 'add to cart buttons' and the are looking great however once the button has been pressed and the product 'added!' to cart the button reduces in size by approx 25% . if you press the button again, it reduces by a further 25% etc etc.
 

how can I stop the button reducing every time the product has been added to cart. in the images you can see the 'beer can' product has reduced.

regards,

Elvin 

Looks like for some reason the button get's applied an inline style that continues to reduce the width. That might be a Squarespace bug. However, try adding this to Custom CSS:

.product-block .productDetails.center .sqs-add-to-cart-button-wrapper {
  width: 100% !important;
} 

Can you share a link to the demo site you're currently working with?

36 minutes ago, Byutyunev said:

Okay so I go to Design > Custom CSS > then I paste the code as it appears here and click save right? Then it should work I hope, the reason I am asking is because I don't want to mess the site 😄

 

Yes, that's it. 

On 7/1/2021 at 2:05 PM, dlthdus0817 said:

Site URL: https://dandelion-garlic-b2w5.squarespace.com

Hi, 

Is there any way CSS that I can make images on both left and right side as full bleed on my home page?

Still keep the space between two images but no margin at the left side of left image and no margin at the right side of right image as full bleed?

Please help me! Thank you.

Website url: https://dandelion-garlic-b2w5.squarespace.com
Password: cvbnm

 

 

Paste this code in the Custom CSS section:

.page-section[data-section-id="60de0bfa33d7aa1e05234f69"] .content-wrapper {
  max-width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  overflow-x: hidden;
}

On 6/23/2021 at 8:05 AM, Byutyunev said:

I uploaded the icons on the desktop and they look perfect, when I got to the mobile version they are way bigger and I don't know how to restrain them!

Ah, I see what's happening. On mobile Squarespace columns are full width. To fix this in this section only paste in Custom CSS

#page-section-60b5ff33c0b2d87d1b46b7d5 .image-block {
  
  @media (max-width: 640px) {
    width: 20%;
  } 
  
} 

1 hour ago, EkoCrateJordan said:

Site URL: http://ekocrate.com/home-2

Wondering where I am getting this extra white space... (see image)

Trying to get our new homepage to not have tons of white space above the fold as the screen/browser width is reduced - the left column gains extra space below the video/image.

Also, is there a way to reduce padding for text (vertically) on mobile only? The spacing is great on desktop.laptop and too large on mobile.

Thanks!

Headings have margins applied to them. I notice you're using a code block for this and applying inline-styles to your H2. So just add margin-top: 0px;

1 hour ago, LV-OZ said:

Site URL: https://lobster-ray-g42d.squarespace.com/certification

Hi there - I have another question if I may:

I have substituted my regular logo for an alternate version on my 'Certification' page by inserting it in the advanced code of the page settings using the URL from my custom files.

For my regular logo I made it larger in the Mobile header using this code:

@media screen and (max-width:640px) {   
  .header-title-logo img {     
    max-height: 120px; 
    transform: translateY(20%);
  }
}

How do I do the same for alternative logo? It has the same dimensions, but is a colour version instead of white.

Thank you so much!

PW: youcanenter

If you go into Custom CSS and paste this in:

#collection-60dd43fb867a9d19d3723218 .header-title-logo a {

  @media (max-width: 640px) {
    max-height: 120px;
  } 
  
} 

Feel free to adjust where needed.

What template are you using? Are you on 7 or 7.1? If you can share the link with the password to see the site that'll be great.

20 minutes ago, anthonyrichardson said:

Site URL: https://www.thedesignemotive.com

Hi everyone,

I came across a website and love the layout of their homepage and wanting to replicate it of sorts for my own site, www.thedesignemotive.com. The website I'm referring to is https://minimalissimo.com/

What I love about it is the three-column layout but with differing aspect ratios of the thumbnail, but then they are lined up through an invisible centreline for each row.

I know this is a long stretch but would it be possible to achieve something similar using code?

Yes, this is very much possible. What template are you currently using? Made changes to your site locally but would like to test this out in Squarespace really quick to make sure this is pretty easy to accomplish / scale. 

The website you found applies different widths / aspect ratios depending on the thumbnail image they've uploaded. An easy way to target this is either by:

• Adding a category / tag to the item
• Automatically looking at the thumbnail image original dimensions and determining if it's square, landscape, portrait, etc. 

From there we can apply a max or fixed width to the item container. Which is how they have some items different widths / aspect ratios.

If you want feel free to email me a contributor invite to nick@nickscola.com (Admin permissions) and I'll be glad to help out.

1 hour ago, joshua.reynolds said:

https://www.zoenetwork.ca/accueil#en-saviour-plu 

This page here, looking to hide the newsletter block at the bottom. 

Thanks, paste this code in the custom css section:

/* -- Hide Newsletter Block on /accueil -- */
#collection-58cc52aedb29d633eb5a09dc #block-yui_3_17_2_1_1625514252316_6206 {
  display: none;
}

Please note, if you remove the newsletter block from your footer and then re-add it Squarespace will generate a new Block ID.

To target all newsletter blocks in the footer you can also do this:

#collection-58cc52aedb29d633eb5a09dc #footer .sqs-block-newsletter {
  display: none;
}

Each page has a unique collection ID. You can find it in your source code.

Finally, if you want hide this newsletter block on other pages your CSS code would look something like this

/* -- Hide Newsletter Block on multiple pages -- */
#collection-58cc52aedb29d633eb5a09dc #block-yui_3_17_2_1_1625514252316_6206,
#collection-REPLACE-ME-WITH-YOUR-COLLECTION-ID #block-yui_3_17_2_1_1625514252316_6206 {
  display: none;
}

1 hour ago, megan05 said:

Site URL: https://www.locallocalfoods.com/

Hello! 

I'm trying to align the form fields next to each other and also make the "first name + last name" boxes into one "name" box. See attached mockup photo for reference. Any help or code input would be greatly appreciated. Thanks!

 

Password: LLF

Instead of using the Name form field you can use a Text field and apply a placeholder value of name

51 minutes ago, joshua.reynolds said:

I want to adjust the footer on one or two of my pages. Specifically, I have a newsletter box, but I don't want that box to appear on a couple pages. How to I remove just that block? I see a few coding options to hide entire footer, but not just one piece of it. 

Send us a link to your site. You need to target the block and collection id then hide / show in Custom CSS.

12 minutes ago, thegeekywaffle said:

Site URL: https://thegeekywaffle.com/home/2021/7/5/podcast-kim-possible-movie-so-the-drama

Hello:

I've searched everyone but I wanted to know how to decrease the font size of the my tags. They are so prominent on the page. Thanks!

Add this to the custom css and adjust the value / size when needed:

.blog-item-tags {
  font-size: 9px;
}

On 5/7/2021 at 8:58 AM, chloeforbesk said:

Hi there, a client has asked me to embed a live price tracker for their own creator coin on Rally.io. I've got a link to the tracker itself. The link looks like this https://www.creatorco.in/API/1_0/currentPrice.php?coinSymbol=

(I can't include the rest of that link for privacy)

I've attached an alternative coin display as an example.

Is there a way I can do that?

They want the tracker to display in the header of their website.

WordPress offers plugins for this kind of thing but I haven't been able to find any support for Squarespace. The person who provided them with the link informed them this is possible with css but I've no idea how.

Any help would be much appreciated.

Thank you. 

Yes, this is pretty straight forward with Javascript. You will need to use the API from Rally.io. Write a Javascript function to perform a fetch into the API endpoint. Upon a successful request you will receive that data in JSON format. For example:

{
"symbol":"KSK",
"priceInUSD": 7.5852780235960005,
"priceInRLY": 25.084172
}

From there you can retrieve this key/value pair and insert it wherever you wish. If you need help with this in more detail feel free to email me at nick@nickscola.com

3 hours ago, andrewhill said:

Thanks for much Nick.

Do you know if it is possible to change the colour or design of the LinkedIn Logo itself? I'm trying to make it stand out more on my header. Thanks. 

Yes, if you  want to change the color of the LinkedIn SVG try something like this: 

a.icon.icon--fill[href*="linkedin"] svg {
  fill: blue;
} 

Couple ways to go about this. I suggest you use Javascript for this. 

1. Detect what navigation items is visible. English or Iceland

2. If Iceland navigation items are visible (not css hidden) then change the logo link

Here's an example based off your site. Again, there's a few ways to go about this.

if ( $('.page-collection:even').is(":visible") ) { 
  $('.logo a').attr('href', '/iceland');
}

Here's an example. Add this to the custom css and adjust where needed:

a.icon.icon--fill[href*="linkedin"] {
  width: 124px;
  height: auto;
} 

On 6/2/2021 at 3:58 AM, jhuynhdesign said:

Site URL: https://jhuynhdesign.com

Dear Squarespace team,
On my website, I have set up a "splash screen", which is a GIF that animates off the page. I only want this animation to appear the first time the homepage is initially loaded.

My first problem was that this animation would appear anytime I tried to navigate to a new page on the website, but I then realized it was because I applied the code in the site wide code injector. I then removed it from there and injected it to just my "work" page, but it has a portfolio layout on the page. Which then leads to the animation being displayed every time a new project page is clicked on. 
Is there a way to just have it load on the first "work" page and not the corresponding project pages within it? Is there a better place to put the code and add additional code to have it play only once on the initial homepage load?

FYI to set up the splash screen, I currently use the code below injected into the advanced page settings of my "Work" page(which is the portfolio layout) .
thanks!
Jessica

 

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/604960c8e5cc251ac72ff9f5/t/60b741b47e6b260d3ca3fb2b/1622622645566/wordmark-transparent-final.gif" width="500" height="auto"></img>
    
</div>

<style>
.splash-wrapper{
  position: fixed;
  z-index: 9999;
  background-color: #ffffff;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 3.375s;
}

@keyframes slideOut{
  from{margin-left: 0vw;}
  to{margin-left: -150vw;}
}
</style>

There's a couple ways to go about this. I suggest you use Javascript to create an entry in the localStorage, sessionStorage, or a simple cookie. Then if this entry or cookie exists you don't display the GIF. This way the user will only see the GIF upon initial / 1st time page load until the user closes out of the session, clear cookies, etc.

Also, if you have AJAX enabled on your template you can detect if AJAX has been called. If it's been called then don't display the GIF. If you need help email me at nick@nickscola.com