Daryl M
Daryl M
PostsComments
KPCKevin Powell - Community
Created by Daryl M on 6/28/2024 in #front-end
Stop focus to the embedded form
You're right - it will be too late.
9 replies
KPCKevin Powell - Community
Created by Daryl M on 6/28/2024 in #front-end
Stop focus to the embedded form
I ended up adding display: none; to that iframe. Then add display: block; after the page loads.
9 replies
KPCKevin Powell - Community
Created by Daryl M on 3/7/2024 in #front-end
position:fixed; scroll-y
Thank you so much, @MarkBoots!
8 replies
KPCKevin Powell - Community
Created by Daryl M on 3/7/2024 in #front-end
position:fixed; scroll-y
header{max-height: 100svh;} didn't help
8 replies
KPCKevin Powell - Community
Created by Daryl M on 3/7/2024 in #front-end
position:fixed; scroll-y
No description
8 replies
KPCKevin Powell - Community
Created by Daryl M on 3/7/2024 in #front-end
position:fixed; scroll-y
@clevermissfox sure, here it is: https://codepen.io/malibiran/pen/wvZKQrj Please resize your browser size. Thanks!
8 replies
KPCKevin Powell - Community
Created by Daryl M on 1/23/2024 in #front-end
Media Query in Safari iOS
No description
24 replies
KPCKevin Powell - Community
Created by Daryl M on 1/23/2024 in #front-end
Media Query in Safari iOS
Ok, this is the final solution. For those who want to be specific for each iPhone device, you can use device-width: and device-height:. It's also a good practice to include -webkit-device-pixel-ratio: if you're targeting the Safari browser. Example below: 
@media only screen 
and (device-width: 375px)
and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
 .iphone-12-mini-13-mini\:bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: greenyellow !important;
  }
}
@media only screen 
and (device-width: 375px)
and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
 .iphone-12-mini-13-mini\:bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: greenyellow !important;
  }
}
24 replies
KPCKevin Powell - Community
Created by Daryl M on 1/23/2024 in #front-end
Media Query in Safari iOS
You're on the wrong thread mate
24 replies
KPCKevin Powell - Community
Created by Daryl M on 1/23/2024 in #front-end
Media Query in Safari iOS
Just got back here with the answer. @clevermissfox you're correct. The answer @media only screen and (min-device-width: 360px) and (max-device-width: 780px) and (-webkit-device-pixel-ratio: 3) { /* Styles for iPhone 12 Mini */ } There's also an article on CSS-Tricks regarding this but they haven't updated the solutions yet for latest iPhone models. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
24 replies
KPCKevin Powell - Community
Created by Daryl M on 6/19/2023 in #front-end
Pseudo-class: Letter-by-letter Animation
🙏
15 replies
KPCKevin Powell - Community
Created by Daryl M on 6/19/2023 in #front-end
Pseudo-class: Letter-by-letter Animation
I'll take it from here.
15 replies
KPCKevin Powell - Community
Created by Daryl M on 6/19/2023 in #front-end
Pseudo-class: Letter-by-letter Animation
Thank you so much!
15 replies
KPCKevin Powell - Community
Created by Daryl M on 6/19/2023 in #front-end
Pseudo-class: Letter-by-letter Animation
🤯
15 replies
KPCKevin Powell - Community
Created by Daryl M on 6/19/2023 in #front-end
Pseudo-class: Letter-by-letter Animation
I can't find the right JavaScript selector for this. Can you please give me a clue?
15 replies
KPCKevin Powell - Community
Created by Daryl M on 3/1/2023 in #front-end
Button gradient background missing on mouseover
[SOLVED] - by adding ::after pseudo element. Thanks for the clue @daswolle
7 replies
KPCKevin Powell - Community
Created by Daryl M on 3/1/2023 in #front-end
Button gradient background missing on mouseover
I updated the CSS and yeah, it's confirmed that the ::before element overlaps the background on mouseover
7 replies
KPCKevin Powell - Community
Created by Daryl M on 3/1/2023 in #front-end
Button gradient background missing on mouseover
a:hover:before {
  -webkit-transform: translateY(-3px);
}
a:hover:before {
  -webkit-transform: translateY(-3px);
}
This didn't fix the problem
7 replies
KPCKevin Powell - Community
Created by Daryl M on 3/1/2023 in #front-end
Button gradient background missing on mouseover
Makes sense
7 replies
KPCKevin Powell - Community
Created by Daryl M on 3/1/2023 in #front-end
Button gradient background missing on mouseover
I ended up doing the gradient stroke with box-shadow hack.
7 replies