My CSS code:
ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
li {
flex: 1;
}
li:nth-of-type(8) {
flex: 0.2 24%;
}
I’m not confident about how I handled the 8th list item.
My CSS code:
ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
li {
flex: 1;
}
li:nth-of-type(8) {
flex: 0.2 24%;
}
I’m not confident about how I handled the 8th list item.
Hi @Nohbdy
Well done
You could use flex: auto;
for the <li>
and then remove the special rule for the 8th element.
The difference between flex: 1
and flex: auto
(at least in this context) is that auto
means: “Make the element as big as necessary.” and 1
means: “Break the lines when possible.”
I hope that help!
Have a nice day,
Michael
If I do that, the 8th element doesn’t get moved to the next line. Could there be a screen resolution issue or is the viewport on the test page too wide? I’ve included what I’m seeing.
Interesting.
The width of the <ul>
is set to 450px. So the viewport shouldn’t be a problem.
The colors look a bit odd in your screenshot. For me it looks like this:
ul
rule, because they don’t matter in this situation)
Could you tell me which browser, OS and screen resolution you are using?
The colors are off because I purposefully saved the image as a GIF. I’ll use PNG.
I’m on Windows 10, Firefox 99.0.1 with 1080p screen.
Out of curiosity, I tried Edge and Chrome. Edge is completely wrong (ver. 100.0.1185.44), with five elements in row 1, four on row 2, and the final element taking up all of row 3.
Only on Chrome does everything look correct. Version 100.0.4896.127.
I’m also on Win 10 and 1080p and it looks correct in all three browsers.
I tested different zoom level and default font sizes, but it all looks okay.
There has to be something interfering (Add-ons, Web Extensions, settings, another software).
Could you please try to start Firefox in Troubleshoot Mode:
https://support.mozilla.org/en-US/kb/diagnose-firefox-issues-using-troubleshoot-mode?redirectslug=troubleshoot-firefox-issues-using-safe-mode&redirectlocale=en-US
Can you think of any software that may have an effect on the page layout?
It seems font size was the culprit. I don’t recall ever changing it but it was on font size 14 so I switched it to 16 and that resolved it. I changed it on Edge and that too resolved the issue.
Seems MDN should make a note about this. Thank you for making me aware of Troubleshoot Mode though!
Glad you were able to solve it!
I switched the font myself before, but it seems it only automatically updates the font of the page but not the one of the task iframe. So I didn’t see a difference until I reloaded the page.