ratkaj

@tuanphan sorry: 

https://www.academyforlittlelearners.com/pto

@tuanphan -- any idea how to handle the mobile version? We're having issues with the cropping

Site is Academyorlittlelearners.com/PTO

Password Academy1234

I was able to get some resizing to work but it's a bit off. I can't get it to center and if you flip your phone to the side it's really off. Any ideas??

@jpeterI'm attempting to do the same but I'm stuck.

Website -- https://www.academyforlittlelearners.com/time-off

I'm hoping to implement if the answer below is no...

Then the following is shown:

We solved the issue, thanks @tuanphan

Below is the code I'm currently using:

<div class="tabs-container">
  <button class="tab-btn" id="tab-1" onclick="tabOneClick()">
    hardscapes
  </button>
  <button class="tab-btn" id="tab-2" onclick="tabTwoClick()">
    softscapes
  </button>
  <button class="tab-btn" id="tab-3" onclick="tabThreeClick()">
    lighting
  </button>
</div>
<script>
 
  function tabOneClick() {
    $('button.tab-btn:nth-of-type(1)').addClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)').removeClass("active");  
    
    $('#block-ca3a4c15c6ca6756b3cc').addClass("tab-section-show");
    $('#block-yui_3_17_2_1_1675357227734_22569').removeClass("tab-section-show");
    $('#block-yui_3_17_2_1_1675357728361_62859').removeClass("tab-section-show");

    
    
    
  }
  
  
  function tabTwoClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').addClass("active");
    $('button.tab-btn:nth-of-type(3)').removeClass("active");
    
    $('#block-ca3a4c15c6ca6756b3cc').removeClass("tab-section-show");
    $('#block-yui_3_17_2_1_1675357227734_22569').addClass("tab-section-show");
    $('#block-yui_3_17_2_1_1675357728361_62859').removeClass("tab-section-show");
  }
  
  
  function tabThreeClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)').addClass("active");
    
    $('#block-ca3a4c15c6ca6756b3cc').removeClass("tab-section-show");
    $('#block-yui_3_17_2_1_1675357227734_22569').removeClass("tab-section-show");
    $('#block-yui_3_17_2_1_1675357728361_62859').addClass("tab-section-show");
  }
  
  
  $(function() {
    $('#block-ca3a4c15c6ca6756b3cc').addClass("tab-section-hide");
    $('#block-yui_3_17_2_1_1675357227734_22569').addClass("tab-section-hide");
    $('#block-yui_3_17_2_1_1675357728361_62859').addClass("tab-section-hide");
    tabOneClick();
  });
</script>
 

It's not working at the moment. Any help is greatly appreciated 🙂

Hey Squarespacers -- 

I'm a bit stuck. I have a site that the client has maxed out the gallery section (250+ images). They want to continue to add images over time so I need to split the images into separate galleries. As you can see on the current page there is a filter plugin that allows the user to filer the images. 

I'm thinking of setting it up with buttons to hide and show sections with the different galleries in place. Similar feel but would fix my maxed out image issue. Problem is, I'm stuck on the code! Anyone have experience doing this sort of thing that can share?

@KalyFiguresitOut same issue -- but only in footer sections. 

5 hours ago, tuanphan said:

Try adding this to Design > Custom CSS

/* center reel arrows mobile */
@media screen and (max-width:767px) {
body.homepage .gallery-reel-controls {
    justify-content: center !important;
}
}

 

Worked beautifully!! Thank you so much @tuanphan, you're a lifesaver as usual!

Site URL: https://musasllc.squarespace.com/

Hey Squarespacers -- I'm currently stuck on a piece of custom code. I'm attempting to center the buttons on the Gallery Reel at the bottom of the homepage on mobile only (look similar to the testimonial slider two sections above that). I was able to make all the other adjustments but I can't figure out how to make them move. Can someone help??

https://musasllc.squarespace.com/

Password: 1234

On 5/20/2022 at 10:34 PM, creedon said:

There is already CSS in Design > Custom CSS that you could update with /lb.

.product-price:after {
  content: "per pound";
  margin-top: 10px
}

But keep in mind that the change is literally only skin keep. It does not change the product in the back end. So the cart will not reflect it, neither the checkout or orders.

If you want the per pound to be in the back end you need to include that info in the title or a variant.
 

Sorry @tuanphan, yes. I was able to get as far as what you're seeing however in testing I'm seeing what @creedon's  saying. Any ideas how to fix this universally? Any plugins or something? I can't really add it to the title as that would be weird. Variants would be pretty cumbersome with so many options (1lb, 2lb, etc.)

Site URL: https://musasllc.squarespace.com/

Hey fellow Squarespacers -- I'm working on a retail site that sells goods per pound... meaning when I do a product listing I need to say it's $9/lb. Anyone run into this before or have a solution? I'm sure there is some code I can add to just have it add to each product price but I have no idea how to even go about figuring that out. 

Any suggestions much appropriated!

https://musasllc.squarespace.com/

Password: 1234

Got ya, hmmm... I'll dig a little deeper. Thanks!

Site URL: http://drippypots.squarespace.com

Hey Squarespace forum family -- I'm looking for some advice on setting up a contact form funnel similar to the one on the squarespace site when you go to contact them. The idea here is that you wouldn't get the contact info until you go through some questions and are giving the necessary FAQ info... 

Anyone have experience setting one of these up and how did you do it? 

For reference check out:

https://support.squarespace.com/hc/en-us/requests/new?platform=v6&ticket_form_id=false&websiteId=60ccbaeed960081f2622552c

Thanks!!

12 hours ago, tuanphan said:

Hi,

It looks fine to me. Did you solve? Or you have problem on some specific screen sizes?

