Is the Code Playground displaying differently in mobile version?

Question

Hey there!
I played around with some CSS lately in the Code Playground and managed to design a few logos with my basics knowledge.
I mainly use my computer, so the desktop version of the Code Playground.

( -> https://code.sololearn.com/WjDh7ZXVB2aA/# )

But as I tried to view my code in the mobile version, I noticed that the third logo doesn't appear.

I'm guessing that's it's a matter of sizing? I really don't know but that the first idea that came to my mind.

Has it already happened to you?
That's why in general in CSS, I'd rather use % instead of px, for "responsive" issues, but I don't know if it's a real problem?
How do you do?

I'm sorry if this was already asked and answered before, I did a quick search and had no results though :x

Answer 1

All of your containers appart the third (#mik) have no relative units (px): setting px instead of percent for #mik too (and keep percent for the content) will correct your issue, wich is due to the auto-height (relative to the content) default property of block container, and you have empty content (only other nested empty containers), so the computed height is zero, with any percent value (x% of zero is zero): that's make your elements not visible ;)

To convince yourself, and to debug such issues, set some outline (or border, but outline is better almost the time -- not always visible with positionned elements -- because that doesn't sligthly break you design as border -- wich sometimes can make your element larger than you expect) to them, with different colors for differentiate each elements:

outline:2px solid red;

Answer 2

try to place the meta tag
<meta name="viewport" content="width=device-width,initial-scale=1.0">
and try to use % instead px. you can also use CSS like min-width, min-height, max-width,max-height to make responsive page

Answer 3

Thanks for yor answer!
I did what you advise me to do but the 3rd CSS logo still doesn't appear on my mobile version of Code Playground ... I'll try to keep searching

Answer 4

Thanks visph! Setting pixels for my container... I really should have thought of it!!! Thanks a lot for bringing me into the light ! :p