BriGuy

Hi Ninahans:
This is for 7.0 - change the hex color #000000 below to the color you want.

 
// Stretchy Navigation Line // .Header-nav-item::after {   content: '';   background: #000000; //color   height: 2px; //thickness   width: 0;   display: block;   margin-top: 2px !important;   transition: width 1s; //animation speed   margin: 0 auto; } .Header-nav-item:hover::after {   width: 100%; }  

This wouldn't happen if you set the image to align to the top of the block.
Maybe not the best solution for your case but... you can stop the accordion stretching the grid row height, by making the accordion block larger so that instead of stretching the grid it expands into the space you have given it.
That technique also works well for getting the accordion to expand upwards; give it extra space in the height and align the accordion in it's block to the bottom.

You can wrap the code like this:
 
#block-yui_3_17_2_1_1673123629170_6403 { li:nth-child(1) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ width: 150px; /* image height */ background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9dec3f500a77c50405f5c/1673125571092/scale.png) ; background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } li:nth-child(2) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ width: 150px; /* image height */ background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9ec35733e724e83427a1b/1673129013381/Schedule.pnghttps://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9dec3f500a77c50405f5c/1673125571092/scale.png) ; background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } li:nth-child(3) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ width: 150px; /* image height */ background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9ed1e3076140ca487fec6/1673129246797/ShipmentTracking.png) ; background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } } Let me know how it goes.
 

For the love that is all of humanity, pleaaaaaaaaaaaaaaseeeee .... is there ANY WAY to apply an Automatic Discount by BOTH "Orders Over" along with "Products by Category"?! I really need to set an automatic discount where if a customer buys any products of a specific category and orders over a certain amount that they get a discount. Is there any code? Plugin? ANYTHING to make this happen. Why SS does not make this happen is beyond me!!

Hey all, I've figured out that it's only a bug with the fluid engine. Until they fix it, what you can do is create a new section just for your accordion needs. if you scroll down the section templates though, at the bottom there is a link for classic editor templates. 
If you use the classic editor just for the section that you want to use the accordion in, it wont expand your content beside it.

Site URL: https://blue-lily-kr8r.squarespace.com/omnipathology
Hi Everyone,
So, I am using Fluid Engine to build out a site and I'm having an issue which may be a bug? 
Go here:
https://blue-lily-kr8r.squarespace.com/omnipathology
Password:
Omni
When you go on the page click open the accordion. The image block I have next to it moves with the opening of the accordion! Ahhhh!!!!!
I've stripped out all of my custom code and still having the issue! AHHH! 
Anyone have any thoughts as to why this is happening? Suggestions?
Thanks,
-Brian-

Wow. The arrogance runs high. 
Sure. What would we designers know about design when they have a complete mess of a bug that hinders design.
I have no words...

I haven't seen a work around this bug yet. Still looking. But SS Dev Team should have RESOLVED known FE bugs before going live with it to the public. Who's running the show over there?! 

Hi Caterina, I just checked out your site. How did you go about doing this? I need to do this too. You're help would be greatly appreciated. Thanks!

Wow! I too am having an issue with Search not functioning and came to the board to find out why and now I see this has been going on for about 2 years. Bloody hell! What is with the people behind SS??? Stop everything and fix the damn issue already!

Hi Tuanphan, yes the image is aligned up top. 
Also, thank you Paul2009 for letting me know that this is indeed a bug. I will report it again through Customer Care as you have recommended. 
I must say that this bug is ridiculous as it hinders my design. They have had 3 months to address this. If they knew about it in April why didn't they fix the issue before releasing it to us in Circle? SMH.

Site URL: https://blue-lily-kr8r.squarespace.com/omnipathology
Hi Everyone,
So, I am using Fluid Engine to build out a site and I'm having an issue which may be a bug? 
Go here:
https://blue-lily-kr8r.squarespace.com/omnipathology
Password:
Omni
When you go on the page click open the accordion. The image block I have next to it moves with the opening of the accordion! Ahhhh!!!!!
I've stripped out all of my custom code and still having the issue! AHHH! 
Anyone have any thoughts as to why this is happening? Suggestions?
Thanks,
-Brian-

Hey, thanks @sayreambrosio!! Glad you like it! 😄

Hi Tuanphan, yes the image is aligned up top. 
Also, thank you Paul2009 for letting me know that this is indeed a bug. I will report it again through Customer Care as you have recommended. 
I must say that this bug is ridiculous as it hinders my design. They have had 3 months to address this. If they knew about it in April why didn't they fix the issue before releasing it to us in Circle? SMH.

I guess this problem should appear on both Fluid Engine + Classic Editors.
Try align image to top?

I can confirm that this is a known issue with accordions on Fluid Engine. It was reported and acknowledged in April 2022, but I recommend that you report it again through Customer Care.
As a workaround, you can use a Classic page section instead of a Fluid Engine section.

You are awesome Creedon!!! Simply awesome!

Add the following to Design > Custom CSS.
/* begin customer account sign in link change, uses LESS syntax */ #mainNavigation, #mobileNavigation { display : flex; .user-account-link { order : 1; .unauth { visibility : hidden; &::before { content : 'Log In'; visibility : visible; } } } } #mobileNavigation { flex-direction : column; .user-account-link { margin-top : 1em; order : 1; } } @media only screen and ( min-width : 641px ) { body:not( .force-mobile-nav ) .nav-wrapper nav > div:last-child > a { padding-right : 1em; } } /* end customer account sign in link change */ This is for v7.0 using the Bedford template family and specific to the poster's need.
Let us know how it goes.

I have updated my code post.

For the love that is all of humanity, pleaaaaaaaaaaaaaaseeeee .... is there ANY WAY to apply an Automatic Discount by BOTH "Orders Over" along with "Products by Category"?! I really need to set an automatic discount where if a customer buys any products of a specific category and orders over a certain amount that they get a discount. Is there any code? Plugin? ANYTHING to make this happen. Why SS does not make this happen is beyond me!!