diff --git a/src/AppComponent.vue b/src/AppComponent.vue index ff9709c..4824a75 100644 --- a/src/AppComponent.vue +++ b/src/AppComponent.vue @@ -8,7 +8,7 @@ -
+
@@ -64,7 +64,7 @@ body { background-color: #ffffff; font-family: Arial, sans-serif; width: 100%; - overflow: hidden; + overflow-x: hidden; /* Prevent horizontal scrolling */ } #app { @@ -78,7 +78,6 @@ body { display: flex; color: #000; overflow-y: hidden; - overflow-x: auto; } .left-column { @@ -114,14 +113,15 @@ body { overflow-y: hidden; margin-top: 10px; background-color: #d9e2f3; + display: flex; + justify-content: center; + align-items: center; } -@media (max-width: 1400px) and (min-width: 1201px) { - - .left-column, - .right-column { - flex: 0 0 50%; - } +.right-column-overlay img { + max-height: 100%; + max-width: 100%; + object-fit: contain; } @media (max-width: 1200px) { @@ -129,14 +129,25 @@ body { flex-direction: column; } - .left-column, - .right-column { + .left-column { padding: 10px; } - .rightcolumnvisibility { + .right-column { display: none; } + + .right-column-overlay { + display: flex; + max-height: 150px; + background-color: #ffffff; + } + + .right-column-overlay img { + max-height: 150px; + max-width: 100%; + object-fit: contain; + } } @media (max-width: 767px) { @@ -149,18 +160,13 @@ body { padding: 10px; } - .rightcolumnvisibility { + .right-column { display: none; } .right-column-overlay { - display: block; + display: flex; } } - -.right-column-overlay > .right-column > img { - max-height: 130px; - margin: 0; -} /* eslint-enable */ diff --git a/src/content/ImageContent.vue b/src/content/ImageContent.vue index 590131b..c23113a 100644 --- a/src/content/ImageContent.vue +++ b/src/content/ImageContent.vue @@ -1,7 +1,5 @@