diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css index f871c9c..75f14a8 100644 --- a/web/themes/custom/reha/dist/css/bundle.css +++ b/web/themes/custom/reha/dist/css/bundle.css @@ -3433,15 +3433,38 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div grid-template-rows: repeat(2, auto); padding-top: 3rem; } +@media (max-width: 510px) { + .node-type-ressource { + display: flex; + flex-direction: column; + padding-top: 0; + } +} .node-type-ressource .image-ressource { grid-row: 1; grid-column: 2; margin-right: 2rem; } -.node-type-ressource .image-ressource img { +@media (max-width: 510px) { + .node-type-ressource .image-ressource { + width: 100%; + } +} +@media (max-width: 510px) { + .node-type-ressource .image-ressource .field__item { + display: flex; + width: 100%; + } +} +.node-type-ressource .image-ressource .field__item img { height: 400px; width: auto; } +@media (max-width: 510px) { + .node-type-ressource .image-ressource .field__item img { + margin: auto; + } +} .node-type-ressource .infos-content { grid-row: 1; grid-column: 3/span 4; @@ -3449,6 +3472,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div border: none; background-color: transparent; } +@media (max-width: 510px) { + .node-type-ressource .infos-content { + width: 85%; + } +} .node-type-ressource .infos-content .field--name-field-type-de-ressource { text-transform: uppercase; font-size: 1rem; @@ -3489,6 +3517,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div width: 100%; margin-top: 2rem; } +@media (max-width: 510px) { + .node-type-ressource .body-content { + width: 80%; + margin: auto; + } +} .node-type-ressource .body-content .field--name-field-fichiers { width: fit-content; } diff --git a/web/themes/custom/reha/scss/pages/_node-ressource.scss b/web/themes/custom/reha/scss/pages/_node-ressource.scss index 3fa2a15..96213fc 100644 --- a/web/themes/custom/reha/scss/pages/_node-ressource.scss +++ b/web/themes/custom/reha/scss/pages/_node-ressource.scss @@ -9,16 +9,33 @@ // #block-reha-titredepage{ // display: block !important; // } - + @media (max-width:510px){ + display: flex; + flex-direction: column; + padding-top: 0; + } .image-ressource{ grid-row: 1; grid-column: 2; margin-right: 2rem; - - img{ - height: 400px; - width: auto; + @media (max-width:510px){ + width: 100%; } + .field__item{ + @media (max-width:510px){ + display: flex; + width: 100%; + } + img{ + height: 400px; + width: auto; + @media (max-width:510px){ + margin: auto; + } + } + } + + } .infos-content{ grid-row: 1; @@ -26,6 +43,9 @@ margin-left: 2rem; border: none; background-color:transparent; + @media(max-width:510px){ + width: 85%; + } .field--name-field-type-de-ressource{ text-transform: uppercase; font-size: 1rem; @@ -66,6 +86,10 @@ grid-column: 2 /span 3; width: 100%; margin-top: 2rem; + @media (max-width:510px){ + width: 80%; + margin: auto; + } .field--name-field-fichiers{ width: fit-content; }