Anurag Gupta
KPCKevin Powell - Community
•Created by whiteshadowsss on 12/31/2023 in #front-end
problem
We can use (1) border (2) outline property to achieve the desired effect
13 replies
KPCKevin Powell - Community
•Created by Jomu on 12/7/2023 in #front-end
Grid system showing gaps
Remove grid-gap and you will get the desired result
7 replies
KPCKevin Powell - Community
•Created by Matt on 12/1/2023 in #front-end
Uniform Nav Bar
I think Grid will be a better choice because you can set the width of all three columns equal easily by: grid-template-columns: 1fr 1fr 1fr. Alternatively, you can use display: flex; and flex: 1 1 auto; for each of its children
5 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 11/16/2023 in #front-end
Facing Issue on Layout on Extra Small Screen
Thank you Mark for you help. I was stuck on this problem for past 1 day. But can you tell me where the min-width is set? Because I can not see it in .input or input. Thanks Again!!
4 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 11/9/2023 in #front-end
Help on Grid Layout
I think I have figured out the problem. (1) The three boxes have two classes: box1 and display1 both of which have display: grid. So, I have removed one of the display (from box1). (2) Removed grid-template-rows from .display1 and .display2.
With these changes, the output is as expected. The only problem 'now' is that I don't know why it works?
9 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 11/9/2023 in #front-end
Help on Grid Layout
Hmm.. I got your point. But suppose instead we have to fix the height and I have arranged the containers as per Grid layout and have put the Image inside another container by declaring max-width: 100% (for image), so why we are facing issue here? If the wrapper height is not enough for the image, then what is the point of style for <img> having max-width:100%?
9 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 11/9/2023 in #front-end
Help on Grid Layout
But for images, I ahve restricted their size by using max-width:100%. So why it is creating problem of overflow? Most importantly, the height of box1 and box3 are different although the size of images are same.
9 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 10/14/2023 in #front-end
Z-index problem in setting the background
Can you shed some more light on 'Stacking Content' and how it is formed? I think I am getting confused here.
5 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?
Well, I have found another solution to this (not authored by me):
ul:hover a{
filter: blur(5px);
}
ul a:hover{
filter: blur(0px);
}
1) First, we are making the whole ul containing all anchor tag to blur when it is hovered over.
2) But we don't want the anchor tag which is being hovered over to blur. So, we have dfined blur to 0px in this case. Hence, the only anchor tag which is hovered over will not be blured and rest content of ul will be blured.
22 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?
I think I have got the proper explanation to this:
1) a:not(:hover) --> This selects all anchor tag that are not being hovered.
2) li a:not(:hover) --> Selects all anchor tag that are not beings hovered and are descendents of li
3) ul:has(a:hover) li a:not(:hover)--> Select all anchor tag that are not being hovered over and are descendents of li which in turn is an descendent of ul but it has an anchor tag that is being hovered over. So, when any of the anchor tag is hovered, only then the blur() is applied to those anchor tags that are not being hovered. Else, when none of the anchor tag is being hovered, then u:has(a:hover) results to false, hence, none of the anchor tag is blurred.
This is my understanding. Please suggest in case of any improvement.
22 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?
Can you please explain the logic behind it? Thanks!
22 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?
Also, can we write it like this: ul li a:not(:hover)?
22 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?
can we customise it to select only elements that are before the selected one?
22 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?
That's too difficult for me at the moment. Could you please explain the last two declaration for further clarity?
22 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?
Thanks for the suggestion. I will keep that in mind
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?
Thanks for your valuable suggestion. I really learned a lot from this. The code works as expected with no error.
4 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 4/5/2023 in #front-end
Facing problem while using border-image-slice
Thanks! Now I got the reason for this behavior
13 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 4/5/2023 in #front-end
Facing problem while using border-image-slice
Here is the video of issue I want to point to. Please have a look.
13 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 4/5/2023 in #front-end
Facing problem while using border-image-slice
In the Codepen, you can set the border-image-slice value to be something like 35, 25px and 35%. Make sure to use the image I supplied (or any other) and see the difference.
13 replies
KPCKevin Powell - Community
•Created by Anurag Gupta on 4/5/2023 in #front-end
Facing problem while using border-image-slice
Here is the link to Codepen: https://codepen.io/anurag1989/pen/oNavQPr
13 replies