Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago
arghc

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

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

as does this
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%));
}

Intrinsic clamp math explained https://css-tricks.com/responsive-layouts-fewer-media-queries/
Live site http://dev.arghc.ca/
Screenshot_2024-01-09_at_5.04.20_PM.png
Screenshot_2024-01-09_at_5.04.37_PM.png
Screenshot_2024-01-09_at_5.05.00_PM.png
Screenshot_2024-01-09_at_5.25.11_PM.png
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
Responsive Layouts, Fewer Media Queries | CSS-Tricks
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.
Was this page helpful?