Anurag Gupta
KPCKevin Powell - Community
•Created by Anurag Gupta on 11/16/2023 in #front-end
Facing Issue on Layout on Extra Small Screen
4 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 11/9/2023 in #front-end
Help on Grid Layout
While trying to solve Code challenge by Kevin, I tried on using the Grid layout. Link to Codepen is here: https://codepen.io/anurag1989/pen/xxMqMXR
Size of img_1, img_2 and img_3 = 471x628
Now the main issue I am facing here is that even though I have declared row inside .container to be 1fr each (with display: grid ), still I am not getting equal height of box-1 and box-3. I thought by this I will get equal height of rows but height of box-3 is approximately twice from that of box-1 (or box-2). If I declare grid-template-rows: 50% 50% then it approx. solves the issue but still the heights are not equal.
Why this code is causing issue?
9 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 10/14/2023 in #front-end
Z-index problem in setting the background
Hello everyone!
I am working on a small assignment based on HTML/CSS which involves coding a information card. Here is the link to the codepen: https://codepen.io/anurag1989/pen/bGOybYr
Now, the main problem is:
(1) When img::before has been assigned z-index: -1, then it is sent behind .card (as per docs, any element with negative z-index in sent behind its parent. But, here, .img is the immediate parent container so why ::before is sent behind .card and not behind .img?)
(2) When img::before has been assigned z-index: -1 and .card z-index: 1, then the ::before is sent behind .img and above .content
(3) When img::before has been assigned z-index: -1, .card z-index: 1 (optional) and .img z-index: 1, then ::before is sent behind img but above .img.
In this way there are other combinations of z-indexes for this scenario which is proving difficult for me. Can somebody explain me what exactly is happening here?
5 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 5/15/2023 in #front-end
How flex-item size are calculated when its width is given?
I have read a lot about flex box and have understood most of the part. However, there is one thing that I am not able to figure is that in case we have more than 1 flex-item inside a flex container, how their final width is calculated when one of them is declared its width that is greater/less than its parent container size.
Here is the link to the pen I have written to experiment with flex: https://codepen.io/anurag1989/pen/yLRqPwO
7 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 5/13/2023 in #front-end
How to select an element that is inside another element on hover?
What I have written is in this pen: https://codepen.io/anurag1989/pen/oNayPOv
The main problem is when I try to select the anchor tag (which is not hovered, and each anchor tag is inside a 'li' tag that in turn is inside an 'ul' with its siblings) which is not hovered, the CSS code does not work as expected. What is the problem with the code and why it is not working?
22 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 5/8/2023 in #front-end
How to remove unwanted padding on anchor tag in the code given?
4 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 4/5/2023 in #front-end
Facing problem while using border-image-slice
13 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 3/24/2023 in #front-end
Need help regarding cubic-bezier function
Recently, I came across a function named cubic-bezier function through this article:
https://css-tricks.com/advanced-css-animation-using-cubic-bezier/#comment-1803198
I, however, almost got this article, except for the 'Math Part' for Parabolic approximation when the article reached the line "...We used V = 500 in the last example, so the max value there would come out to 375 (or 37500%) and we get the following:".
After this line I absolutely lost the track with the article. It has been days I am not able to figure out what this article say (after the above line).
Can someone help me with this?
1 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 12/15/2022 in #front-end
Not able to centre Paragraph inside a Div
5 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 10/31/2022 in #front-end
Overflow property applied with float
I have created this simple HTML page and was experimenting with 'float' property of CSS. The markup is attached. The main problem is: When declaring 'overflow' as 'hidden' I was expecting that all the content that is overflowing will be hidden (or not visible). But, here the container is stretching all the way down to contain all the elements inside it. So what is going on here and how 'overflow' is working here?
4 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 10/3/2022 in #front-end
A Simple CSS selector problem
I am trying to enter this code working with CSS 'nth-child' selector but it seems to be not working. What might be the solution to this? The same problem exist if i use the 'last-child' selector. Nothing seems to work...
8 replies