Skip to content

Instantly share code, notes, and snippets.

@tbennett

tbennett/HTML Mobile 1st Example (inline-block) DON'T USE! for reference only

Last active June 12, 2019 01:23
Show Gist options
  • Save tbennett/90785385a1b2badc53ab to your computer and use it in GitHub Desktop.
Save tbennett/90785385a1b2badc53ab to your computer and use it in GitHub Desktop.
Download ZIP
Mobile 1st: Responsive multiple columns using display:inline-block and single media query
Raw
HTML Mobile 1st Example (inline-block) DON'T USE! for reference only
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- specialized typefaces can be added to a webpage from external sources -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Merriweather:700" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans" />
<style>
/* another method of injecting fonts into the CSS is to use the @import CSS statement
- however, @imports can slow down page loading because the browser will download them one at a time.
Using the link tags, allows the browser to download CSS and fonts in parallel
@import url(http://fonts.googleapis.com/css?family=Merriweather:700);
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
*/
* {
margin:0;
padding:0;
}
p {
padding:.5em;
color:#777;
font: .9em/1.5 'Noto Sans', sans-serif;
}
.site-header {
background: #758;
color: #fff;
padding:.5em;
font-family: 'Merriweather', serif;
}
.main-nav {
background: #e84;
}
.lnk {
display:inline-block;
font: 1.2em/1 'Noto Sans', sans-serif;
margin:.5em;
}
.lnk a {
text-decoration:none;
color: #536;
}
.lnk a:hover {
color:#fff;
}
.row {
text-align:center;
padding: 1em 0;
background:#fff;
}
.col {
display:block;
margin: 2em auto;
width:80%;
}
.hero {
height:225px;
background-image: url(http://goo.gl/HNrlj3);
background-size:cover;
}
.features {
border-bottom: 3px solid #da4;
border-top: 3px solid #da4;
padding-bottom:3em;
}
.features .col{
outline:5px solid #acb;
}
.promos .col {
background: #eee;
text-align:left;
}
.site-footer {
text-align:center;
background: #444;
color:white;
}
/* status indication */
#home .home,
#about .about,
#faq .faq,
#contact .contact {
color: #fff;
}
/* the media query is used to check the width of the browser window and
apply new CSS rules to the page based upon the current window size.
In this case, see if the browser's width is greater than 720px.
The following rules create the desktop layout. */
@media only screen and (min-width: 720px) {
html, body {
background:#444;
}
.row {
padding: 2em 0; /* no hack needed to force the row to contain the columns. :) */
}
.col {
display:inline-block; /* makes the columns stack horizontally */
boxsizing:border-box; /* fixes horizontal sizing when padding & border are applied */
}
.features .col{
width:27%; /* (3 * 27) + (2.5 * 6) = 96 */
margin: 0 2.5%;
outline:5px solid #acb;
}
.promos .col {
width: 21%; /* (4 * 21) + (1.5 * 8) = 96 */
margin: 0 1.5%;
background: #eee;
text-align:left;
}
}
</style>
</head>
<body id="home">
<div class="wrapper">
<header class="site-header">
<h1>Full-Width Content</h1>
</header>
<nav class="main-nav">
<ul>
<li class="lnk"><a class="home" href="#" title="">Home</a></li>
<li class="lnk"><a class="about" href="#" title="">About</a></li>
<li class="lnk"><a class="faq" href="#" title="">FAQ</a></li>
<li class="lnk"><a class="contact" href="#" title="">Contact</a></li>
</ul>
</nav>
<section class="hero"></section>
<section class="features row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, nemo, nulla! Tenetur repellendus dignissimos dicta. </p>
</div>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, nemo, nulla! Tenetur repellendus dignissimos dicta. </p>
</div>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, nemo, nulla! Tenetur repellendus dignissimos dicta. </p>
</div>
</section>
<section class="promos row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates cumque perferendis voluptate, repellat beatae quod accusantium corrupti sunt, aperiam veritatis? Rerum officiis sint fugit nihil, quod perferendis numquam magnam modi.</p>
</div>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates cumque perferendis voluptate, repellat beatae quod accusantium corrupti sunt, aperiam veritatis? Rerum officiis sint fugit nihil, quod perferendis numquam magnam modi.</p>
</div>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates cumque perferendis voluptate, repellat beatae quod accusantium corrupti sunt, aperiam veritatis? Rerum officiis sint fugit nihil, quod perferendis numquam magnam modi.</p>
</div>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates cumque perferendis voluptate, repellat beatae quod accusantium corrupti sunt, aperiam veritatis? Rerum officiis sint fugit nihil, quod perferendis numquam magnam modi.</p>
</div>
</section>
</div>
<footer class="site-footer">
<p>repellat beatae quod accusantium corrupti sunt.</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment