Here's the code for the adjusted layout! It does reduce the amount of space for the name field though, so that might look wonky on some mobile layouts as a warning.
And then here's nerd stuff about the grid layout in case you want to make further adjustments yourself, but definitely feel free to ask me anyway! Basically what's going on is that the grid-template-columns:5% 110px auto 5%; property currently creates a column layout grid that's essentially:
5%
110px icon
auto name field
5%
So the grid-template-columns: property has to be adjusted in a way that makes room for the new stuff, so like:
5%
110px icon1
110px icon2
auto name field
5%
And then adding on the new divs containing what you want and changing their grid-column: number so it's in the column you want it to be in. Hope this helps in figuring out grid, which makes for cool layouts but is a pain in the butt to understand at first lol.
no subject
And then here's nerd stuff about the grid layout in case you want to make further adjustments yourself, but definitely feel free to ask me anyway! Basically what's going on is that the
grid-template-columns:5% 110px auto 5%;property currently creates a column layout grid that's essentially:icon
name field
So the
grid-template-columns:property has to be adjusted in a way that makes room for the new stuff, so like:icon1
icon2
name field
And then adding on the new divs containing what you want and changing their
grid-column:number so it's in the column you want it to be in. Hope this helps in figuring out grid, which makes for cool layouts but is a pain in the butt to understand at first lol.