tuanphan

On 4/16/2024 at 7:37 PM, SarahBethGraphics said:

I'd love your help as well. I've tried many of the codes you've created for others, tweaking with my section IDs with no success.

Here is the page - https://haitiprojects1.squarespace.com/our-team , p/w "design"

I'm looking for all rows of staff to be centered on this page. Thank you.

This is code for Artisanat and Women’s Health Clinic. If it works, I will check other lists

@media screen and (min-width:992px) {
/* Artisanat */
section[data-section-id="661e6a24dd75df35b293a9e3"] .user-items-list-item-container>li:nth-child(n+1) {
    position: relative;
    left: calc(~"50% + 10px");
}
/* Womens Health Clinic */
.user-items-list-item-container[data-section-id="661e6ac1e057f947a10a6292"]>li:nth-child(n+1) {
    position: relative;
    left: calc(~"50% + 10px");
}
}

On 4/16/2024 at 6:43 PM, anazaragoza said:

Hi, this code is really useful. Thank you.

But I would need some help to make it working when my clients add a product to their cart directly from my sales page (not from the product page).

My sales page is:

https://anazaragoza-copywriter.com/sistema-revivir-web-muerta

Could that be possible? Anyone could help?

Thank you.

 

This is the code I was inserting on the product:

<!-- Redirect to Upsell Page after clicking on Add To Cart Button -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<script>
// /upsell-page is the default URL. To change it, replace /upsell-page with the required URL.
var upsellPageUrl = "/upsell-page"
////////////////////////////////
function redirectToUpsellPageHandler(wrapper){var addToCartButton=wrapper.querySelector(".sqs-add-to-cart-button"),productVariants=wrapper.querySelector(".product-variants");function isVariantInStock(){return productVariants.getAttribute("data-variant-in-stock")}function onClick(){(productVariants&&isVariantInStock()||!productVariants)&&setTimeout((function(){document.location.href=upsellPageUrl}),1200)}addToCartButton&&addToCartButton.addEventListener("click",onClick)}function redirectToUpsellPage(){var productPage=document.querySelector(".collection-type-products.view-item #productDetails, .collection-type-products.view-item .ProductItem-details"),productBlocks;productPage&&redirectToUpsellPageHandler(productPage),[].slice.call(document.querySelectorAll(".sqs-block-product")).forEach(redirectToUpsellPageHandler)}document.addEventListener("DOMContentLoaded",redirectToUpsellPage),window.addEventListener("mercury:load",redirectToUpsellPage);
</script>
<!-- end Redirect to Upsell Page after clicking on Add To Cart Button -->

 

You try disable Express Checkout and try code again

Of 3 input fields or button?

You can use this code to Website > Website Tools > Custom CSS to make image fullwidth

body#collection-5cf966e94729150001ae4249 .Index-page-content {
    max-width: 100% !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
div#block-yui_3_17_2_1_1713369537972_12877 figure {
    max-width: 100% !important;
}

We can use CSS code to move error up a bit, so both input - button will be align correctly.

Can you share link to page where you use newsletter? We can check easier

Can you disable this code? I think I can test new code, to move Search Bar into Navigation, so align problem will be easier to fix.

<script>
  /*Attribute search bar to header*/
  $(function(){
  let searchBlock = $('.fe-block-yui_3_17_2_1_1711999726209_7879 .sqs-block').attr('id','').addClass('header-search-bar');

  /*Place desktop search bar*/
  $(searchBlock).insertAfter($('.header-title-nav-wrapper'));

  /*Create & place mobile search link*/
  $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('[data-folder="root"] .header-menu-nav-folder-content'));
   })
</script>

You can change your code to this

@media screen and (min-width:992px) {
/*Card Flip Effect*/
#block-yui_3_17_2_1_1713154230326_30335, #block-yui_3_17_2_1_1713154230326_25756, #block-yui_3_17_2_1_1713154230326_27995, #block-yui_3_17_2_1_1713154230326_26815, #block-yui_3_17_2_1_1713154230326_31490{
  /* Default Setup */
  &.image-block .sqs-block-content{
    perspective: 2000px;
  }
  .design-layout-poster {
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  //Image
  .design-layout-poster .intrinsic{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  //Caption
  .design-layout-poster figcaption{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background: hsla(0,0%,100%,1);

    //Add if needed
    //border-radius: 20px;
  }

  /*Hover Effect*/
  &.image-block:hover .design-layout-poster {
    transform: rotateY(180deg);
  }
}
}

On 4/16/2024 at 11:43 AM, mike.bj said:

Having the same problem, very frustrating.

Recently a friend sent me this code, he said the code fixed problem, so you can try it.

Add the code to Website > Website Tools > Code Injection > Footer

<script type="module">
   if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
     document.addEventListener("touchstart", function(){});
   }
</script>

On 4/16/2024 at 3:32 AM, MMesanfe said:

Hello,

 

@tuanphan The code is great, but It only shows the first 2 images stacked and then the others weirdly slide in when scrolling to the left or right. also spacing underneath is way too much. Can you help to solve this please? Many thanks!!!

 

Remove the code & use this new code

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
    display: block !important;
    animation: unset !important;
}
.ProductItem-gallery-slides:before {
    padding: 0 !important;
}}

On 4/16/2024 at 9:24 AM, PenelopeS said:

