Kevin Powell - Community•12mo ago

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

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))) 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/

Temani Afif

CSS-Tricks

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.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Intrinsic clamp formulation problems