KwameAndCo

It seems to be working now, is this resolved?

There is a ::before pseudo element being affected by the hover state: .tweak-global-animations-animation-type-flex .sqs-button-element--primary:not(input):hover::before, .tweak-global-animations-animation-type-flex .sqs-button-element--secondary:not(input):hover::before, .tweak-global-animations-animation-type-flex .sqs-button-element--tertiary:not(input):hover::before { clip-path: polygon(-2% -2%,102% -2%,102% 102%,-2% 102%); } To achieve your desired result you can just hide it and then apply your underline styling as normal .sqs-block-button-element--small.sqs-button-element--tertiary.sqs-block-button-element::before { display: none; } You might need !important.

Share the site and can you share a visual of the desired outcome? There are a few ways to interpret this request.

This would be a bit of a headache sitewide as you potentially have to manually assign classes to everything or use a wildcard plust !important. Most elements have the following inline CSS for transitions: So you'd essentially need to do something like: /*Squareskills change animation timing*/ .blockclass, .anotherblockclass { transition-duration: YOURTIMING!important; transition-delay: YOURTIMING!important; } In theory, for your use case it would probably be: #blockid .fluid-image-animation-wrapper { transition-duration: 1.2s!important; //slower slide in transition-delay: .3s!important; //increase slightly to stagger } With each subsequent block having a longer transition delay than the last. However, you may also want a media query so this is only on larger screens where they display inline as on mobile, where they are stacked, they will naturally fade in in sequence.

Can you share a link to the two pages of your site? As well as a visual (don't worry about quality, a doodle or ms paint example is fine) to help us understand exactly what you want to achieve? This will likely require javascript and I believe I have a plugin that might be what you're looking for - it's just pending release etc. If you send more details and it's a match, I can send you a free copy in return for some feedback as I'll be looking for a tester? If you're looking to DIY though, again, I'd imagine it's a case of needing to use javascript to create/embed an extra item to your products grid. I can give more info once you link and share more details. Are you comfortable with a bit of CSS/JS?

Happy to have helped.

Happy to help. You can use that order property to put them in whatever order you want with this code. Lowest number first. @dross can you mark the correct solution so others can easily find it?

The page background? The image background? You need to be specific. I'm going to assume background. Here's a tutorial:

This will create an image with a 2:3 aspect ratio because it is 100%:150% (width:height). Square would be .yourelement { padding-bottom: 100%!important; }

Cool designs! You can use the following. /*Squareskills product page reorder*/ #pdp .collection-content-wrapper { display: flex; flex-direction: column; } .collection-content-wrapper .ProductItem-additional { order: 1; } .collection-content-wrapper .reviewsSection { order: 3; } .collection-content-wrapper .productItem { order: 2; }

Send in a suggestion haha! Happy to help though!

It is simple but we need to see your site so we can give the correct code. For example, your issue isn't padding so a guess would have led to something like: #sectionid { padding-bottom: 0; } Or similar. Which won't do anything. The issue is your text/line height. So you can use #block-6e51bf5fa86fb5074371 h1 { line-height: revert; //might need an !important } Which will remove all space below the text and put it flush to the bottom of the section. This is why it is essential to provide as much detail and context as possible, as well as a site link, even for things that look simple.

Link to the page so we can inspect...

I'm actually working on a plugin for this. You've spurred me on to complete it and publish it. If you're interested in testing it and getting a free copy in exchange for a review and feedback, let me know.

Link to your website so we can inspect.

Yes. Link to the page and specify by how much and we can help.

You need to be more specific and share your website so we can actually look at it and help you. Especially as none of the images in the demo are more than 1200px wide.

Link to the website so we can see it in action and inspect.

Link to your website so I can take a look.

Link to site. I can take a look.

Here /*Squareskills center list grid item widows*/ ul.user-items-list-item-container.user-items-list-simple { @media screen and (min-width: 768px){ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; li.list-item { grid-column: span 2; } /*Position Last Item*/ li.list-item:nth-child(3n-2):last-of-type { grid-column-start: 3; grid-column-end: 5; } } @media screen and (max-width: 576px){ grid-template-columns: 1fr 1fr 1fr 1fr; li.list-item { grid-column: span 2; } /*Position Last Item*/ li.list-item:nth-child(3n-2):last-of-type { grid-column-start: 2; grid-column-end: 3; } } } Corrected.

@Lettercutter Does this help? If not, I actually wrote a plugin a while back that does this that I didn't release. I might be able to dig up and package it so I can put it out there and share.

Apologies, one of the media queries should have read "max" nort "min". HEre. *Squareskills center list grid item widows*/ ul.user-items-list-item-container.user-items-list-simple { @media screen and (min-width: 768px){ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; li.list-item:nth-child(3n-2) { grid-column-start: 3; grid-column-end: 5; } } @media screen and (max-width: 576px){ grid-template-columns: 1fr 1fr 1fr 1fr; li.list-item { grid-column: span 2; } li.list-item:nth-child(3n-2) { grid-column-start: 2; grid-column-end: 3; } } }

@HOMENCREATIVE No worries. Please mark it as the solution to help other users.

@HOMENCREATIVE I'm not seeing the code on the test page.