Igor Petrovic Design
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 2/19/2024 in #front-end
Why browsers show elements bigger than defined in CSS
The developer has implemented my design. The logo is intended to be 180 x 180 px. In Inspector it indeed reads 180 x 180 as the rendered size, but using Screen Ruler (Windows Power Tools) I measured 225 x 225 px, which is 1.25 times bigger.
Then I made a test HTML/CSS project, put div to be 100x100px and it is also 125 x 125 px on my screen when opened in Chrome and Firefox.
My screen is 1920 x 1080px with 16.1 in diagonal, which gives around 137 PPI. Why the object size is bigger in the browser than defined, and does screen resolution and PPI affect this?
Thanks!
3 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/17/2023 in #front-end
CSS FLEX — Manage free space left after wrap
I have a flex defined like seen here: https://codepen.io/Jazzigula/pen/jOdYyYp
At the moment the flex wraps its width doesn't automatically shrink further to the intrinsic size based on the flex items now stacked one on top of the other, but the flex container rather keeps that breakpoint width leaving the empty space on the side.
Is there a way to eliminate that free space but to keep items flush left?
The only way I know to manage the spacing between the items on the main flex axis is through justify-content and margins. But can't find a way to achieve this 🙂 Thanks
24 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/15/2023 in #front-end
CSS FLEX — Change item order, but only if wrap occurs
I would like to reorder flex items but only if it's wrapped. The only way I see now is to go to Inspect and note the viewport width at which wrapping occurs, and then add media query with order property added to the item in subject.
Is there a "natural" way of achieving this, through a property and not query? I might change the paddings, margins, etc. down the road, so I would need to search and edit the breakpoint each time in the query. Thanks!
4 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/13/2023 in #front-end
Should I use the same HTML elements / sections for different breakpoints?
I guess the answer is that it depends, but still hope for some general guides on this. So, say I have a nav element which looks and works significantly different at Desktop and Mobile view (i.e. horizontal nav in Desktop and inside hamburger menu in mobile)
Do you use the very same nav element but re-stylize it in CSS using media queries, or you just have a different nav with different style and use queries to toggle visibility of these two? Thanks!
14 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 10/22/2023 in #front-end
CSS Does auto margin have a predefined minimum value (that prevents it to shrink to zero)?
Hi,
New here, read rules, hope I am posting the question the right way 🙂
I have set the max-width for a div at 400px, and margin: auto; and the div is centered.
Then I started to shrink the viewport width. I was expecting that margins will gradually go to zero, and then when there is no space for margins (at 400px viewport width) that div will start to shrink proportionally.
But I've noticed that div shrinks before the viewport width reaches 400px because auto margins don't go to zero but keep some minimum value (200px or so).
Is this a normal behaviour for auto margin, and could it be set differently?
Thanks!
18 replies