Dev_HK Comments - Answer Overflow

.element {
  /* Basic inverse relationship */
  width: calc(800px / (100vw/100%));

  
  /* With bounds */
  width: clamp(200px, calc(800px / (100vw/100%)), 600px);
}

.element {
  /* Basic inverse relationship */
  width: calc(800px / (100vw/100%));

  
  /* With bounds */
  width: clamp(200px, calc(800px / (100vw/100%)), 600px);
}

this is from claude

5 replies

KPCKevin Powell - Community

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

Review my css & tell me how can i do responsive better

one input from a gal on another server

3 replies

KPCKevin Powell - Community

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

svgs aren't responsive as i thought

i'm not needing a sprite for now; i need to modify the svg & it's viewbox or whatever to make it start from 0 0 oof the screen

28 replies

KPCKevin Powell - Community

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

svgs aren't responsive as i thought

the thing is i used codesandbox last time & it couldn't load the website; it lagged or something, i'll need to learn svg to do it right i guess the thing is i don't know how to modify it like should i modify the paths or something or how is it done

28 replies

KPCKevin Powell - Community

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

svgs aren't responsive as i thought

okay what would you need me to provide

28 replies

KPCKevin Powell - Community

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

svgs aren't responsive as i thought

yeah i tried to fiddle with it i copy pasted the svg code into the dom but no use, it either looks weird when i try to modify in it

28 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

i see okay lemme try reproduce it with only html & css & js

9 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

uhh, it's a laravel based if that's okay, with tailwind

9 replies

KPCKevin Powell - Community

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

transition being bumpy

const toggleQuestions = document.getElementsByClassName('toggle-question')
const answeredQuestions = document.getElementsByClassName('answered-question')

for(let el of toggleQuestions){
    let icon = el.childNodes[3]
    let paragraph=icon.parentNode.nextElementSibling.children[0]
    let isChecked=false
    function animate(){
        // animate icon
        // animate the height of element
        animateIcon()
        animateHeight()
    }
    function animateIcon(){
        const animationT=parseInt(icon.getAttribute('data-animated-ms'))
        let ms = animationT;
        let id = setInterval(iconAnimate,10)
        function iconAnimate(){
            if(ms==0){
                // this to clear the interval
                isChecked=!isChecked
                icon.style.opacity=null
                // the
                clearInterval(id)
            }
            const halfMs=animationT/2; // half-time
            if(!icon.style.opacity){
                // sets opacity once
                icon.style.opacity=`${animationT/100}`
            }else if(ms>=halfMs){
                icon.style.opacity=`${parseFloat(icon.style.opacity) - (animationT/100)/10}`;
            }else{
                isChecked?icon.textContent='+':icon.textContent='-'
                icon.style.opacity=`${parseFloat(icon.style.opacity) + (animationT/100)/10}`;
            }
            const tick=5
            ms=ms-tick
        }
    }
    function animateHeight(){

        const height=paragraph.offsetHeight
        console.log(paragraph.parentElement)
        paragraph.parentElement.classList.toggle('show-more')
    }
    el.addEventListener('click',function(){
        /*
         * animation part
         * */
        animate()
    })
}

const toggleQuestions = document.getElementsByClassName('toggle-question')
const answeredQuestions = document.getElementsByClassName('answered-question')

for(let el of toggleQuestions){
    let icon = el.childNodes[3]
    let paragraph=icon.parentNode.nextElementSibling.children[0]
    let isChecked=false
    function animate(){
        // animate icon
        // animate the height of element
        animateIcon()
        animateHeight()
    }
    function animateIcon(){
        const animationT=parseInt(icon.getAttribute('data-animated-ms'))
        let ms = animationT;
        let id = setInterval(iconAnimate,10)
        function iconAnimate(){
            if(ms==0){
                // this to clear the interval
                isChecked=!isChecked
                icon.style.opacity=null
                // the
                clearInterval(id)
            }
            const halfMs=animationT/2; // half-time
            if(!icon.style.opacity){
                // sets opacity once
                icon.style.opacity=`${animationT/100}`
            }else if(ms>=halfMs){
                icon.style.opacity=`${parseFloat(icon.style.opacity) - (animationT/100)/10}`;
            }else{
                isChecked?icon.textContent='+':icon.textContent='-'
                icon.style.opacity=`${parseFloat(icon.style.opacity) + (animationT/100)/10}`;
            }
            const tick=5
            ms=ms-tick
        }
    }
    function animateHeight(){

        const height=paragraph.offsetHeight
        console.log(paragraph.parentElement)
        paragraph.parentElement.classList.toggle('show-more')
    }
    el.addEventListener('click',function(){
        /*
         * animation part
         * */
        animate()
    })
}