clevermissfox
Explore posts from serversKPCKevin Powell - Community
•Created by Kida Sacheil on 12/15/2024 in #front-end
Dealing with content on a moving colored background
I couldn’t figure out how to do so with a colour plus white 🤦🏻♀️
7 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
And of course kPow playlist
https://youtube.com/playlist?list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998&si=gQrgkKcSzbDTU4fX
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
Also this playlist is a great introduction. https://youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG&si=xatFjMAEw75kbXz3
only a few things have changed since this was made
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
If you don’t need overlapping content , you can use one name for the grid-row-start and for the grid-row-end but to use grid-template-areas and also have your content overlap, you need two different names.
You can also use named grid-lines.
Watching some kPow videos and this css tricks article are great resources
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
But there are three rows in the grid area
“Image image image”-row 1
“Image-stop text .” -row 2
“. Text . “ -row 3
* the
. Represent empty cells. And on your travels look up “implicit” and “explicit” rows. I’ve hijacked this thread enough😆 just saw red when I saw the “negative margins” comment and typed faster than my logical brain could think42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
So there’s a name for the start and a name for the end. Can if there were ten rows , there would be a grid -row-start value and a grid-row-end value
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
There’s three rows in the grid
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
That’s the name of the grid-area where the image should end. It’s like
grid-row-start: image;
grid-row-end: image-stop;
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
Also turning on the grid visualizer in the dev tools (right click on the element -> inspect -> then there’s a little tab that says “grid”, highlight/click on that) to see the grid visually
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
Muscle memory and repetition is how you learn
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
Try typing out the properties on your code pen (versus pasting)
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
@Chris Bolson has a great example ready to go that he was kind enough to allow me to share so I don’t have to deal with codepen x mobile 😆
This is one of the ways you can accomplish the layout in question
https://codepen.io/cbolson/pen/RNbKrPx
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
I’m on mobile at the moment but if you or OP set up a codepen with the elements to overlap , one of us can help you with the grid
42 replies
KPCKevin Powell - Community
•Created by Helgi on 12/15/2024 in #front-end
div question
Not a proper one. Often creates more problems than it solves. We have better layout tools available now so there are better options than negative margins. Grid would be perfect and very simple for this layout
42 replies
KPCKevin Powell - Community
•Created by Kida Sacheil on 12/15/2024 in #front-end
Dealing with content on a moving colored background
https://codepen.io/Miss-Fox/pen/KwPNOow
alternative stacking method
7 replies
KPCKevin Powell - Community
•Created by Kida Sacheil on 12/15/2024 in #front-end
Dealing with content on a moving colored background
Blend modes!! Eg
mix-blend-mode 7 replies
KPCKevin Powell - Community
•Created by althepal78 on 12/13/2024 in #front-end
using php to make a asnc fetch then pass the results if good to js so I can hide the api_key
Is this in wordpress ?
15 replies
KPCKevin Powell - Community
•Created by chikanlegbees on 12/13/2024 in #front-end
Scrollbar and overflow-y-auto issue
Yay! If you end up needing more help, please put the relevant code into a codepen with react and tailwind , or codesandbox
8 replies
KPCKevin Powell - Community
•Created by Chrislizardc on 12/12/2024 in #front-end
Having CSS Issue where putting margin in inner divs moves my whole component
4 replies
KPCKevin Powell - Community
•Created by snxxwyy on 12/8/2024 in #front-end
display contents use cases
Yeah I'm intrigued by it too. I think sometime last year i requested a breakdown in #youtube-topic-suggestions
Feom what I understand it's kind of used on a wrapper you want to act as a phantom. You need the wrapper for whatever reason but you want it children to stay in the normal flow. The link above goes right to the display:content part of the video btw so you won't have to search through it and watching it is the first time I've even kind of understood what it does
19 replies