Skip to content

Commit b0dca06

Browse files
YohnYohn
committed
Add padding to container for all viewports
1 parent 9847f55 commit b0dca06

File tree

2 files changed

+90
-91
lines changed

2 files changed

+90
-91
lines changed

‎docs/index.html‎

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<link rel="manifest" href="manifest.json">
2525
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
2626
<!-- Pico.css -->
27-
<link rel="stylesheet" href="pico.css" id="theme-color-ss">
27+
<link rel="stylesheet" href="pico.min.css" id="theme-color-ss">
2828
<link rel="stylesheet" href="pico.colors.min.css">
2929
<!--
3030
Yohn's Simple CSS Class helpers
@@ -238,7 +238,7 @@ <h3>&lt;details class="hide-arrow"&gt;</h3>
238238
</footer>
239239
</article>
240240
<hr>
241-
<article id="tables">
241+
<iv id="tables">
242242
<header>
243243
<h2>Tables</h2>
244244
<h6 class="fw-n">Striped rows require .striped class</h6>
@@ -257,84 +257,86 @@ <h6 class="fw-n">Striped rows require .striped class</h6>
257257
Hidden Rows</button></li>
258258
</ul>
259259
</nav>
260-
<table class="striped" id="hidden-row-example">
261-
<caption> Solar System Planets </caption>
262-
<thead>
263-
<tr>
264-
<th scope="col">Planet</th>
265-
<th scope="col">Diameter (km)</th>
266-
<th scope="col">Dist.to Sun (AU)</th>
267-
<th scope="col">Orbit (days)</th>
268-
</tr>
269-
</thead>
270-
<tbody>
271-
<tr>
272-
<th scope="row">Mercury</th>
273-
<td>4,880</td>
274-
<td>0.39</td>
275-
<td>88</td>
276-
</tr>
277-
<tr>
278-
<th scope="row">Venus</th>
279-
<td>12,104</td>
280-
<td>0.72</td>
281-
<td>225</td>
282-
</tr>
283-
<tr hidden class="hidden-table-row">
284-
<td colspan="4" style="text-align: center;">*Hidden Row Found*</td>
285-
</tr>
286-
<tr>
287-
<th scope="row">Earth</th>
288-
<td>12,742</td>
289-
<td>1.00</td>
290-
<td>365</td>
291-
</tr>
292-
<tr>
293-
<th scope="row">Mars</th>
294-
<td>6,779</td>
295-
<td>1.52</td>
296-
<td>687</td>
297-
</tr>
298-
<tr>
299-
<th scope="row">Jupiter</th>
300-
<td>139,820</td>
301-
<td>5.20</td>
302-
<td>4,333</td>
303-
</tr>
304-
<tr>
305-
<th scope="row">Saturn</th>
306-
<td>116,460</td>
307-
<td>9.58</td>
308-
<td>10,759</td>
309-
</tr>
310-
<tr hidden class="hidden-table-row">
311-
<th scope="row">* Uranus *</th>
312-
<td>50,724</td>
313-
<td>19.22</td>
314-
<td>30,688</td>
315-
</tr>
316-
<tr>
317-
<th scope="row">Neptune</th>
318-
<td>49,244</td>
319-
<td>30.05</td>
320-
<td>60,182</td>
321-
</tr>
322-
<tr hidden class="hidden-table-row">
323-
<th scope="row">* Pluto *</th>
324-
<td>2,377</td>
325-
<td>39.48</td>
326-
<td>90,560</td>
327-
</tr>
328-
</tbody>
329-
<tfoot>
330-
<tr>
331-
<th scope="row">Average</th>
332-
<td>49,594</td>
333-
<td>8.58</td>
334-
<td>13,666</td>
335-
</tr>
336-
</tfoot>
337-
</table>
260+
<div class="overflow-auto">
261+
<table class="striped" id="hidden-row-example">
262+
<caption> Solar System Planets </caption>
263+
<thead>
264+
<tr>
265+
<th scope="col">Planet</th>
266+
<th scope="col">Diameter (km)</th>
267+
<th scope="col">Dist.to Sun (AU)</th>
268+
<th scope="col">Orbit (days)</th>
269+
</tr>
270+
</thead>
271+
<tbody>
272+
<tr>
273+
<th scope="row">Mercury</th>
274+
<td>4,880</td>
275+
<td>0.39</td>
276+
<td>88</td>
277+
</tr>
278+
<tr>
279+
<th scope="row">Venus</th>
280+
<td>12,104</td>
281+
<td>0.72</td>
282+
<td>225</td>
283+
</tr>
284+
<tr hidden class="hidden-table-row">
285+
<td colspan="4" style="text-align: center;">*Hidden Row Found*</td>
286+
</tr>
287+
<tr>
288+
<th scope="row">Earth</th>
289+
<td>12,742</td>
290+
<td>1.00</td>
291+
<td>365</td>
292+
</tr>
293+
<tr>
294+
<th scope="row">Mars</th>
295+
<td>6,779</td>
296+
<td>1.52</td>
297+
<td>687</td>
298+
</tr>
299+
<tr>
300+
<th scope="row">Jupiter</th>
301+
<td>139,820</td>
302+
<td>5.20</td>
303+
<td>4,333</td>
304+
</tr>
305+
<tr>
306+
<th scope="row">Saturn</th>
307+
<td>116,460</td>
308+
<td>9.58</td>
309+
<td>10,759</td>
310+
</tr>
311+
<tr hidden class="hidden-table-row">
312+
<th scope="row">* Uranus *</th>
313+
<td>50,724</td>
314+
<td>19.22</td>
315+
<td>30,688</td>
316+
</tr>
317+
<tr>
318+
<th scope="row">Neptune</th>
319+
<td>49,244</td>
320+
<td>30.05</td>
321+
<td>60,182</td>
322+
</tr>
323+
<tr hidden class="hidden-table-row">
324+
<th scope="row">* Pluto *</th>
325+
<td>2,377</td>
326+
<td>39.48</td>
327+
<td>90,560</td>
328+
</tr>
329+
</tbody>
330+
<tfoot>
331+
<tr>
332+
<th scope="row">Average</th>
333+
<td>49,594</td>
334+
<td>8.58</td>
335+
<td>13,666</td>
336+
</tr>
337+
</tfoot>
338+
</table>
339+
</div>
338340
</article>
339341
<hr>
340342
<article id="tabs">

‎scss/layout/_container.scss‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,21 @@
99
#{$parent-selector} .container,
1010
#{$parent-selector} .container-fluid {
1111
width: 100%;
12-
margin-right: auto;
13-
margin-left: auto;
12+
margin-inline: auto;
13+
padding-inline: var(#{$css-var-prefix}block-spacing-horizontal);
1414
}
1515

1616
#{$parent-selector} .container {
17-
$first-breakpoint: true;
17+
//$first-breakpoint: true;
1818
@each $key, $values in $breakpoints {
1919
@if $values {
2020
@media (min-width: map.get($values, "breakpoint")) {
2121
max-width: map.get($values, "viewport");
22-
@if $first-breakpoint {
23-
$first-breakpoint: false;
24-
padding-right: 0;
25-
padding-left: 0;
26-
} @else {
27-
padding-right: var(#{$css-var-prefix}spacing);
28-
padding-left: var(#{$css-var-prefix}spacing);
29-
}
22+
//@if $first-breakpoint {
23+
// $first-breakpoint: false;
24+
// padding-right: 0;
25+
// padding-left: 0;
26+
//}
3027
}
3128
}
3229
}

0 commit comments

Comments
 (0)