hatemhosny/css-layout-media-queries-and-responsive-design.markdown

## css-layout-media-queries-and-responsive-design.markdown

      
    Raw
  

              css-layout-media-queries-and-responsive-design.markdown
            
          
    CSS Layout: Media Queries and Responsive Design

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/rwd_skills
A Pen by Germán Freixinós López on CodePen.
License.

  
## index.html
<body>
    <header>
        <div class="title">My Website</div>
        <nav>
            <ul>
                <li>
                    <a href="">Link 1</a>
                </li>
                <li>
                    <a href="">Link 2</a>
                </li>
                <li>
                    <a href="">Link 3</a>
                </li>
            </ul>
        </nav>

    </header>

    <main>
        <article>
            <h1>This is the main heading</h1>
            <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>

            <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

            <ul class="cards">
                <li>
                    <h2>Card One</h2>
                    <div class="inner">
                        <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Two</h2>
                    <div class="inner">
                        <p>Daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Three</h2>
                    <div class="inner">
                        <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Four</h2>
                    <div class="inner">
                        <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Five</h2>
                    <div class="inner">
                        <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>
                    </div>
                </li>

            </ul>
        </article>
        <aside class="sidebar">
            <p>Have you discovered all of the other excellent content on this website?</p>

        </aside>
    </main>

</body>

## style.css
html {
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
    font-size: 100%;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-size: 1.125rem;
    line-height: 1.5;
}

header {
    color: #fff;
    background-color: #333;
    border: 5px solid #000;
}

header ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

header li {
    display: block;
}

header a {
    display: block;
    padding: 0.5em 1em;
    color: #fff;
    text-decoration: none;
    border-top: 1px solid #999;
}

header .title {
    padding: 1em;
    font-size: 150%;
    font-style: italic;
    font-weight: bold;
}

main {
    padding: 1em;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

main h1 {
    margin-top: 0;
}

.cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1em;
}

.cards li {
    border: 5px solid #000;
}

.cards h2 {
    margin: 0;
    padding: 0.5em 1em;
    color: #fff;
    background-color: #333;
}

.cards .inner {
    padding: 0.5em 1em;
}

.sidebar {
    padding: 0.5em 1em;
    color: #fff;
    background-color: #333;
    border: 5px solid #000;
}

@media screen and (min-width: 40rem) {
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header ul {
        display: flex;
    }

    header a {
        border-top: none;
    }
}

@media screen and (min-width: 80rem) {
    main {
        grid-template-columns: 1fr 1fr;
    }
}

## styles
<link href="https://necolas.github.io/normalize.css/latest/normalize.css" rel="stylesheet" />
	<body>
	<header>
	<div class="title">My Website</div>
	<nav>
	<ul>
	<li>
	<a href="">Link 1</a>
	</li>
	<li>
	<a href="">Link 2</a>
	</li>
	<li>
	<a href="">Link 3</a>
	</li>
	</ul>
	</nav>

	</header>

	<main>
	<article>
	<h1>This is the main heading</h1>
	<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>

	<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

	<ul class="cards">
	<li>
	<h2>Card One</h2>
	<div class="inner">
	<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado.</p>
	</div>
	</li>
	<li>
	<h2>Card Two</h2>
	<div class="inner">
	<p>Daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
	</div>
	</li>
	<li>
	<h2>Card Three</h2>
	<div class="inner">
	<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
	</div>
	</li>
	<li>
	<h2>Card Four</h2>
	<div class="inner">
	<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
	</div>
	</li>
	<li>
	<h2>Card Five</h2>
	<div class="inner">
	<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>
	</div>
	</li>

	</ul>
	</article>
	<aside class="sidebar">
	<p>Have you discovered all of the other excellent content on this website?</p>

	</aside>
	</main>

	</body>
	html {
	box-sizing: border-box;
	font-family: system-ui, sans-serif;
	font-size: 100%;
	scroll-behavior: smooth;
	}

	, ::before, *::after {
	box-sizing: inherit;
	}

	body {
	font-size: 1.125rem;
	line-height: 1.5;
	}

	header {
	color: #fff;
	background-color: #333;
	border: 5px solid #000;
	}

	header ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}

	header li {
	display: block;
	}

	header a {
	display: block;
	padding: 0.5em 1em;
	color: #fff;
	text-decoration: none;
	border-top: 1px solid #999;
	}

	header .title {
	padding: 1em;
	font-size: 150%;
	font-style: italic;
	font-weight: bold;
	}

	main {
	padding: 1em;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
	}

	main h1 {
	margin-top: 0;
	}

	.cards {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 1em;
	}

	.cards li {
	border: 5px solid #000;
	}

	.cards h2 {
	margin: 0;
	padding: 0.5em 1em;
	color: #fff;
	background-color: #333;
	}

	.cards .inner {
	padding: 0.5em 1em;
	}

	.sidebar {
	padding: 0.5em 1em;
	color: #fff;
	background-color: #333;
	border: 5px solid #000;
	}

	@media screen and (min-width: 40rem) {
	header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	header ul {
	display: flex;
	}

	header a {
	border-top: none;
	}
	}

	@media screen and (min-width: 80rem) {
	main {
	grid-template-columns: 1fr 1fr;
	}
	}