Each time I use <h> a mini scrollbar appears next to it. This appeared after I added the overflow-x: hidden; how can I fix this please submitted by /u/Born-Newspaper1592 [visit reddit] [comments ..read more

submitted by /u/OhDearGod666 [visit reddit] [comments ..read more

I have a page/component. I have divided it into two vertical sections which have a fixed height. Those two sections (lets say 1 and 2) have some items in them. (1's item are in green and 2's items are red in color). There will always be some items in both the sections. Now if the items in the first column exceeds the length of the section(as in image 1), that/those item/s should go to the next section(as in image 2). How can we do that? https://preview.redd.it/nh9jo7s73iwc1.png?width=542&format=png&auto=webp&s=d4e955e562e441dc1dc617c6d102850d2524bf7e https://preview.redd.it/v5 ..read more

Newbie here, so do I use grids? submitted by /u/Rimspix [visit reddit] [comments ..read more

I'm starting to learn css right know how to start low level to high level submitted by /u/IllustriousEye0011 [visit reddit] [comments ..read more

submitted by /u/robson_muniz [visit reddit] [comments ..read more

I need to select elements with classes based on their order relative to other child elements within different parent containers. I tried using nth-child selectors, but I couldn't figure out a way to get them to repeat. Currently, I just have a bunch of elements with classes being selected. Not optimal, but it works. .container1:has(input[type="radio"].1:checked) ~ .container2 .1, :has(input[type="radio"].2:checked) ~ .container2 .2, :has(input[type="radio"].3:checked) ~ .container2 .3 { background-color: red; } I would really prefer not to use JavaScript. Is there any way to do this withou ..read more

I'm relatively new to using `@container` queries. I love them. Makes responsive work so much easier. That said...I rant into a problem today. We use some JS frameworks one of which creates pop-up menus for us (which, in turn, is based on popper.js believe). Like a lot of pop-up scripts, it gets the position of the element clicked on relative to the viewport and then positions the menu accordingly with position: fixed. The catch is that because I am using `container-type: inline-size`, the menu it is positioning is actually relative to the container--not the viewport. So it's actually position ..read more

I want to scroll with Javascript to top of the page with smooth behaviour. This is the javascript code : window.scrollTo({ top: 200, behavior: 'smooth' }); and I also added to css : html { scroll-behavior: smooth; } but scrolling doesn't work at all. If I delete the behaviour: 'smooth', scrolling works. How can i make scrolling work with smooth behavior ? My firefox version is: 115.10.0esr (64-bit) submitted by /u/TrejziKetri123 [visit reddit] [comments ..read more

Contextual styles allow us to do a sort of inverse-nesting which lets us keep all styles in one place. Here's how it is done in Styled components const TextLink = styled.a` /* Standard styles: */ color: blue; text-decoration: none; /* Styles when rendered inside a quote: */ ${QuoteContent} & { color: black; text-decoration: revert; } `; What the above code does is applies the default styles of color: blue; text-decoration: none; to all anchor tags. But, if the anchor tag is nested within a QuoteContent tag (<blockquote>), it'll apply the styles color: black; text-decoration: reve ..read more