Why does the content in the div change the vertical position of the div?
I want to make a grid divided into 4 squares each of which can have different content. (I'm not using grid or flexbox as an experiment.) When the boxes in a row have the same content, it displays fine (the 1st image).
When the boxes have different content (for example, one has a heading and one has a paragraph) they become vertically misaligned (the 2nd image).
I've attached the css and html....
It is better to use FlexBox or Position for this layout?
I am trying to figure out what is the "right" mthod to use to create a certain layout. I attached a picture of what the desktop look for the layout would be. Basicly a sticky header, two columns but the right column has a footer under it. When it converts the mobile version the sticky header stays, the side bar gets hidden until a hambergure menu icon is clicked then it will slide out, the main content and footer will take up the whole width as normal.
Obviously the sticky header needs to be position call but would it be better to use a flexbox for the reset of the segmenting or should I do position calls? Thanks!...
How do you go about creating things like this CSS or just a svg?
These display sort of a process flow, where each arrow is a step of the process. Also what are the things called? surely there is a name, we name everything else haha
Implementing an animated progress bar for tracking article read progress.
I'm trying to animated a bar using css, the default continuous bar works fine, but I have a list of divs (say 10 divs) that are little squares in a row, and I want to paint x number of squares based on how much the css bar is animated. say 50% of the bar is animated so i'm at keyframe 5/10, I want to translate that progress to the number 5 and then render 5 filled blocks in my div list
I'm using react and plain css. Here is my css, I took it from https://scroll-driven-animations.style/demos/progress-bar/css/
as you see on the screen, there is a red bar at the top which shows the scroll percentage (how far we have scrolled from the top of the article. and the green blocks that are filled are showing the same progress but in discrete units. (it's currently not working propertly the filled in ones are just a random number)
in my latest approach I tried making a new css @property (--scrolled) and inside the keyframes interpolated between 0 and x (say 20 blocks) in my animation keyframes, but I'm not able to access the updated --scrolled property with js, I'm not even seeing it be updated on dev console. ...
space between pushing content under the scroll bar
i had it working before, but i wanted the header to be sticky. The sticky property didnt work so i made it fixed. That worked, but now it had a new problem of taking up just enough space it needed to fit everything, and now ive put width 100% and it pushes the items behind the scroll bar. How do i fix this or make the sticky work with what i had originally?
