clevermissfox Comments - Answer Overflow

clevermissfox

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers

•Created by Dev_HK on 11/17/2024 in #front-end

i wanna know if i'm doing css responsive wrong

Only seven breakpoints is wild 😆 can you link a codepen ? I can damn near guarantee that whatever layout you’re working on could be achieved responsively with 0-2 breakpoints

4 replies

KPCKevin Powell - Community

•Created by CDL on 11/13/2024 in #resources

Git tutorial from Primeagen/Bootdev

Had come across a very clear and concise vid about git recently. It’s nowhere near a 4 hour deep dive but spells out the basics https://youtu.be/9ToMEN_Hys0?si=g5EXgJKkcL-ia-2D

10 replies

KPCKevin Powell - Community

•Created by baba on 11/16/2024 in #front-end

Facing Issues with @container query or container-type

I’m not clear on the problem but from what I see You are setting a lot of fixed widths and heights. Using inset instead so that the pseudo element matches its relative parent , like using height auto. Can you explain the goal/what you want from the different elements that you’re not getting? And try taking off the width and heights from the pseudo elements , give them a bright background or outline so you can see them clearly and experiment with using inset:0, inset-inline: 0 or inset-block:0. Inset:0 is the same as setting top, right, bottom, left to 0. Inset-inline:0 is the same as setting left and right to 0; inset-block:0 is the same as setting top and bottom to 0. Once you understand that behaviour , try inset:1rem them inset:-1rem; etc. make sure to take off any sizing properties from these pseudo elements first though and that position: absolute is set

2 replies

KPCKevin Powell - Community

•Created by Xan on 11/17/2024 in #front-end

Nesting media queries in non-media query

Whoops I didn’t know nested media queries are not well supported ! I have some refactoring to do…

16 replies

KPCKevin Powell - Community

•Created by FROSTYTIPS on 11/15/2024 in #front-end

Scrolling to an element on the same page - screen size issues

Css scroll-margin and scroll-padding. I’m not sure of your layout or why different screen sizes would affect it. Scrolling to 1rem above of the section will be 1rem no matter the screen size of the section

3 replies

KPCKevin Powell - Community

•Created by Faker on 11/15/2024 in #front-end

Cookies, Sessions and Tokens

I’ve been rolling around in this space trying to understand tokens and cookies and oauth2 myself lately. I’m curious how the recent changes browsers have made to third party cookies affect developers. I’m curious how it used to operate and how the changes affected that , how devs had to alter their approach

106 replies

KPCKevin Powell - Community

•Created by Ullas Kunder on 11/14/2024 in #front-end

need help with radial reveal animation like example

Im not seeing a smooth animation , its choppy because Background property is not animatable (its called a discrete property) which is the problem , use @property for the values you need to update and animate those not the whole background-image declaration. Let me find you a KPow video that will show you an example. You'll want @property with a <length-percentage> or you could also use an <angle>

@property --property-name {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 37%;
}

