make div height of first child
Hey, how would you limit the height of a div to the first child’s height? In the image, I have a design where I’d like the first piece of content to show but the rest you’d have to scroll down to. I feel this may be something you have to achieve with js, but I also think that there’s a chance it could be possible with html and css, I’d appreciate any insight, thank you in advance.
How to achieve this element/design
Here, I want a tracking element, which will fill based on a particular status or value. I have never done this before, so need some ideas on how to achieve it. This will probably inside a parent container/element which will have other fields as well. But i believe this will be the main part. For practice, I can use 1-5 values and based on each value, the line should be filled.
Adaptive lists and SVG line
Hello everyone, can you tell me what the correct HTML structure should be here? Does anyone have video examples of a similar block? Should I make the lists + numbers as one block or separately in order to implement everything with a grid layout? Of course, it all has to be responsive.
centering scalable text
Hey, i have a design where some decorative text sits behind some content. The decorative text is supposed to stay centered however i can't quite figure out how to achieve this on smaller screen sizes (see images for what i'm attempting and what's happening)
The text is supposed to overflow the sides on smaller sizes and have that hidden by the container. I have it figured out on desktop, though that method probably won't be fit for the mobile design due to any overlap making the content do the same as they share the same grid cell. the problem is just scaling it down. My initial thought was using position absolute for the decorative text however since it gets taken out of the doc flow, it has the potential to overlap the header and footer.
I'd appreciate any help learning a method for this sort of thing, thank you in advance....
named grid lines not working as expected
Hey, this is one of my first times using grid lines properly for a layout and i can't quite seem to get the layout to look like the sketch in the image with them like i can do when defining the set lines the children go on e.g.
grid-row: 1 / -1;. The chidren don't seem to be sitting in their defined areas for some reason. For anyone wondering why i can't group the button in with the text, the layout shifts around at a desktop viewport, this layout is for a tablet viewport. Could anyone please point me in the right direction and let me know what i'm doing wrong? Thanks in advance.
https://codepen.io/deerCabin/pen/gONNKLy...
Anyone have an idea for responsiveness for this?
I have this html section "About us". On a desktop i think it looks beautiful but im running out of ideas on what to do with it for smaller sizes becuase it gets absolutely destoryed and messes up the flow of the rest of the elements. Heres an example
first pictures is how it looks like when the container with width: 90% and max-width of 1280px has been hit on large desktop screens
the second picture is when everything gets messy...
