Fix for small mobile screens
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
/* WIDTH */
|
||||
|
||||
$widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1024);
|
||||
$widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200, 250, 275, 280, 290, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1024);
|
||||
|
||||
@each $width in $widthvalues {
|
||||
.w-#{$width} {
|
||||
|
||||
@@ -33,16 +33,16 @@
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-30">
|
||||
<div class="p-30 content">
|
||||
<h1 class="container ta-c brandblue">{{ .Site.Params.Section3.Title }}</h1>
|
||||
<div class="container flex-row wrap j-center">
|
||||
<div class="container flex-row wrap j-center w-full">
|
||||
{{ range .Site.Params.Section3.List }}
|
||||
<div class="container min-w-400 max-w-400 m-20 flex-1 flex-row ai-center {{ if (eq .side "right") }} direction-row-reverse{{end}}">
|
||||
<div class="container max-w-400 m-20 flex-1 flex-row wrap ai-center j-center w-full {{ if (eq .side "right") }} direction-row-reverse{{end}}">
|
||||
<div class="bg-{{.color}} bg-bubble icon-bubble w-75 h-75 m-20">
|
||||
{{ $icon := resources.Get ( print "images/icons/" .icon ".svg") }}
|
||||
<img src="{{ $icon.Permalink }}" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex-1 min-w-250 w-300">
|
||||
<h2 class="m-b-0 {{.color}} {{ if (eq .side "right") }} ta-r{{end}}">{{.title}}</h2>
|
||||
<p class="m-t-0 ta-j">{{.description}}</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user