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 @@
-
![Cross]()
-