@Alex-Archer-I
Posted
Hi there!
I see that you are still not looking for easy ways. Cool =)
I tried to test max-width of the items inside the grid and didn't find any issues. If you have a concrete example, I could look on it.
Speaking about semantic. It didn't even came to my mind that "London" could be address tag, thanks =) I doubt though that "developer and reader" is a quote cos it is something that Jessica said about herself, and it's a bit strange when someone quoting themselves. But that's debatable =)
But the buttons are the list. Also they are links, not buttons =)
So, you should use ul and li here.
<ul>
<li><a href="#">Link here!</a></li>
...and the others
</ul>
Oh, and one advise about JS. It's better to use const instead let if you are sure that it's value won't change. In big apps it'll be a bit less error prone.
Marked as helpful
@joshuapoc
Posted
@Alex-Archer-I Thanks a bunch for your help. About the ul tag thing, i was a bit hesitant whether to put buttons or a list and yeah buttons in this case don't make sense i totally overlooked the fact they´re actually links and i misunderstood the use of q tag. As for the max-width, i was trying to add a folder with screenshots to explain the issue i had. I set grid on the body tag where main and header tags were grid children. Inside main tag i set another container with a max width of 340px,. It seemed to have worked with flex but not with grid, that's only because the container inside the main tag wasn't a direct child to the body therefore it wasn´t snapping to the grid and nor was max-width working. I saw something similar with subgrid but that may be another kettle of fish. Anyhow i added a branch on github that explains that problem better. and again thanks a lot for your help
@Alex-Archer-I
Posted
@joshuapoc
Well, I inspected your work with the dev console, and I'm afraid I can't catch what exactly do you mean, sorry =)
The sn-container element keeps it's width to 340px and shrinked as I switched to mobile version. I even tried to set display of main for grid as well, but it's still the same.
It's really frustrating that we can't add screens here. If you want you can reach me on the discord though.
Marked as helpful
@Alex-Archer-I
Posted
@joshuapoc
Ok, I saw addition for your comment about the github branch and the link to stackoverflow. Now I get it =)
Hmmm, I remember now that I stumbled upon a slightly similar issue with the grid once. I had a textarea element without explicit width value. It was inside grid and while it was all going well in Chrome it didn't work in Mozilla until I set width to 100%. I thought it was a browser issue, but guess that the root of this problem is the same as your problem.
Well, glad that you manage to find a solution! Sorry that I coudn't help =)
Marked as helpful
@joshuapoc
Posted
@Alex-Archer-I yes its hard to explain the issue in plain words. Well to me max width was seemingly not working when in actuality it was, the thing is the sn container wasnt reducing its width within its parent (main) it was overflowing it. Thats why it "worked" when i set flex on main cause sn container was being targeted as the direct child. And no worries youve been a great help thanks a bunch :) Btw my discord username is mightypandecien
