From f6130faa7ce527c4b2a4f864c7e05f7197f92084 Mon Sep 17 00:00:00 2001 From: bach Date: Thu, 25 Mar 2021 21:37:03 +0100 Subject: [PATCH] responsive: home pricing --- .../custom/materiotheme/assets/dist/main.css | 28 +++++++++++++++ .../materiotheme/assets/styles/main.scss | 35 ++++++++++++++++++- 2 files changed, 62 insertions(+), 1 deletion(-) diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 46f757d..2f659cd 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -19829,6 +19829,9 @@ article.node--type-frontpage .node__content > section.home-database { display: flex; flex-flow: row wrap; justify-content: space-between; } + @media (max-width: 654px) { + article.node--type-frontpage .node__content > section.home-database .cards-list-home ul { + justify-content: space-around; } } article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li { padding: 0 0 6.5px 0; box-sizing: border-box; @@ -19976,11 +19979,20 @@ article.node--type-frontpage .node__content > section.home-pricing > h3 { text-align: center; text-transform: capitalize; padding: 0.7em 0 0.3em 0; } + @media (max-width: 654px) { + article.node--type-frontpage .node__content > section.home-pricing > h3 { + text-align: left; + padding: 0 0.4em; } } article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing-pitch { text-align: center; } article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing-pitch p { margin: 0; } + @media (max-width: 654px) { + article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing-pitch { + text-align: left; } + article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing-pitch p { + padding: 0.5em 1em; } } article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing { display: flex; @@ -19992,10 +20004,22 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name- padding: 1em; margin: 0; text-align: center; } + @media (max-width: 654px) { + article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing { + flex-flow: column; + justify-content: flex-start; } + article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing p { + flex: 0 0 auto; + text-align: left; + padding: 0 1em 0.5em; } } article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference { display: flex; flex-flow: row nowrap; } + @media (max-width: 654px) { + article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference { + flex-flow: column; + justify-content: flex-start; } } article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item { flex: 0 0 50%; text-align: center; @@ -20037,6 +20061,10 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name- padding: 0.5em; } article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-body p { margin: 0; } + @media (max-width: 654px) { + article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item { + flex: 0 0 auto; + padding: 0; } } .infinite-loading-container .infinite-status-prompt i[class^="loading-"] { width: 15px; diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index 38d3ed9..06ff9a0 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -789,6 +789,9 @@ article.node--type-frontpage{ display: flex; flex-flow: row wrap; justify-content: space-between; + @include col-mediaquery-max(3){ + justify-content: space-around; + } li{ padding:0 0 $column_goutiere / 2 0; box-sizing: border-box; @@ -1005,10 +1008,19 @@ article.node--type-frontpage{ text-align: center; text-transform: capitalize; padding: 0.7em 0 0.3em 0; + + @include col-mediaquery-max(3){ + text-align: left; + padding: 0 0.4em; + } } .field--name-field-pricing-pitch{ text-align: center; p{ margin:0;} + @include col-mediaquery-max(3){ + text-align: left; + p{ padding: 0.5em 1em; } + } } .field--name-field-pricing{ // padding:2em 0; @@ -1022,11 +1034,23 @@ article.node--type-frontpage{ margin: 0; text-align: center; } + @include col-mediaquery-max(3){ + flex-flow: column; + justify-content: flex-start; + p{ + flex: 0 0 auto; + text-align: left; + padding: 0 1em 0.5em; + } + } } .field--name-computed-products-reference{ display: flex; flex-flow: row nowrap; - // TODO: mediaQuery column + @include col-mediaquery-max(3){ + flex-flow: column; + justify-content: flex-start; + } >.field__item{ flex:0 0 50%; text-align: center; @@ -1070,6 +1094,15 @@ article.node--type-frontpage{ margin: 0; } } + + @include col-mediaquery-max(3){ + flex: 0 0 auto; + padding:0; + // height: auto; + >article{ + + } + } } } }