Hello,
I’ve ran into an issue where in mobile view nav the middle link in the container isn’t vertically centered. I’ve checked that there would be no odd margins and paddings but failed to find any that would directly affect the alignment of the flex children in the container. Any ideas/suggestions on what could be done to solve this issue.? Thanks for the help.!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi. Please add a screenshot (vertically-centered align related to?..what container?..). No way to answer like this.
Sorry if my explanation wasn’t clear enough. The middle link isn’t vertically aligned in the link-wrapper container. I added a screenshot to show the issue. Let me know if you need more details.
My bad. I meant it’s not horizontally aligned.
This is your issue. The flex works fine (space between)
Okay, so is there a solution to have the middle link be horizontally aligned in the container and still have the outer links go to the edges of the container.?
First - do not create nested grids (display: flex inside display: flex inside display: flex ) for such simple layout (in your way is really hard to debug). Use nested grid only for…nested grids (example).
so - Change the logo wrapper to display block - the img to align-center (Thats it)
Next. You could add minimal “-5px” relative or use absolute center “the problem” - on very small devices link2 and3 could look like “same link” (or even override)
Design/UI: maybe add light bg color (easier to see the links this on very small devices)
