nicolusse88

Hi tuanphan, nevermind, I was able to find the solution 🙂

Hi, Does anyone know if there's any way to enable text next to the cart icon on mobile and not only on desktop? Thanks in advance.

Hello @tuanphan, Something's happening, but it's not perfectly fluid yet. I added the code, so you can take a look at it. Thank you very much for your help.

Hi, I am wondering if it is possible to replicate the fixed effect created here with Squarespace 7.1: https://www.tedsynnott.com/ Text is being stacked until the end of each section. My test page is www.maisonfievet.fr/test-1 Thanks for your help.

@tuanphanNo need to look into it anymore, I found the solution with .span-6 (or .span-5 if I want a smaller spacer).

@tuanphan, So sorry I forgot to add that I would like the sticky section to work without the spacing. Meaning that without it there would only be the images on the left and the text on the right. As of now, removing the spacer makes the code invalid. I juste removed the spacer so that you can see it doesn't stick anymore.

Hi @tuanphan, I'm having a little issue I believe is not super complicated to fix yet I'm stuck. On the following page I created a sticky block on the right part of the page: maisonmariet.fr/cabas. The code works because there is a spacer on the far right, so the page is divided in three columns. When I remove or reduce the spacer the following code doesn't work anymore: section[data-section-id="YOURID"]{ .span-4 { position: sticky; position: -webkit-sticky; top: 50px; Could you please help me understand the problem and fix it? Thanks in advance

Hi Tuanphan. No I didn't. On mobile and tablet it doesn't look right when the orientation is vertical

@tuanphanabsolutely maisonmariet.fr

Hello everyone, I've been able to replace the icon with text as well, but my text is stacked now and I can't find how to fix it. Here is the code: @media screen and (min-width:100px) { span.sqs-cart-quantity:before { content: "Panier ("; font-size: 1rem !important; } span.sqs-cart-quantity:after { content: ")"; } header#header svg.icon.icon--cart { display: none; } .header .header-actions-action--cart .icon { width: auto !important; } .icon-cart-quantity { position: static !important; font-size: 0.9rem !important; }} Thanks for your help!

@bangank36, here is the link: maisonmariet.fr/shop-articles-en-cuir-1. Never mind what I said about the 4 column design, it's actually not a smart solution. Although, now I'm experiencing issue with the tablet and mobile view because I can't get the 2 column design to work properly with the following code: @media screen and (max-width:960px) { div#page-section-??? .span-12 { .span-4 { width: 50% !important; float: left !important; } .span-3:nth-child(2n+1) { clear: left !important; }}}

Hi @tuanphan, What about a 2 column view on mobile and 3 column view on tablet (when your original design is 4 columns)? I've tried the following code, but only get the first half right: @media screen and (max-width:767px) { div#page-section-??? .span-12 { .span-3 { width: 50% !important; float: left !important; margin-bottom: 0 !important; } .span-3:nth-child(2n+1) { clear: left !important; }}} @media screen and (max-width:1200px) { div#page-section-??? .span-12 .span-4 { width: 33.333% !important; float: left !important; } .span-4:nth-child(2n+1) { clear: left !important; }}

@tuanphan, Thanks for your help. It works with .span-4 and not .span-3 though. I've tried and somehow it worked! @media screen and (min-width:768px) { div#page-section-61bcb9715a66be3ec0bee371 .span-3 { position: sticky; position: -webkit-sticky; top: 0; } }

Hi @tuanphan, I'm trying to update my code to make it work on a new page. As of now, here is what it looks like:@media screen and (min-width: 1024px) { .page-section:first-child .sqs-col-4 { position: -webkit-sticky; position: sticky; top: 50px; }} It works fine here:https://www.maisonmariet.fr/carnets Now, I'm trying to update it for a new layout:http://maisonmariet.fr/porte-cartes-1-1 Can you please help me fix it? Thanks in advance for your time.