Fix for small mobile screens

This commit is contained in:
2022-02-04 13:59:38 +01:00
parent 7895071d7a
commit 6896604588
3 changed files with 185 additions and 5 deletions

View File

@@ -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} {

View File

@@ -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>