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
No, it's 100%, in Mozzila, Brave and Chrome. But that reminded me that I have 125% zoom by default in Windows. Thanks for your answer, it guided me to the solution!
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
Thanks!
24 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/17/2023 in #front-end
CSS FLEX — Manage free space left after wrap
Now I see the logic of why it doesn't work. This is very helpful because I always wonder if I might be missing something very basic. I'll try in this direction then, thanks a bunch once again!
24 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/17/2023 in #front-end
CSS FLEX — Manage free space left after wrap
Do you think that container query could help. I stumble upon it while digging the solution
24 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/17/2023 in #front-end
CSS FLEX — Manage free space left after wrap
Kidding, but I am a begginer, if it works why not. Just can't imagine that solution
24 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/17/2023 in #front-end
CSS FLEX — Manage free space left after wrap
Oh no floats, I am afraid 🙂
24 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 guess I am making some wrong assumptions about how flex works. But I would like the container to be the size of the items always if possible 🙂
So let's say there are two items one 200px and the other 400px width.
I set flex-flow: row wrap;
When the viewport hits the 200+400=600px it wraps. So after the wrap the container is 599px, but I would like it instantly to shrink to 400px since it is the width of the wider item.
24 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/17/2023 in #front-end
CSS FLEX — Manage free space left after wrap
to shrink instantly after the wrap
24 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/17/2023 in #front-end
CSS FLEX — Manage free space left after wrap
Yes, to the width of "ICONS LANGUAGE" item
24 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/17/2023 in #front-end
CSS FLEX — Manage free space left after wrap
Thanks Mark. However, this makes items grow and take the free space, and I would like items to keep their size, and that flex shrinks to their size
24 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 can push the items on the right with the margin-left:auto; but then items are not flushed to the left
24 replies
KPCKevin Powell - Community
•Created by Igor Petrovic Design on 11/17/2023 in #front-end
CSS FLEX — Manage free space left after wrap
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
flex-wrap: wrap-reverse; is just what I need since I have two items in a flex only. I tried with row-reverse, column-reverse etc. but felt it's not the right way.
Also, for a beginner like me, knowing what can't be done is valuable as much as knowing what can. Many 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 understand. So glad we have this Discord channel!
14 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?
This is just what I needed, many thanks once again!
14 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?
Also, can one say that generally whatever expects click is a candidate for JS?
14 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?
Many thanks to both of you, these answers are super helpful for me!
I am a few months in HTML and CSS now, and while I have a solid grasp on tags / rules / basic concepts, at this point methodology questions like this one are my main point of confusion.
And here is the new one, I have no clue about JavaScript, because I thought it's a good idea to practice HTML and CSS through a few test projects and solidify what is already learned, to avoid a tutorial loop.
But I don't know which tasks are good candidates for JavaScript, and I lose time to keep digging expecting them to be CSS-only solutions. For example, I learned that the navigation menu like in your example could be done even without JS (checkbox hack and some other solutions).
And I am asking myself is there a point to mastering those workarounds if it's done in JS by default 🙂 It would be great if there is a video like "Top 10 things you need JavaScript for).
Long story short, do you recommend starting with JavaScript, mastering these workarounds, or for now just identifying what should wait for JavaScript and continuing to classic CSS tasks?
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)?
Thanks!
18 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)?
I noticed the problem in my own design, and then isolated the problem to this example. Joao's snippet works well everywhere (Codepen, Firefox, Brave) but not in Chrome for some reason. I have disabled all extensions and rerun the browser, with no success.
Anyway, since I am learning the basic concepts, the main goal for me is to know that such behavior in Chrome is a bug and not a standard. That's perfectly fine for now.
Many thanks for your answers, I've got some very valuable information and thoughts!
18 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)?
Thanks Joao, this works in Firefox but not in Chrome. It might be a browser preference on how to compute auto margin?
18 replies