Design comparison
Solution retrospective
I like how the challenge turned out to be with the javascript implementation however id like to use css only for transitions as simple as the one i used
What challenges did you encounter, and how did you overcome them?- i dont know whether its ok to use min-height: inherit; on the main tag so it inherits the height of the body. The main tag was too short, i managed to solve the problem with min-height: inherit; and flex-grow: 1; but id like to know which approach is better
- max-width: ..px and width: 100% will work on both flex and grid items. However on grid items, when scaling down the viewport max-width gets ignored, id like to know why that happens with grid and not with flex
Id appreciate any light shed on why max-width: 100% for containers works on flex items when scaling down the viewport but it wont work on grid items
Community feedback
- @Alex-Archer-IPosted 5 months ago
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
andli
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
insteadlet
if you are sure that it's value won't change. In big apps it'll be a bit less error prone.Marked as helpful0@joshuapocPosted 5 months ago@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
0@Alex-Archer-IPosted 5 months ago@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 helpful1@Alex-Archer-IPosted 5 months ago@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 helpful1@joshuapocPosted 5 months ago@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
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord