Aditya Kirad Posts - Answer Overflow

Aditya Kirad

Explore posts from servers

RReactiflux DIAdiscord.js - Imagine an app KPCKevin Powell - Community SIASapphire - Imagine a framework PPrisma TTCTheo's Typesafe Cult

Posts Comments

KPCKevin Powell - Community

•Created by Aditya Kirad on 6/12/2024 in #front-end

background individual property not working similar to background shorthand

  background: 
    radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#ffa516);

  background: 
    radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#ffa516);

background-image: 
  radial-gradient(farthest-side,#ffa516 94%,#0000),
  conic-gradient(#0000 30%,#ffa516);
background-position: top center;
background-size: 8px 8px;
background-repeat: no-repeat;

background-image: 
  radial-gradient(farthest-side,#ffa516 94%,#0000),
  conic-gradient(#0000 30%,#ffa516);
background-position: top center;
background-size: 8px 8px;
background-repeat: no-repeat;

I don't why they are not giving the same results here are the jsfiddles where these properties are being used https://jsfiddle.net/nmf1t3v8/ https://jsfiddle.net/q6kvw290/

2 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 12/13/2023 in #front-end

px and accessibility

Hey folks I came across this component library by radix called @radix-ui/themes they use px for most of the css property like font-size isn't px bad for accessibility or am I missing something

3 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 12/11/2023 in #front-end

browser not understanding css correctly

31 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 10/16/2023 in #front-end

problem when using javascript to get the actual viewport height

hey folks this is my css

main>div {
  height: 100vh;
  height: calc(var('--vh', 1vh) * 100);
}

main>div {
  height: 100vh;
  height: calc(var('--vh', 1vh) * 100);
}

and this is my javascript

  window.addEventListener('resize', () => {
    const vh = window.innerHeight * 0.01;

    document.documentElement.style.setProperty('--vh', `${vh}px`);
})

  window.addEventListener('resize', () => {
    const vh = window.innerHeight * 0.01;

    document.documentElement.style.setProperty('--vh', `${vh}px`);
})

to get the actual viewport height but when I do scrolling I get a janky behaviour

29 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 8/21/2023 in #front-end

carousel not taking height automatically.

hey folks here is my pen. https://codepen.io/adityakirad/pen/zYyxNMN in this I have to explicitly set the carousel container height which I don't want I want it to take space automatically

9 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 8/1/2023 in #front-end

need help in switching `px` based media query to `em` based media query

Hey, folks after finding out that em is better unit to use with media-query instead of px I have decided to switch from px to em based mediq query. So, lets say I have this media query in px

@media (max-width: 868px) {
  .......
}

@media (max-width: 868px) {
  .......
}

so, can I write it like this in em assuming user root font-size is 16px

@media (max-width: 54.25em) {
  .......
}

@media (max-width: 54.25em) {
  .......
}

44 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 7/30/2023 in #front-end

how to visually hide a text for people which are not screen reader

So in this video of kevin https://www.youtube.com/watch?v=HbBMp6yUXO0&t=86s&pp=ygUiY3JlYXRpbmcgYSByZXNwb25zaXZlIG5hdmJhciBrZXZpbg%3D%3D he created a button and added the text menu and a background-image to it and after doing this he added the sr-only class due to which for normal people the text was hidden but we can still the background-image and text was still there for screen readers but in this video he didn't show the code he used in the sr-only class

8 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 7/26/2023 in #front-end

em and rem units with media queries

Hey folks in one of kevin video i saw him using em and rem units with media queries for setting max-width, min-width etc. in them why is that don't we require px unit to set the breakpoints

8 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 7/25/2023 in #front-end

click event listener automatically triggering

hey folks can anyone check this pen out the click event listener attached to slider in this code is automatically triggering which is supposed to only trigger when I click the slider. https://codepen.io/adityakirad/pen/oNQPEGW

5 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 7/8/2023 in #front-end

need help in converting the single line typewriter effect to multiline typewriter effect

hey folks this is my code currently this is single line typewriter effect but i want multiline typewriter effect i mean one line is typed then if the content is not fitting in the single line then it jumps to next line and typewriter effect continues https://play.tailwindcss.com/oNwPJousIY

1 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 6/9/2023 in #front-end

SVG still showing when the container height is 0

4 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 6/8/2023 in #front-end

drawer sliding animation not working

hey folks this is my code I'm trying to have sliding animation from right when drawer open and closes but it not working

import { useRef, useEffect } from "react";
import { Link } from "@remix-run/react";
import { Close } from "./icons";

interface DrawerProps {
    open: boolean
    onClose: () => void;
}

const Drawer = (props: DrawerProps) => {
    const { onClose, open } = props
    const ref = useRef<HTMLDivElement | null>(null)
    useEffect(() => {
        function handleClickOutside(event: Event) {
            if(ref.current && !ref.current.contains(event.currentTarget as Node) && event.target !== ref.current) {
                onClose()
            }
        }
        document.addEventListener('click', handleClickOutside, true)
        return () => document.removeEventListener('click', handleClickOutside, false)
    },[onClose])
    return (
        <div className='fixed inset-0 z-10'>
            <div className={`fixed inset-0 -z-[1] bg-black/50 ${open ? 'opacity-100' : 'opacity-0'} transition-opacity duration-300 ease-in`}></div>
            <div ref={ref} className={`fixed right-0 h-full w-3/4 p-4 bg-white ${open ? 'translate-x-0' : 'translate-x-full'} transition-transform duration-1000 ease-in delay-300`}>
                <button className="w-full p-4 mb-8 cursor-pointer"><Close className="h-[1.5em]" /></button>
                <div className="flex flex-col gap-4 p-4">
                    <Link to="/how-we-work" className="uppercase">how we work</Link>
                    <Link to="/about" className="uppercase">about</Link>
                    <Link to="/#services" className="uppercase">services</Link>
                    <Link to="/contact" className="uppercase">contact</Link>
                    <Link to="/blog" className="uppercase">blog</Link>
                    <Link to="/our-brands" className="uppercase">our brands</Link>
                </div>
            </div>
        </div>
    )
}

export default Drawer

import { useRef, useEffect } from "react";
import { Link } from "@remix-run/react";
import { Close } from "./icons";

interface DrawerProps {
    open: boolean
    onClose: () => void;
}

const Drawer = (props: DrawerProps) => {
    const { onClose, open } = props
    const ref = useRef<HTMLDivElement | null>(null)
    useEffect(() => {
        function handleClickOutside(event: Event) {
            if(ref.current && !ref.current.contains(event.currentTarget as Node) && event.target !== ref.current) {
                onClose()
            }
        }
        document.addEventListener('click', handleClickOutside, true)
        return () => document.removeEventListener('click', handleClickOutside, false)
    },[onClose])
    return (
        <div className='fixed inset-0 z-10'>
            <div className={`fixed inset-0 -z-[1] bg-black/50 ${open ? 'opacity-100' : 'opacity-0'} transition-opacity duration-300 ease-in`}></div>
            <div ref={ref} className={`fixed right-0 h-full w-3/4 p-4 bg-white ${open ? 'translate-x-0' : 'translate-x-full'} transition-transform duration-1000 ease-in delay-300`}>
                <button className="w-full p-4 mb-8 cursor-pointer"><Close className="h-[1.5em]" /></button>
                <div className="flex flex-col gap-4 p-4">
                    <Link to="/how-we-work" className="uppercase">how we work</Link>
                    <Link to="/about" className="uppercase">about</Link>
                    <Link to="/#services" className="uppercase">services</Link>
                    <Link to="/contact" className="uppercase">contact</Link>
                    <Link to="/blog" className="uppercase">blog</Link>
                    <Link to="/our-brands" className="uppercase">our brands</Link>
                </div>
            </div>
        </div>
    )
}

export default Drawer

4 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 6/7/2023 in #front-end

getting different font-size for button element in different browsers

7 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 6/4/2023 in #front-end

Image Overflowing from the container

4 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 6/1/2023 in #front-end

svg in the div still showing when the container height is 0

6 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 5/30/2023 in #front-end

no scrolling animation on scrolling with anchor tags

hey folks I'm doing scrolling using the anchor tags, but the problem is it instantaneously scroll to the section I mean there is no scrolling animation I tried adding the scroll-behaviour: smooth; to the body but it didn't worked how do I get the scrolling animation on scrolling with anchor tags

3 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 5/30/2023 in #front-end

percentage width behaving weirdly

11 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 5/29/2023 in #front-end

swipe not working on the desktop screen in the carousel

hey folks this is my code for the carousel https://mystb.in/AtmPotterTravelling for some weird reason the swipe works in case of mobile screen but on desktop screen

1 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 5/28/2023 in #front-end

not able to style the SVG

hey folks I'm rendering an SVG using the img tag like this

<img src='download.svg' alt='download SVG' />

<img src='download.svg' alt='download SVG' />

now I want to change the stroke color and fill color of the SVG how do I do it

2 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 5/21/2023 in #front-end

not able to overflow the div properly

9 replies

Gaming

Programming