londonpete_harrison
KPCKevin Powell - Community
•Created by londonpete_harrison on 9/28/2024 in #front-end
Odd number of cards
If I have a 2 column layout with an unknown number of cards, how would I make the last one spans the two columns if the space is empty?
Going a step further, if as in some of Kevin
s tutorials I had some feature` cards that span 2 columns, how would I ensure the last card spans 2 columns if there is space?
Many thanks11 replies
KPCKevin Powell - Community
•Created by londonpete_harrison on 9/14/2024 in #front-end
Using nth-child() ibn calc()
I think I saw one of Kevin
article--stagger-delay>:nth-of-type(1) { --wpe-animation-delay-x: var(--ph-animation-delay); }
article--stagger-delay>:nth-of-type(2) { --wpe-animation-delay-x: calc(var(--ph-stagger-step) + var(--ph-animation-delay)); }
article--stagger-delay>*:nth-of-type(3) { --wpe-animation-delay-x: calc(2 * var(--ph-stagger-step) + var(--ph-animation-delay)); }
to article--stagger-delay>*:nth-child(n) { --wpe-animation-delay-x: calc(n * var(--ph-stagger-step) + var(--ph-animation-delay)); } so trying to base the delay on n* the article I hope this makes sense
s videos using nth-child in calc operations ( I havent been able to find it) but I`m not sure of the syntax.
I have a list of articles with the same class specified via a custom property, and a calc based on the nth-of-child, but instead of hard coding for each article I want it more automated e.g.
from
article--stagger-delay>* {
animation-delay: var(--ph-animation-delay-x) !important;
animation-timing-function: var(--ph-animation-timing-function) !important;
}
article--stagger-delay>:nth-of-type(1) { --wpe-animation-delay-x: var(--ph-animation-delay); }
article--stagger-delay>:nth-of-type(2) { --wpe-animation-delay-x: calc(var(--ph-stagger-step) + var(--ph-animation-delay)); }
article--stagger-delay>*:nth-of-type(3) { --wpe-animation-delay-x: calc(2 * var(--ph-stagger-step) + var(--ph-animation-delay)); }
to article--stagger-delay>*:nth-child(n) { --wpe-animation-delay-x: calc(n * var(--ph-stagger-step) + var(--ph-animation-delay)); } so trying to base the delay on n* the article I hope this makes sense
1 replies
KPCKevin Powell - Community
•Created by londonpete_harrison on 9/6/2024 in #ui-ux
A very stylised design (I wish I knew where to start with something like this)
I know it's rather over the top, but this site has a very classy if not garish menu https://www.patriziagarganti.com/
2 replies
KPCKevin Powell - Community
•Created by londonpete_harrison on 9/4/2024 in #front-end
Working with Vertical Headers
I know they're a bit 'old-hat', but I working on a site that needs a lot of vertical space, and it's probably back in the 90's when I last used a vertical header, so a bit of nostalgia isn't so bad!
I'm trying to make my workflow as normal as possible, so I set my <main> element to have a left margin the same width as the header, hoping that from then on, any elements I add will automatically be shifted right and things like percentages etc will all work. But some things aren't so good, some elements look better aligned centre across the full page including the header, others need to be centred in the page excluding the header.
What advice would you give for a setup like this? Is it a candidate for container queries/units?
6 replies
KPCKevin Powell - Community
•Created by londonpete_harrison on 8/29/2024 in #front-end
Change the order of <Form> elements
I'm working with a wordpress site, and don't have much control over the elements in a form, except, I can wrap an element or group of elements in a div, and can set the classes and id's of the elements.
Some of the input elements are grouped inline, and some block.
I want to move an element from it's rendered position to be coming between other elements later in the form.
Can I do this by using css order? I think that css order only works with flexbox, in which case I'll have to set some elements as flex-direction: column and some as flex-direction: row.
Am I on the right path?
9 replies