this repo has no description
Mobile-friendly design
+43
-8
+34
src/App.svelte
+34
src/App.svelte
···
41
41
</main>
42
42
43
43
<style>
44
+
/* desktop style */
45
+
44
46
#Content {
45
47
display: flex;
46
48
/* split the screen in half, left for accounts, right for posts */
···
92
94
text-align: center;
93
95
font-size: 2em;
94
96
margin-bottom: 20px;
97
+
}
98
+
99
+
/* mobile style */
100
+
@media screen and (max-width: 600px) {
101
+
#Content {
102
+
flex-direction: column;
103
+
width: auto;
104
+
padding-left: 0px;
105
+
padding-right: 0px;
106
+
margin-top: 5%;
107
+
}
108
+
#Account {
109
+
width: auto;
110
+
padding-left: 5%;
111
+
padding-right: 5%;
112
+
margin-bottom: 20px;
113
+
margin-left: 5%;
114
+
margin-right: 5%;
115
+
height: auto;
116
+
}
117
+
#Feed {
118
+
width: 95%;
119
+
margin: 0px;
120
+
margin-left: 10%;
121
+
margin-right: 10%;
122
+
padding: 0px;
123
+
height: auto;
124
+
}
125
+
126
+
#spacer {
127
+
height: 0;
128
+
}
95
129
}
96
130
</style>
+9
-8
src/lib/PostComponent.svelte
+9
-8
src/lib/PostComponent.svelte
···
222
222
margin-left: 0px;
223
223
border-right: #8054f0 1px solid;
224
224
}
225
-
#embedImages {
226
-
min-width: 500px;
227
-
max-width: 500px;
228
-
max-height: 500px;
229
-
object-fit: contain;
230
-
231
-
margin: 0;
232
-
}
233
225
#carouselContainer {
234
226
position: relative;
235
227
width: 100%;
···
280
272
max-width: 500px;
281
273
margin-top: 10px;
282
274
align-self: center;
275
+
}
276
+
277
+
#embedImages {
278
+
min-width: min(100%, 500px);
279
+
max-width: min(100%, 500px);
280
+
max-height: 500px;
281
+
object-fit: contain;
282
+
283
+
margin: 0;
283
284
}
284
285
</style>