is there anyway i can tell the margin-left to shrink based on the viewport width
meaning at first it's like 15%,but when i reach a certain breakpoint (at 768px)
i switch the layout to grid-template-column:1fr instead of
the smaller the viewport gets; the smaller margin-left should be until it reaches to 0
like if it's a 576px it should be 5% but if it's 460px it should be 0
idk how to do that dynamically without making too many breakpoints
3 Replies
You could try using a combination of the max() function and the calc() where you set calc to % - x px; Like max(0px, calc(5% - 100px)). You need to use the max function to make sure it doesn't get below 0.
For the margin-left property I mean
Just fyi, you can do math in min() and max() without having to use calcs.
max(0px, 5% - 100px);Oh.. even better!