godlike Posts - Answer Overflow

godlike

•Created by godlike on 8/28/2023 in #front-end

Allow button to always remain in viewport

I have a URL: https://kasi-web.vercel.app/users/DKBvDQwQAXvFaIUzKmiM. I want the "Pay With Kasi" button to stay at the bottom always without users needing to scroll, regardless of the device. I've currently set the height to 100vh in my CSS, but I still need to scroll on mobile devices to see the button.

5 replies

KPCKevin Powell - Community

•Created by godlike on 1/28/2023 in #ui-ux

Which UI looks better?

5 replies

KPCKevin Powell - Community

•Created by godlike on 12/4/2022 in #front-end

Remove border from sticky box

How can I create this simple functionality that - box position: sticky then we have border - otherwise no border

7 replies

KPCKevin Powell - Community

•Created by godlike on 10/31/2022 in #front-end

Stop sticky position scrolling at any desired point

I have a use case in which for I've a box positioned as sticky, so the general behaviour of sticky is that once the scroll position hits the sticky container then the sticky container starts moving along just like regular HTML. I want this exact same behaviour but I want the sticky container to start moving along at a specified distance from top. (I'm getting the distance from top using getBoundingClientRect function). Main constraint in my case is that I cannot divide the box into two parts. (red box on codepen) (Also, this example is just for explanation purpose only) codepen link - https://codepen.io/Rishab1207/pen/abKdobK?editors=1100

1 replies

KPCKevin Powell - Community

•Created by godlike on 10/20/2022 in #front-end

How to make red container go full width in second container?

3 replies

KPCKevin Powell - Community

•Created by godlike on 9/26/2022 in #front-end

CSS Margin Collapse

<div1 />
<div id="some-id"></div>
<div2 />

<div1 />
<div id="some-id"></div>
<div2 />

There's some third party script which targets some-id to render their component, but there are cases where it can be empty. <div1 /> and <div2 /> has a marginBottom and marginTop of 32px . When <div id="some-id"></div> wasn't there, the margin was collapsing, but with the introduction of div now I'm getting 64px margin even tho the some-id div is empty and there's no margin collapse. So, how can I remove the div tag if the script tag doesn't appends anything on the UI?

3 replies

Gaming

Programming