You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
881 B
HTML
53 lines
881 B
HTML
---
|
|
layout: default
|
|
title: Mobile Grid Layout Test
|
|
description: Testing out the mobile grid for this site
|
|
---
|
|
|
|
<div class="container">
|
|
<h2>Mobile Grid Demo</h2>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
article {
|
|
height: 30px;
|
|
background-color: gray;
|
|
color: white;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<article class="col-7@sm col-3@xs">
|
|
col-7@sm | col-3@xs
|
|
</article>
|
|
<article class="col-4@sm col-1@xs">
|
|
col-4@sm | col-1@xs
|
|
</article>
|
|
<article class="col-1@sm col-2@xs">
|
|
col-1@sm | col-2@xs
|
|
</article>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<article class="col-6@sm col-6@xs"></article>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<article class="col-5@sm col-3@xs"></article>
|
|
<article class="col-7@sm col-3@xs"></article>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<article style="width:100%;text-align:center;">
|
|
100%
|
|
</article>
|
|
</div>
|