What is the best way to add margin to CSS grid that's also responsive? I didn't work on my website being responsive as I focused on my new grid skills instead.
@anoshaahmed
Posted
To get rid of the accessibility/HTML issues shown in your Report:
<main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more<h1> in your code<section> and <article> usually need a heading; so if you don't need a heading in it, use some other element such as <div>Great job! :)
Marked as helpful
@eklemis
Posted
Hi Joseph,
That's a great solution. Keep working and growing!
For your question about responsiveness, you have to use Media Query on your css. It is recommended that you write style for mobile screen first, then code the style again for desktop screen wrapped inside @media only screen and (min-width: 768px) { /* For desktop: */} for desktop screen (you can add other screen size as well.
I used to arrange the order like below:
/* Put all style for mobile screen here */ @media only screen and (min-width: 768px) { /* Put all your style for desktop screen here */ }
For more reference on this you could read here
Also for margin of your grid you can use vw to your width instead of 'px'. 'px' is static value, while 'vw' is portion of screen width, range from 1 to 100vw (maximum width of the screen)
Marked as helpful
@mamba-dev-KE
Posted
Nice attempt. It is generally recommended that grid should be used for layouts that feature two dimensions such as both a row and column while flexbox should be used for layouts that feature one dimension i.e. either row or column. For instance, your author class is a good candidate for flexbox to make the items center aligned on the vertical axis. You can simply do this by setting display of the class to flex and align-items to center. In short, flexbox is meant for layout elements within UI components while grid is meant for placing all the UI components on different columns and rows on the whole page. A good course for learning CSS grid is this free course by Wes Bos (https://cssgrid.io/). Consider checking it out for a deeper understanding of grid.
Marked as helpful
@AndresMpa
Posted
It seems that you got some issues with your solution:
Marked as helpful
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
