elschwartzo

did we ever figure out how to remove the ghosted square edges in the background to this?

I have a site i am working on. Its pulling a plug-in, into an iframe. I am unable to style the look inside the iframe with CSS. However, when I do an "inspect" in chrome, I see the CSS and customize it there. When I put the new code into my CSS panel it doesn't work. Do I have to do something special because its in an iframe. Here is the CSS: https://smilodon-capybera-7eyw.squarespace.com/ password to the site is: tyz1! .b-root .bubble-element.baTaLaBaO { border-style: solid; border-width: 1px; border-radius: 5px; -moz-border-radius: 5px; font-size: 16px; font-weight: 400; color: var(--color_text_default); padding: 24px 60px 24px 30px; opacity: 1; align-self: center; justify-self: start; min-width: 0; min-height: 0; width: calc(100% - 0px); height: calc(100% - 0px); margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; z-index: 0; }

Instead of custom coding it, why dont you just create two separate lists stacked on top of one another?

Hi, I supposed you can just manually center them as objects on the fluid grid. If you are doing a simple list item, they will default to left alignment. Some custom code in the page header you can use for centering is as follows: Just replace the section ID with your specific section ID. <style> /*center elements - cane*/ section[data-section-id="6553fb75f983e40f4b5ed4e2"] .user-items-list-item-container { display: flex !important; flex-wrap: wrap !important; align-items: start !important; justify-content: center !important; } section[data-section-id="6553fb75f983e40f4b5ed4e2"] .user-items-list-item-container .list-item { width: 25% !important; min-width: 260px !important; } </style>

Hi, Entering this conversation. I've got this to work. But have one question: Is there a way to add a CSS transition effect to the image so they fade into one another? I cannot seem to get that to work. Any advice is appreciated.

Hi, I've created a simple list. I've added some custom code, to make the image in the list a rollover image. The only thing I cannot figure out is how to make the rollover images transition smoothly with a CSS fade effect. Below is my code without the transition CSS. <style> /* Rollover images */ li:nth-child(1):hover img { content: url(https://cdn.pixabay.com/photo/2021/12/23/13/25/flower-6889331__480.jpg); } li:nth-child(2):hover img { content: url(https://cdn.pixabay.com/photo/2022/01/18/03/16/deer-6946129__340.jpg); } li:nth-child(3):hover img { content: url(https://cdn.pixabay.com/photo/2018/07/16/04/43/tea-3541205__340.jpg); } </style> You can see the page here: https://caper-synthesizer-8pat.squarespace.com/. pass: test Any advice on how to code the CSS transition effect here is appreciated.

for some reason this doesnt seem to carry over to mobile. any advice?

Hi, Question about fluid engine and animation styles. It seems prior to fluid engine we could go into each block and change the animation style. As of now in fluid engine, it basically seems as if we are stuck with the site wide animation. I'm wondering if i am missing something here and if there is a way to change the animation for each section in fluid engine. Any advice is appreciated.