diff --git a/web/src/styles/componentStyles/MainGallery.css b/web/src/styles/componentStyles/MainGallery.css index 77aef84..3cbbff5 100644 --- a/web/src/styles/componentStyles/MainGallery.css +++ b/web/src/styles/componentStyles/MainGallery.css @@ -23,6 +23,8 @@ object-fit: cover; width: 100%; height: 100%; + + flex-shrink: 0; flex-grow: 0; transition: translate 700ms ease-in-out; @@ -72,8 +74,8 @@ left: 0%; bottom: 0%; color: #000000; - margin-left: 4%; - margin-bottom: 1.5%; + margin-left: clamp(20px, 4%, 4%); + margin-bottom: clamp(20px, 1.5%, 1.5%); } .text { @@ -89,6 +91,7 @@ border-radius: 0.4em; padding: 0.3em 0.5em; margin: 0; + margin-left: .2em; box-shadow: 0.1em 0.2em 0.3em rgba(0, 0, 0, 0.2); } @@ -127,3 +130,29 @@ .poo { overflow-wrap: break-word; } + +@media screen and (max-width: 1900px) { + .back, .forward { + scale: 0.7; + margin-right: 2%; + margin-left: 2%; + } + + .details{ + margin-left: 6%; + margin-bottom: 1.5%; + } +} + +@media screen and (max-width: 1580px) { + .details h1 { + font-size: 1.8em; + margin-left: .4em; + } + + .back, .forward { + scale: 0.6; + margin-left: 0%; + margin-right: 0%; + } +}