Sticky header dynamic color per section
Hello guys,
I have one interesting problem which I am not yet sure how to solve. On a website I am working on, I have two primary colors (dark green and light blue).
I want the color of the text in my sticky header to switch between these two primary colors based on the background (If I can set which color to use on which section it would be awesome).
I was playing with the
mix-blend-mode
property but it doesn't really suit my needs since I cannot say which two colors to use.
There is also one criteria that when the sticky header is on the border of two sections (one light, one dark) the header text have two colors (the upper part of text according to the upper section and the bottom part of the text according to the color of the bottom section)....
position:sticky; doesn't work
Well... it does. If i define the height for the parent element (.container), the sticky element works flawless. But the height is supposed to be defined based off the height of the child element in the middle. There's 3 of them and 2 are supposed to be sticky. Check my comment for
.container
https://codepen.io/Hej-123/pen/bGZVMjx
...
is it safe to use 50% there?
hey, im working on tiny recreation of a figma design and i came across this. i know that the best thing i could do is using subgrid, but sadly to this date, subgrid isn't fully supported yet. im thinking of splitting this using flex basis 50%, basically header has colspan of 2 and inside the header, there would be 2 navs, one on the right and one on the left, is it ok to do it like so?
the layout itself is easy but im not entirely sure if this is the right thing to do..
and yes, that image has rowspan of 2....

Dynamic max-height
I wish to make the list height transition but only up to a certain height
Markup:
```html
<section class="insights-watch-time">
<div class="insights-watch-time__header">...
width of container for creating an 8.5 x 11 form
We have a form in excel that I need to display in a web app. The data entry will be done in multiple input dialogs. The results are displayed dynamically on the form to be exported as a pdf. I am laying out the form in css grid. I have 19 columns. I originally set my font size to 16px and I am using rem as my units. I set the width to 720 but the col7ms are quite narrow. I tried changing the font size to 14. I just wondered if there were some standards when setting up a form in css that...
Intrinsic clamp formulation problems
Because I've managed to make my logo/title bar intrinsically responsive in a non-standard way, the very simple problem of getting that logo to float left (or the main content to float right) is proving tricky. If I
fixed
instead of sticky
the logo, I get a weird margin/padding protrusion. Actually using float
messes up my logo/title . So I am trying to force the issue by setting the margin-top
of my main to 0, but only on large screens, on small ones it should be left alone. My clamp math shenanigans which are working elsewhere is not working in this one instance.
This seems to be always zero:
```main {
margin-top: clamp(calc(9.5em + 1lh) *-1), (40em - 100vw) * 1000, 0);...
How do people create websites that can scroll down and have different color for each sections?
I've been trying to figure this out and I have had no luck
Issue with Implementing Jumping Masonry-Style Layout in CSS
CSS Grid & Flexbox
Hey everyone, I'm struggling to achieve a masonry-style layout where grid items can rise up and fill in the gaps left by varying item heights. See added screenshots. Here's the breakdown:
Problem: I've been trying to create a responsive layout where the grid items move up to fill in the empty spaces above them, much like a masonry layout. However, neither Flexbox with flex-wrap nor CSS Grid with grid-auto-flow: dense are working as expected.
...

My CSS don't run properly?
as you can see my css path here is good but when i run it in my browser my website doesn't have any css beside bootstraps
is there a problem in my pathing or is it somewhere else?...

Grid layout system for 1300px
Hello, I have to create a design system based on a mockup that follows a grid. Designers provide a mockup for the widest desktop format at 1440 pixels (container 1300px 12 columns), and a mobile.
For the example i talk about the desktop grid.
Currently, I'm using the same structure but without a grid system, based on flexbox. To adhere to the mockup, I take a block with a fixed pixel value, then set the others as auto flex (depending on the section, of course).
...

Am in dire need of help
@Kevin Powell or any moderator out there, I need help in how to charge for an auto mechanic service shop, where to get a good template, where to register for a domain name, hosting, etc. this is my first gig need to get this bag been 4.5 months unemployed HELP PLEASE!!!๐
Code splitting styling issues
Hey everyone, I have styling issues when doing code splitting with webpack. Im using Vue with CSS Modules for scoped styles.
I have reusable component ButtonEl, which is in multiple css bundles, and this override Im doing is in first bundle, ,,,, however, later ButtonEl styles from another bundle override those specific styles, just based on being evaluated later.
I know I can use some tricks to increase specificity, but I would rather solve this in a centralized manner, if possible....
bootstrap structure of layout#bootstrap
how is it mandatory to use container row column structure has like in bootstrap to make a responsive layout either we can do it in another way
Best practice for semantic/accessible side menu
I'm planning new functionality for a site and before I start, I want to get the HTML structure right in my mind first. But as I plan this out, I find that I'm not totally sure whether what I'm doing is indeed best practice use of semantic elements and aria attributes.
I've attached the basic wireframe and my intended code structure, with the rationale underneath. I'm first examining the structure of the final HTML, rather than the script needed to handle the interactions. I'm very open to different viewpoints and feedback ๐...
I've attached the basic wireframe and my intended code structure, with the rationale underneath. I'm first examining the structure of the final HTML, rather than the script needed to handle the interactions. I'm very open to different viewpoints and feedback ๐...

rsuite datePicker minDate and maxDate not working
I want to set minDate and maxDate in rsuite. but its not working. Plz anyone help me fix it
Code Sandbox Link: https://codesandbox.io/p/sandbox/relaxed-star-jwdd5d?file=%2Findex.js%3A11%2C35
code:
import React from "react";...
Run function while async function is pending
I want to learn how can I run a function while part of my code is still running, like an async function or some loop that can take some time to finish.
For example, while fetching data from an API, I want it to display a loading animation or message while the async function is pending...
Class being Overwritten by :is
I have the following code :
``` <section class="card">
<header class="card__header">
<h1>FAQ</h1>
</header>...
How to generate this using css
i have tried setting border radius to : border-radius: 48% 48% 0% 0% / 10% 9% 10% 10%; but i am not able to match exact and does look right, the ends are not sharp in mine. codepen would be helpful ๐
