diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.html b/src/app/_modules/pages/sections/types/basic/images/images-section.component.html index 4495b3f..0f24474 100644 --- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.html +++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.html @@ -33,7 +33,7 @@ -
+
@@ -41,6 +41,7 @@
+
@@ -57,7 +58,25 @@
- +
+
+ + +
+ + + + +
+ +
+
+
+
+ +
diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss index 109d0e7..d0145c2 100644 --- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss @@ -1,7 +1,18 @@ +.mobile{ + display: none; +} +.desctop{ + display: flex; +} +.close{ + position: absolute; + top:24px; + right: 24px; +} .first{ display: none; &.large-preview{ - display: flex; + display: flex; width: 100%; max-width: 720px; margin-bottom: 8px; @@ -132,7 +143,6 @@ right: 0; bottom: 0; z-index: 2; - display: flex; position: fixed; align-items: center; justify-content: center; @@ -156,11 +166,7 @@ width: 100%; height: 100%; } - .close{ - position: absolute; - top:24px; - right: 24px; - } + .left { width: 72px; flex-grow: 0; @@ -206,6 +212,12 @@ } @media screen and (max-width: 480px) { + .desctop{ + display: none !important; + } + .mobile{ + display: flex !important; + } .fullscreen { @@ -215,10 +227,18 @@ pointer-events: none; - width: calc(100vw - 2 * 16px); - height: calc(100vh - 2 * 16px); - left: 16px; - right: 16px; + width:100vw; + height:100vh; + left: 0; + right: 0; + } + .prev{ + z-index: 5; + margin-right: -50px; + } + .next{ + z-index: 5; + margin-left: -50px; } } }