Design comparison
Solution retrospective
I had some problems with the grid layout, it's my main question here....
1.The grid area size does not fit the inside content, it just keep a static size based on the parent size, and it annoyed me during the coding. When I tried to do a handsome thing in each "other-news" sections using CSS grid, their just got enormous spaces and broken sizes, beacuse the "section#other-news" grid did not fit the content, so the content managed to fit the parent. It's a normal thing or there is a way to control the grid area size?
2.I tried to change the grid layout via js (for example, assign a "element.style.gridTemplateArea") but it did not work. There is a way for it?
3.Sorry about the crazy scripts I writed to make the page responsive, I appreciate the feedback about it.
Community feedback
- @PedrodeCTedescoPosted over 1 year ago
Hi there! Nice layout :) Maybe one thing that could help us to understand whats going on in your first question is the quantity of styles files. I like the organization (one style sheet for each part of the project), but with a smaller project put everything on one file could the reading of the code. I dont know if, for example, this problem is due to inhertiance and levels of specificty of the style rules (see this spec: https://www.w3.org/TR/selectors/#specificity number 17).
-
Maybe try: "element.style.gridTemplateArea = 'value'". Or check if 'gridTemplateArea' is the right way to write it. I guess that is, but I'm not sure.
-
Check the Media Queries in CSS. Here (https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) and the specifications on W3c as well.
0 -
Please log in to post a comment
Log in with GitHub
Join 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