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

fixed

instead of

sticky

sticky

the logo, I get a weird margin/padding protrusion. Actually using

float

float

messes up my logo/title . So I am trying to force the issue by setting the

margin-top

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);
}

main {
    margin-top: clamp(calc(9.5em + 1lh) *-1), (40em - 100vw) * 1000, 0);
}

Since I'm trying to get a negative number perhaps there's some hidden issues, but if my understanding of clamp (

clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX))

clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX))

) is correct then it shouldn't be???

This works:

main {
     margin-top: calc((9.5rem + 1lh) *-1);
}

main {
     margin-top: calc((9.5rem + 1lh) *-1);
}

as does this

main, #footer-box, #site-nav, #page-nav {
    margin-left: clamp(0em, (100vw - 40rem) * 1000, 9.5rem);
}

main, #footer-box, #site-nav, #page-nav {
    margin-left: clamp(0em, (100vw - 40rem) * 1000, 9.5rem);
}

even this works

#logo-nav {
    max-width: clamp(
             clamp(9.5rem, (40rem - 100vw)*1000, 40rem),
         (40rem - 100vw)*-1000, min(9.5rem,100%));
}

#logo-nav {
    max-width: clamp(
             clamp(9.5rem, (40rem - 100vw)*1000, 40rem),
         (40rem - 100vw)*-1000, min(9.5rem,100%));
}

Intrinsic clamp math explained https://css-tricks.com/responsive-layouts-fewer-media-queries/
Live site http://dev.arghc.ca/

CSS-TricksTemani Afif

Responsive Layouts, Fewer Media Queries | CSS-Tricks

We cannot talk about web development without talking about Responsive Design. It’s just a given these days and has been for many years. Media queries are a

My website title - An example site home page for structRDFaL

Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.

Intrinsic clamp formulation problems

fixed

fixed

instead of

sticky

sticky

the logo, I get a weird margin/padding protrusion. Actually using

float

float

messes up my logo/title . So I am trying to force the issue by setting the

margin-top

margin-top

main {
    margin-top: clamp(calc(9.5em + 1lh) *-1), (40em - 100vw) * 1000, 0);
}

main {
    margin-top: clamp(calc(9.5em + 1lh) *-1), (40em - 100vw) * 1000, 0);
}

Since I'm trying to get a negative number perhaps there's some hidden issues, but if my understanding of clamp (

clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX))

clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX))

) is correct then it shouldn't be???

This works:

main {
     margin-top: calc((9.5rem + 1lh) *-1);
}

main {
     margin-top: calc((9.5rem + 1lh) *-1);
}

as does this

main, #footer-box, #site-nav, #page-nav {
    margin-left: clamp(0em, (100vw - 40rem) * 1000, 9.5rem);
}

main, #footer-box, #site-nav, #page-nav {
    margin-left: clamp(0em, (100vw - 40rem) * 1000, 9.5rem);
}

even this works

#logo-nav {
    max-width: clamp(
             clamp(9.5rem, (40rem - 100vw)*1000, 40rem),
         (40rem - 100vw)*-1000, min(9.5rem,100%));
}

#logo-nav {
    max-width: clamp(
             clamp(9.5rem, (40rem - 100vw)*1000, 40rem),
         (40rem - 100vw)*-1000, min(9.5rem,100%));
}

Intrinsic clamp math explained https://css-tricks.com/responsive-layouts-fewer-media-queries/
Live site http://dev.arghc.ca/

CSS-TricksTemani Afif

Responsive Layouts, Fewer Media Queries | CSS-Tricks

We cannot talk about web development without talking about Responsive Design. It’s just a given these days and has been for many years. Media queries are a

My website title - An example site home page for structRDFaL

Intrinsic clamp formulation problems

Intrinsic clamp formulation problems

Similar Threads

Similar Threads

Similar Threads