sometimes i don't know how to use css correctly
so here's my shitty page, right now it needs either to use pixelized margin or to use position:relative & move it arround,
the problem i'm having is when i actually hate myself and want to use position rather than margin, i get this btw i'm using tailwind
main-section max-h-full relative top-24 h-4/6 flex flex-col
...
clip-path not displaying cssbattle safari imac
Im having trouble understanding how clip-path works. I'm going through the cssbattle and clip-path works sometimes, but mostly doesnt display properly. In this battle, i started with a square container and used clip-path to cut out the object. but i cant get the clip-path to display. I tried the same code in chrome and firefox but yeilded the smae results.
...
Expanding row that is being clipped
Hi all. I'm working on a project to bring a graphical display to Home Assistant's Assist virtual assistant.
https://github.com/dinki/View-Assist/wiki/ This has thrown me head first into the unknown world of CSS (for me). I am trying to modify some of the cards that Home Assistant provides to full screen views and am running into an issue....
https://github.com/dinki/View-Assist/wiki/ This has thrown me head first into the unknown world of CSS (for me). I am trying to modify some of the cards that Home Assistant provides to full screen views and am running into an issue....
How can I scroll it from right to left like a wave?
I want to scroll it from right to left, but it should move like a wave. How can I do this, or is there any JavaScript plugin for it?
Navigating back to previous page
So i am trying to create a back button in a web app which s working fine using
history.back() but the problem is if i copy paste the link and then i hit the back button the user will go back to the previous tab even if its not our domain. i want the user to go to home page if previous page is not a page from our hostname
using react-router-dom for navigation
```javascript...
How to make a responsive color design with image.
I am doing a frontend mentor project. There is a background-color for the nav and hero section. However, I do not know how to achieve that because nav is in the </header>, hero section is in the </main>, which I cannot apply a background-color-class, there is also margin between.
I tried to use pseudo elements and absolute value, but it is just too hard to make it responsive.
I tried applying it on body, but it will take up the whole site....
How to responsively move elements from a row to a column with subgrid?
I am working on this front end mentor challenge. I’m using subgrid for the first time and it’s working beautifully to keep everything aligned. But it is supposed to be responsive so that on mobile it displays as a column of cards instead of a row. Normally I think I could do this but because I’m using subgrid, I’m not sure how to redefine the grid within the media query.
How would I say that I want 3 primary rows (the cards) that should all be equally sized, each with 4 sub-rows within for each piece of info?
I have it working-ish with repeat(auto-fit, minmax(200px, 1fr) for the columns but that causes one card to sometimes be alone on the bottom. Is there a way to avoid this? I also tried using container queries but I got confused about what to put where....
Why is the <div> with position-absolute and start-100 positioned outside the container?
```css
.element
{
background-color: black;
margin-left: 30rem;...
Adding table columns to a pure CSS Tree View
What's the issue?
I have the following codepen: https://codepen.io/AleksandrHovhannisyan/embed/PoaayLO/?theme-id=modal which uses this great
<details>-<summary> trick to turn an ul into a tree view where you toggle items to hide/display them.
I would like to introduce 2 more columns to this Tree View, i.e., the resulting table will have the expandable li and the second and third columns will have some value that should be aligned (and only show up if its respective li counterpart is toggled open ). To make simple to explain, I have attached a GIF explaining the approach.
...