CSS Grid Help
Hello,
I am having a stupid time trying to get my first grid to look right. When I load my page, all my grid elements are there but they are not in the right position. They are just listed row after row instead of being in an actual grid with a navidation side bar and two additional columns. I have been over my code countless times and can't find my issue. Additionally, when I go to inspect on my website the css code for my container does not appear but I have double checked that my naming is correct. I've added screenshots of all of the grid code, additionally you can see what it's doing at www.pergolaluxe.com. Any help is greatly appreciated!...
How to create this shadow effect with css?
I want to create a card design for my portfolio website, but I don't know how to add a shadow effect as shown in the drawing.
Add CSS classes along with js code in className attribute in HTML (React)
I'm new in writting JS in React so I'm having problems in adding my css clases "block lg:hidden". I tried to do it with parenthesis. The image shows the first line of code:
How to create this tree
I need to create structure tree like is on the image. I looked for any library but I didn't find. So, if you know any libraries or how to create this by pure html/css/js, please help me:)
I need help with responsive.
I'm doing desktop to mobile, and I'm having trouble on mobile devices. Can someone give me an advice to improve my code. Thanks
https://codepen.io/Jonah-the-lessful/pen/dyLdKjZ...
Looking for direction / guidance about this particular canvas effect + resource
There is a canvas interaction right at the header of the case study from this site. I want to know if there were any materials that I could take a look at to learn how to reproduced whatever she did.
https://jant.fr/case/shinjuku...
When using Next Image, and the src is SVG, fill color doesn't work
is this behavior expected or there is a workaround?
Ephemeral padding when animating grid row height
Following the approach here to animate height from "0" to "auto": https://www.youtube.com/watch?v=B_n4YONte5A. It's a neat trick avoiding JS, but I'm wondering what's going on with the white-space at the bottom in this screen recording (the orange section is the grid-row that's animating from "0fr" to "1fr"), and if there's any way to get rid of it.
Expanding Card Text Sizing Problem
Hi,
I need to code a card layout consisting of 3 cards. When any card is clicked, it will expand in size. However, with my current implementation, the text within the card grows and shrinks during the animation. I know I should not animate the width, but I couldn't find any other solution. How can I achieve this? Thanks in advance for your help.
Here is my try: https://codepen.io/aydgn/pen/poBaJQj?editors=1100...
How to color text so it is visible against any background color?
I have a page (source) where I've got a grid with different colored lines. Is there something I can set the
color of the text to so it'll always be visible?
I want something like mix-blend-mode difference plus filter invert(100%) from this article. I want the text color to be the inverse of the background, and not to invert the background.
I also have programmatic access to the hex version of the background color. I tried color-mixing some, to no avail....
Why is my article overlapping into my nav, and how do I fix it?
Go easy on me, I haven't worked with CSS or HTML since like high school. It could completely be that this is perfectly fine behavior and I'm overthinking it considering the texts aren't mixing, it's just the border going into the navbar that worries me.
Outside of knowing how to fix this issue so that, you know, my article section and my navbar section are separated from one another, are there any other glaring cases of bad code practices that I've made here? I feel like I might be overusing variables or classes.
https://jsfiddle.net/4vkxybqj/3/...
