Html – How can I align an image next to an h2?
Maybe the tech stack doesn't matter here, but I have a nextjs project with tailwind for styling. I'm trying to insert an image next to an h2 tag, but the image won't behave how I expect it to. There is…
Html – CSS nth of-type or child not working with custom elements inside another custom element
I am creating a layout with custom elements inside custom elements and having problems with css:nth. I am adding icons in content:before but they all display the same icon. Here is the code First try CSS code, using nth-of-type(number): custom-div:nth-of-type(1):before…
Html – How do I force css grid items to overlap each other?
I have a row of 5 columns, each holding a red box with some text. When the user shrinks the screen sideways, I want the container to shrink sideways, and I want the boxes to start overlapping each other, so…
Html – Distributing Elements in CSS
I'm attempting to dynamically distribute elements in CSS to fit them within a container regardless of the screen size. To give you an idea of what I'm trying to achieve, this is what I currently have on one device, versus…
Css – "jumping effect" with sticky position on iOS devices
Header content has "jumping effect" while scrolling. It's happening only on iOS mobile devices. The header has sticky position. When I change it to fixed position, it fixes the issue, but then the scroll bouncing effect doesn't work well. How…
Firefox 124: How to change background color of active tab, in userChrome.css?
The following code, appended to userChrome.css, no longer works: .tab-background[selected="true"] { background-color: #dd9933 !important; background-image: none !important; } Literally everything I could find online including this site and reddit, recommended this, but to no avail. The active tab is a…
Html – How can I apply grid-template-column to children inside an element
I have a grid parent that has rows. Rows has two children. The first child's width is unknown. I want to set auto column width. I can achieve this with this: .list { display: grid; grid-template-columns: auto 1fr; gap: 1rem;…
Html – css relative positioned div text content expanding and overlapping
I am struggling to prevent a relative positioned div text content from overflowing outside of the bounds. Markup: <div class="parent"> <div class="details"> <div class="detail1"> lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext </div> <div class="detail2"> lotsmoretext…
Html – Resize divs with default size risizing window
I have seen similar topic with answers about size in % or vh, but its a bit different. I have a set of different plots with sizes 900x600 by default using this CSS: .chartbox { display: flex; flex-wrap: wrap; background-color:…
Html – Website header that only shows when the page scrolls
I'm a bit of a newbie to javascript so I'm wondering if anyone can help please? I'm trying to make a website header similar to the one on this website - https://therangesestate.com.au/. It only fades in when you scroll down.…