How to make sticky header without knowledge about its height.
My app structure looks like this: https://codepen.io/H4ds0n/pen/MWZvBGP
So i thought ok then, i will make my body 100dvh and ten overflow:scroll and put the header sticky. And everything was ok utill I started to working with react-select and its dropdown. When dropdown shows then weird thing started going on (it seems like html was scrolling down even if target dropdown was body ??)
One solution I saw was that people were making header fixed but then the content has to have padding-top with height the same as height of the header. How do I do this properly ?...
Text Transparency
How do i archive the text transparency in the picture, so i could see the background through the text, despite the fact that it's still ontop of the white background. Thanks.

overflow hidden on body
Hey, I see mixed opinions on things like adding
overflow: hidden on the body to prevent scroll bars due to decorative elements as shown in this image for example (the blue blob). Is this is a method to use or is it recommended to use something else? Thanks in advance!
Overflow with flexbox resulting in hacky use of calc
I'm having issues finding a more elegant solution that does not result in flexbox children overflowing by not respecting its parent's width.
Specifically
sidebar-profile-name is overflowing the sidebar with longer names where I'd rahter have it cut off as to not extend onto multiple lines.
HTML (Vue 3 with Nuxt)
```html...
Margin or padding
Need more understanding on when do i use margin and when do i use padding. Am a little confused. Especially when its a heading and is not a button.
Thank you...
CSS help!
im trying to target my second img only but when i apply a selector it does both imgs. Can someone look at my code?

Second Modal not closing
i have two modals in my website when i click on close button of first one it closes but when i click on close button of second button it does not close i have double check the id's and also check througn console.log which is also working on clicking my cloes icon on second modal check repo code"https://github.com/TalhaMustafa1/bootstrap-website.git" but can not find error here is my js code" <script>
// Get references to the modals by their unique IDs
var modal1 = document.getElementById("myModal");
var modal2 = document.getElementById("Modal");
...
font family
https://www.fontsquirrel.com/fonts/intro-rust
i want this font family to add in my web page
...
Semantic Nav
In my current project I have a header will be used to navigate to different pages on the website. I am currently using a nav element to surround it like this:
```html
<header>
<nav class="nav">
<div class="header"> ......
Box-shadow
Hi - i am a beginner in HTML / CSS / Javascript. I have made a container div inside the body. The body has a back ground color. And the div container too has a back ground color. I wanted to give the div container a box-shadow but it does not show. Please help? I tried using position:relative and z-index:10 inside the container too.
hgroup tag & utility class use case
Hey, I have two questions. With the
hgroup tag, am i able to group a header tag and a paragraph tag acting as a description together or would that be bad practice? Is it also recommended to use this tag? For example-
```html
<hgroup>
<h1>A website header</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa ducimus aliquid provident quo nam.</p>...Grid auto-fit
Hello! I am trying to make two different columns in grid become one without using media queries.
I want one of them to be 1fr and the other auto.
The one that is auto should never be smaller than 10rem, and the main one shouldnt be smaller than 20rem....
Bootstrap: Solutions to breakout half vw image from container (Two column layout)
Hi, I'm struggling a bit to find the best solution to create a two column section with a half width image that's breaking out of the container.
Often I use the solution to set the image parent to a 100vw solution with a translateX(-50%) and a right: 50%;
I think there will be better solutions because the image is not always 100% visible. I need to play a bit with the width of the viewports to get it right.
Do you know a better way? π...

In the three.js library, my localhost give HTTP ERROR 404
I installed the package of three.js library by node.js. I hit some command in my visual studio code but when i get localhost and when i click to open it its give error..

CSS image aligning problem
Hey everyone! I'm new here so bare with me if I'm not following the guidelines properly.
In my last project I've encountered a 'behavior' that I don't know how to address.
I have 24 images, I'm creating a horizontal scroll using grid. All works well and as expected UNTIL I rotate some of the images in the grid.
Basically what needs to happen is that, 18 of the images are normal, the rest are rotated -95deg + span 2 (while fitting and aligning with the rest of the images).
...
How can I do this with flexbox? Elements Alignment
I would like to align the Big Title EXCLUSIVE MONCLER SERVICES with the carousel controls. That way, is there an easy way? I guess with flexbox there isn't?

Position:relative is confusing me
Hey!
Enviroment: VS code, react, eslint, tailwind + normal CSS and Rechart.
Problem: DonΒ΄t know how to work around position:relative. I have bildt the landing page on the img that I have attached in this message.
...

Media Query Tutorials
Can someone please recommend a complete tutorial on media query. Possibly on YouTube?