@zitescody
Posted
Hello, @UDsGitHub. Below is my advice on optimizing your project.
- It appears your project is not optimized for mobile layouts. Your boxes don't become a single column at smaller breakpoints. CSS Grid is the way to go here, which you have already incorporated. I'd do something like this:
css:
main { display: grid; grid-template-columns: [first] 100% [end]; grid-template-rows: repeat(4, 1fr); grid-template-areas: "one" "two" "three" "four" ; }
.item1 { grid-column-start: first; grid-column-end: end; grid-area: one; }
.item2 { grid-column-start: first; grid-column-end: end; grid-area: two; }
.item3 { grid-column-start: first; grid-column-end: end; grid-area: three; }
.item4 { grid-column-start: first; grid-column-end: end; grid-area: four; }
@media only screen and (min-width: 768px) { main { display: grid; grid-template-columns: [first] 33% [second] 33% [third] 33% [end]; grid-template-rows: [first] 50% [second] 50% [end]; grid-template-areas: "one" "two " "four" "one" "three " "four" ; } item1 { grid-column-start: first; grid-column-end: second; grid-row-start: first; grid-row-end: end; grid-area: one; }
item2 { grid-column-start: second; grid-column-end: third; grid-row-start: first; grid-row-end: second; grid-area: two; }
item3 { grid-column-start: second; grid-column-end: third; grid-row-start: second; grid-row-end: end; grid-area: three; }
item4 { grid-column-start: third; grid-column-end: end; grid-row-start: first; grid-row-end: end; grid-area: four; } }
I will leave the positioning of the boxes up to you, but this should set your grid in the right spot for both a mobile and desktop variant of your content. This is a rather visual way of solving CSS Grid. It is not the most intuitive, but is great for beginners.
2.) Instead of using h3, switch them to h2. your headings should only increase by 1. This gives your page a hierarchical structure for screen readers to navigate your page easier.
I hope this helps. I know the code is long. Play around with it, see how it works in your project.
Please mark this as helpful if you benefitted from my feedback. Happy coding!!
@zitescody
Posted
@zitescody Also, the code did not paste right on my comment. It shows everything inline, rather than with clean indents and breaks. I hope it is not too hard to read
@UDsGitHub
Posted
@zitescody thank you very much for pointing that out.. i missed a '}' in my code and that prevented the media query i had already set up from showing up.