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...
Is this good practice?
<a href="#">
<button>Read More</button>
</a>
If I have button and I want when user clicks on it, the user should be moved to other page, is it consider a best practice wrt accessibility?
...
variable within :root variable not changing.
Hey, i recently tried to test out a new design system method i saw andy bell using on https://piccalil.li where a property has a base value stored in
:root with variables that can be changed from within the component using it (in this case --border-color). However my variable is not changing as intended. Am i not able to use variables this way? Though it must be possible since he's using a similar syntax (see image). I just can't quite figure out how it's working for him. I'd appreciate any help. Thanks in advance.
https://codepen.io/deerCabin/pen/QWXXjKa...