Sorry, no. I had to make the copywriter cut copy down until it fit for the client review. I would still LOVE to figure this out if you can help??

@tuanphan -- I'm actually having an issue with a card no resizing, I tried your code but it's not working in my situation. Could you help?

https://drippypots.squarespace.com

Password: 1234

Sorry @tuanphan -- I finally got it figured out 🙂

Site URL: https://drippypots.squarespace.com/

Hey Squarespacers -- 

I'm stuck on a small edit to a much bigger hack. I've managed to get a slideshow block to randomize and work on desktop beautifully however when I move into mobile I have a padding/space (green in screenshot)  I can't seem to locate and eliminate. Can anyone help me solve?

https://drippypots.squarespace.com/

Password: 1234

9 hours ago, tuanphan said:

Try adding Our Mission in a new text block & change your code to this

div#block-yui_3_17_2_1_1644005008993_12619 {
    background-image: url('https://static1.squarespace.com/static/61eefd7df4c9615d74606c8e/t/61fd56e32c4f24344f332f5b/1643992803306/AcademyforLittleLearners_2022_webbackgrounds-08.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
div#block-yui_3_17_2_1_1644005008993_12619 * {color: black;}

 

Hmmm, not quite there. Let me know if you want access to take a closer look. I'm really stumped on this one.

37 minutes ago, Caroline_Smith said:

Hi! I just tested this out on my 7.1 account, and this is what worked for me. Change the offending code to this instead of what you have:

.user-items-list-carousel__gutter {
    overflow-y: visible !important;
    overflow-x: clip;
}

The issue that is causing the scrollbar at the bottom is actually some CSS that is being applied to the top image (the child with the mask). You'll need to change the width of that to be less than 140%.

#block-yui_3_17_2_1_1643987557932_2761 {
    margin-bottom: -20%;
    margin-top: -80px;
    width: 110%;
    z-index: 999;
}

 

Spoke too soon, In safari it's showing like this:

There is also a strange mini scroll to the section. 

Site URL: https://academyforlittlelearners.squarespace.com/

Hey Squarespacers -- I have a testimonial slider that I've been able to customize but I've run into an unexpected issue due to the code I wrote. I can't seem to achieve my goal (the images for the testimonials bumping over the top of the cards) without this side effect (the last card showing up on the right.

Any ideas?

Site: https://academyforlittlelearners.squarespace.com/

Password: 1234

CSS (offending code in red below):

////Tesimonial slider////
.white .user-items-list-carousel .list-item[data-is-card-enabled="true"] {
border-radius: 20px !important;
  background-color: #fff !important;
  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
  margin: 5px;
}

.white .user-items-list-carousel .user-items-list-carousel__arrow-icon-background{
  background-color: #39414d !important   
}

.user-items-list-carousel .list-item-content__title{
    font-size: 16px !important;
  line-height: 1.75;
}

.list-item-content__description{
  p{
    color: #45545B;
    font-size: 15px;
          font-weight: 500;
    text-transform: uppercase;
  }
}

.user-items-list-carousel__media-container{
  margin-top: -25%;
}

.user-items-list-carousel__gutter{
    overflow: visible !important;
}
.list-section-title{
  margin-bottom: 50px
}

Site URL: https://academyforlittlelearners.squarespace.com/

Hey there! I'm attempting to add a shape behind a mission statement on a site i'm working on, idea is that it would contain the text info but no matter how much I try I can't seem to get it completely right. It works on one size then when I resize my browser it's messed up. Can anyone help? Anyone have a better way to do this?

Site: https://academyforlittlelearners.squarespace.com/

Password: 1234

Code currently used for reference:

 ///shape behind mision statement///
section[data-section-id="61eeff225bcf5e5c96f867dc"] .sqsrte-large {
  background-image: url('https://static1.squarespace.com/static/61eefd7df4c9615d74606c8e/t/61fd56e32c4f24344f332f5b/1643992803306/AcademyforLittleLearners_2022_webbackgrounds-08.png');
 background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  padding: 120px;
  color: #000;
}

12 hours ago, tuanphan said:

It looks like Code Block caused problem. Can you send all code in Code Block (Code Block above Summary)?

<div class=services>
<h2 style="text-align:center", >Everyone should love the way they look in their photos –whether they’ll be used in their home or for their work.</h2>

    <a href="/wallart" type="button" class="button2" >Schedule a consultation</a>

Let me know if you need access 🙂

Site URL: https://academyforlittlelearners.squarespace.com/

Hi Squarespacers --

Found an old thread that provided some code to center an image and text within a section. Code worked great -- ONCE. Then stopped working when I tried to use it in other sections. I'm sure it's something I'm missing or maybe I'm pulling the wrong Page Section #? Can someone take a quick look for me?

https://academyforlittlelearners.squarespace.com/
Password: 1234

//center image///
div#page-section-61eefdf0e7877207133b2496>.row {
    display: flex;
    align-items: center;
}

Site URL: https://miriambulcherluxuryportraits.squarespace.com/home

I'm working on a site for a client and used a summary block on the homepage to show a mini portfolio... weird thing is when in the editor everything looks fine, when I save and test some images shift and look squished. I've never seen this before, anyone have an idea what is going on? How to fix?

I've eliminated ALL CSS and the issue persists so it's not a CSS issue (as far as I know). 

@taunphan

I got this code to work on one page of this site I'm working on but for some reason i can't seem to get it to work again -- 

https://miriambulcherluxuryportraits.squarespace.com/family-photography 
No password, it's public 

First section after header image

Am I pulling the wrong code?

///center image///
div#page-section-61f979f021b7cf00d9375931>.row {
    display: flex;
    align-items: center;
}