...background-image: radial-gradient(circle at 100%,  #000 var(--property-name), #0000 ....etc
}
@keyframes animateProp {
0%, 100% {--property-name: 66%; }
20% { --property-name: 72%;}
...etc

@property --property-name {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 37%;
}

...background-image: radial-gradient(circle at 100%,  #000 var(--property-name), #0000 ....etc
}
@keyframes animateProp {
0%, 100% {--property-name: 66%; }
20% { --property-name: 72%;}
...etc

https://youtu.be/-VOUK-xFAyk?si=ZUFFra_DAKc-Yh8I

7 replies

KPCKevin Powell - Community

•Created by Lexi on 11/15/2024 in #front-end

CSS Grid not resizing on media query with new grid-template-columns

Btw instead of having to redeclare all the grid columns and grid rows in the media query, you can give the children grid-areas and save yourself a lot of grief. Make them more meaningful names but for this example I'll just something generic.

.myGrid {
  grid-template-columns: [full-start] 1fr [breakout-start] 1fr [content-start] 1fr [content-end] 1fr [breakout-end] 1fr [full-end];

& .full { grid-area: full;}
 & .breakout {grid-area: breakout;}
 & .content { grid-area: content;}

@media (width < 600px) {
  grid-template-columns: [full-start] 1em [breakout-start] minmax(1em, 1fr) [content-start] 1fr [content-end] minmax(1em, 1fr) [breakout-end] 1em [full-end]
}
}

.myGrid {
  grid-template-columns: [full-start] 1fr [breakout-start] 1fr [content-start] 1fr [content-end] 1fr [breakout-end] 1fr [full-end];

& .full { grid-area: full;}
 & .breakout {grid-area: breakout;}
 & .content { grid-area: content;}

@media (width < 600px) {
  grid-template-columns: [full-start] 1em [breakout-start] minmax(1em, 1fr) [content-start] 1fr [content-end] minmax(1em, 1fr) [breakout-end] 1em [full-end]
}
}

Instead of redeclaring all the children's grid-column or grid-row, you just redeclare the grid-areas in your grids

47 replies

KPCKevin Powell - Community

•Created by snxxwyy on 11/15/2024 in #front-end

inset behaviour

Btw inset goes in order: top right bottom left. Same as margin, padding, and border when they have 4 values. When it's 3 values it's top, left&right(inline), bottom When it's 2 values, it's top&bottom(block) and left&right(inline) You can also use inset-inline and inset-block if that's easier to grasp (or margin-inline/margin-block , padding-inline/padding-block, border-inline/border-block).

85 replies

KPCKevin Powell - Community

•Created by Dev_HK on 11/14/2024 in #front-end

why isn't overflowX:hidden isn't being applied when toggling device toolbar

Please link your code , preferably in codepen

9 replies

KPCKevin Powell - Community

•Created by Ullas Kunder on 11/14/2024 in #front-end

need help with radial reveal animation like example

Theres probably a few approaches for this. Could try using it as mask and a registered custom property @property to transition the radial gradient

7 replies

KPCKevin Powell - Community

•Created by ℳ𝒽𝓮𝓮𝓉𝓾 ✔ on 11/12/2024 in #front-end

Radial Progressbar w/Rounded Square Caps?

Could look through something like svgrepo, but easiest would probably be to make your own in a vector software like Figma or illustrator or https://editor.method.ac/

11 replies

KPCKevin Powell - Community

•Created by ℳ𝒽𝓮𝓮𝓉𝓾 ✔ on 11/12/2024 in #front-end

Radial Progressbar w/Rounded Square Caps?

Use an SvG in the shape and aspect ratio you want. You can use the svg directly or use as a mask on something like a pseudo element

11 replies

KPCKevin Powell - Community

•Created by vinicius! on 11/9/2024 in #front-end

CSS Custom Props Good Practice

Usually I’ll only use inline styles for this if it needs to be dynamically updated on a bunch of items from JavaScript, for example a JavaScript loop if not using SCSS. Eg looping through and setting a hue or degree for positioning or a view-transition name etc. For your example , I would just define the different —_hue in css

:nth-child(2 of .card) {
—_hue:50;
}

:nth-child(3 of .card) {
—_hue: 155;
}

:nth-child(2 of .card) {
—_hue:50;
}

:nth-child(3 of .card) {
—_hue: 155;
}

4 replies

KPCKevin Powell - Community

•Created by Zempai on 11/7/2024 in #front-end

CSS – managing grid-template-columns sizes with classes

I would also recommend using grid-areas or named grid lines ; I prefer this so you don’t have to override every child’s grid-column in a media query , you just override the grid declaration. A way to implement this:

.grid-container {
  display: grid;
  grid-template-columns: 
    [full-start] minmax(1em, 1fr) [breakout-start] minmax(1em,20px) [content-start] minmax(min(100%, 700px), 1fr) [content-end] minmax(1em, 20px) 
[breakout-end] minmax(1em, 1fr) [full-end] ;
}

.grid-item.content {grid-area: content}
.grid-item.breakout {grid-area: breakout;}
.grid-item.full-width {grid-area: full;}

.grid-container {
  display: grid;
  grid-template-columns: 
    [full-start] minmax(1em, 1fr) [breakout-start] minmax(1em,20px) [content-start] minmax(min(100%, 700px), 1fr) [content-end] minmax(1em, 20px) 
[breakout-end] minmax(1em, 1fr) [full-end] ;
}

.grid-item.content {grid-area: content}
.grid-item.breakout {grid-area: breakout;}
.grid-item.full-width {grid-area: full;}

then instead of having to override any declarations of grid-column: 2 / 4; on every child you declared it on, you would just override the grid-template-column on one selector . Not so applicable with this example that basically has one main content column but if you have more columns in the content area it makes it much easier to work with . Otherwise you’re hunting down every grid-column declaration and rewriting it.

5 replies

KPCKevin Powell - Community

•Created by Ayomide on 11/9/2024 in #front-end

Flex wrap issue

Don’t forget to use semantic html ; from your css it looks like you’re using a div for these elements (.oAuth-logins div); instead use a

<button>
  <i class=“fab fa-facebook-f” aria-hidden=“true”></i> Facebook
</button>

<button>
  <i class=“fab fa-facebook-f” aria-hidden=“true”></i> Facebook
</button>

Has a ton of the interactivity for a11y baked in.

9 replies

KPCKevin Powell - Community

•Created by clevermissfox on 11/9/2024 in #front-end

Testing workflow

Gotcha , will add it to the list

15 replies

KPCKevin Powell - Community

•Created by clevermissfox on 11/9/2024 in #front-end

Testing workflow

Windows oS? Like the system font size ? Or windows like browser windows?

15 replies

KPCKevin Powell - Community

•Created by clevermissfox on 11/9/2024 in #front-end

Testing workflow

I had tested with increasing browser font size OR zooming but until our last convo about this, hadn’t tested both increased font size AND zoomed screen 🤗

15 replies

KPCKevin Powell - Community

•Created by naiden on 11/6/2024 in #front-end

Help with a CSS selector that targets all elements that have "aria-*" attributes

*[aria-*] {
  /* Your styles here */
}

*[aria-*] {
  /* Your styles here */
}

24 replies

Gaming

Programming