content scaling in proportion no matter the screen size
Hey, i've noticed that on some websites (this one in particular https://piccalil.li/), that even though text ("Most popular this month" for this example) and elements (the cards for this example) have a minimum size set with
clamp, they still scale below their limit and keep everything in proportion even on extremely minuscule screen sizes like 180px. I don't quite understand how this is achieved. I've used exactly the same code as the website for this example and still can't replicate it. As you can see, in my codepen and the image examples, the behavior isn't the same and instead mine overflows.
https://codepen.io/deerCabin/pen/PoroYLO
i'd really appreciate some insight, thank you in advance.
15 Replies
Did you only test your code in Codepen? I noticed that your code actually works, but it depends on the placement of the code in codepen. If I put the code on the left or right, it doesn't work. However, it works perfectly fine if I place the code on top, which gives your layout the full width of the window.
hm, i tried it locally too and it gave the same result
Which browser did you use? I initially tested on Chrome when it worked. I retried on Firefox and it does not work even when the code is on top.
that explains it, i initially tested it on firefox but it just worked on chrome for me. I find that strange though as i tested the example website on firefox too and that worked?
Looks like piccalil still works on Firefox but your codepen doesn't.
exactly that, i'm lost on why it functions like that
the limit before it starts overflowing on mine seems to be about
335px which poses a bit of an issue for devices below that widthI found the key.
I copied your code into a regular project outside of Codepen and got it to work by adding this meta tag. It does not work in Firefox without it.
oh awesome, i just checked my code outside of codepen and it has exactly that in the head but with
intial-scale, however it produced this result still? Is intial scale perhaps the issue then?
That doesn't work for you?
OK. I just checked and it doesn't work with initial scale.
Try it without the initial scale. Only the width.
yeah i was just about to mention that it worked without the initial scale. Why does that cause the problem?
also it removes space on the right side however doesn't seem to on piccalilli?
I don't know why that causes a problem, but I noticed that piccallil doesn't have it.
ah i see, that might be something i have to look into then. I appreciate you helping with that, i would never have thought a meta tag would be the cause, thank you.
may i ask what prompted you to look in the meta tags so i know how to fix future issues?
I remembered that was an issue for very narrow screens. I don't recall when I originally discovered it.
ah that's okay, thank you.
if anybody has some spare time, i'd appreciate some help with this issue, thank you.
is anybody able to give some insight?