I am still having issues with big blank spaces after markdown blocks. The solutions above fixed some pages, but not all of them.

The following pages have issues:

https://www.les-lilas.com/careers (for both desktop and mobile)

https://www.les-lilas.com/financial-aid (on mobile)

https://www.les-lilas.com/summer-camp-2024 (for both desktop and mobile)

https://www.les-lilas.com/jedi-committee (on desktop)

 

@tuanphan Not sure why your fix doesn't work everywhere. Is there something I'm not doing right?

Any help is greatly appreciated!

 

I see you added some code. DO NOT remove it. Then You can use this CSS code under for 4 pages

/* jedi */
.fe-65610bcd3d3649721ca4cb3f {
    grid-gap: 0px !important;
}
/* super camp 2024 */
.fe-65bd308197f3db77dbeb3042 {
    --row-height-scaling-factor: 0 !important;
}
/* financial aid */
.fe-657b8bd989d4ed22152d26a0 {
    grid-template-rows: repeat(11,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}
/* careers */
.fe-661daf53445fac49c0484143 {
    grid-gap: 0px !important;
}

You can use this CSS code under

div.header-nav-folder-content {
    top: unset !important;
    bottom: 30px !important;
}

You can open Universal Filter Documentation Page and click this on left side of page

On 4/16/2024 at 7:18 AM, El3n said:

Hello! Just giving this a bump to see if anyone's able to help please. @tuanphan if you do have a moment, I'd hugely appreciate any advice. Thanks so much 

You mean the kid video on section 2?

On 4/16/2024 at 5:46 AM, AmalJallouli said:

Hey , have you found a solution? If yes , please share it with us because i have the same problem.

And thanks in advance.

If you have html/css code, you can send, I will try testing it

On 4/15/2024 at 9:06 PM, pbjameson said:

Thanks  that bit of code did change the weight of the rollover underline on the dropdown items, but not the underline on the on-state item. So I tweaked some of the code @tuanphan shared above to cover that and got a decent result, but I don't really know what I'm doing:

.header-nav-folder-item--active .header-nav-folder-item-content {
    background-size: 1px 2px !Important;
}

(I changed the dropdown underline to 2 px because the 3 px was feeling cramped because it doesn't have the same distance from the type as the top nav items.)

There is an odd rollover "overlap" on the page in the dropdown that already has an underline (on-state) that I wish wasn't there, but it's functional:

https://www.mindmedicineministry.org/practical-classes
 

I see it looks fine now. Did you solve all problem? Or you need to increase underline weight on dropdown items?

Hi,

What is your site url? We can check problem easier

On 4/16/2024 at 1:49 AM, hansworks said:

Thank you so much! This also allows me to repeat this for other blocks as well, so super useful.

Another related aspect of the blog has come up: On https://playbook-nth.squarespace.com/social-services-referral-resources pw NTH2024 I am trying to make a link on each blog excerpt jump to each the blog entry in the same way that the title links to the entry. link would be blue text that changes to red on hover.

I have attached a sample image below using 'NYC 988..." entry as an example. Many thanks.

Password is incorrect now

Don't remove any code in your current code. Use this CSS code for header

header#header div, header#header {
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px;
    border-top: unset !important;
}
header#header {
    top: 30px;
}

With Footer, use this CSS code

footer#footer-sections, footer#footer-sections div {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
body {
    background-color: #6789d3;
}

On 4/16/2024 at 2:35 AM, Arielb333 said:

Honestly my dear tuanphan, all of my questions thus far have been easily answered by realizing I'm turning off/on capabilities that are programmed in.

 

But I am still running into this issue:

 

I have both my news section and blog section set up as blog pages. I cannot seem to get the author/date turned off on my news page without it also shutting it off on my blog page.

www.stemnetx.org

 

Is there anyway to only have it show up on my blog page?

You can use this code to Website > Website Tools > Custom CSS

body.collection-65a8255d13d55f6f1301cfd9 .blog-item-meta-wrapper {
    display: none !important;
}

On 4/16/2024 at 3:04 AM, Emmaline said:

@tuanphanHi, would you be able to update this code for me so it doesn't have a black bar on the side? My website is this. Thanks. https://www.emmalinecarter.com/

I don't see black bar. Can you take a screenshot?

On 4/16/2024 at 3:21 AM, Aaron_jag said:

This code did not work either. Is there anything else I need to do on squarespace to ensure it works?

Maybe you added code to wrong position. You can move my code to top of CSS box and don't edit anything.

If it still doesn't work, you can send all current code in CSS box, I can check easier

On 4/16/2024 at 2:02 AM, hansworks said:

It seems that the accordion content has not changed behaviour when i try to edit. Would it be possible to share a screen shot of how it is working when you add the code injection?

The code will move List (Text Block) in to Accordion Content. If you don't want this, we can use custom plugin to add accordion, so you can add Text Block inside Accordion easier.

I see you have a Code Block with <u> tag on top. So I guess the reason is that one of your u tags is missing the closing tag, so it will wrap all the text below the Code Block into an underline.

You can send all code in your Code Block, we can check and correct your code

On 4/15/2024 at 11:55 PM, nitzin said:

Do you know if there is anyway to fix the navigation on mobile?

raccoon-vuvuzela-kxxa.squarespace.com
Password: SMJ

What is problem on mobile?

Hi,

What is your site url? We can check problem easier