diff --git a/RELEASE.md b/RELEASE.md index f3cae2b7b..3f8c3d034 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -50,6 +50,7 @@ ### Fix - Migliorata l'accessibilità del modulo di valutazione del sito che si trova in fondo ad ogni pagina. +- Il blocco Elenco con variazione Bandi viene visualizzato correttamente anche su tablet. ## Versione 10.4.2 (23/11/2023) diff --git a/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss b/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss index d030eef3a..99e4b01b4 100644 --- a/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss +++ b/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss @@ -5,6 +5,10 @@ gap: 1.3rem; -ms-grid-columns: 1fr 1.3rem 1fr 1.3rem 1fr; grid-template-columns: 1fr 1fr 1fr; + + .read-more a.read-more { + flex-direction: row; + } } .card-wrapper { @@ -39,7 +43,7 @@ } // smartphone - @media (max-width: 585px) { + @media (max-width: #{map-get($grid-breakpoints, sm)}) { .bandi-in-evidence-cards-wrapper { .card-wrapper { width: 100%; @@ -51,13 +55,17 @@ } // tablet - @media (min-width: 586px) and (max-width: 1367px) { - .bandi-in-evidence-cards-wrapper { + .bandi-in-evidence-cards-wrapper { + @media (min-width: #{map-get($grid-breakpoints, md)}) and (max-width: #{map-get($grid-breakpoints, xxl)}) { grid-template-columns: auto auto; + } - div.read-more a.read-more { - flex-direction: row; - } + @media (min-width: #{map-get($grid-breakpoints, md)}) and (max-width: #{map-get($grid-breakpoints, lg)}) { + gap: 1rem; + } + + @media (min-width: #{map-get($grid-breakpoints, sm)}) and (max-width: #{map-get($grid-breakpoints, md)}) { + display: block !important; } } @@ -111,9 +119,8 @@ bottom: 0; padding-top: 0.75rem; - @media (max-width: 585px) { + @media (max-width: #{map-get($grid-breakpoints, sm)}) { display: flex; - flex-direction: row; align-items: center; color: $analogue-1-a7; font-size: 0.77778rem; @@ -122,7 +129,7 @@ text-transform: uppercase; } } - @media (max-width: 585px) { + @media (max-width: #{map-get($grid-breakpoints, sm)}) { margin-top: 0; } }