denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SubtitledImage now responsive for mobile screen width

Browse Source
This commit is contained in:
denizk0461
2026-02-06 18:54:41 +01:00
parent 7c85800a83
commit af0986a9f7
1 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/lib/components/subtitled-image.svelte
View File

@@ -55,25 +55,6 @@
margin-right: auto; margin-right: auto;
} }
.subtitled-img-container-left, .subtitled-img-container-right {
width: 34%;
}
/* Don't limit height of images set to the side because text flows around them */
.subtitled-img-container-left img, .subtitled-img-container-right img {
max-height: initial;
}
.subtitled-img-container-left {
float: left;
margin-right: 16px;
}
.subtitled-img-container-right {
float: right;
margin-left: 16px;
}
.subtitled-img-container:hover { .subtitled-img-container:hover {
background-color: var(--color-background-highlight) background-color: var(--color-background-highlight)
} }
@@ -109,4 +90,33 @@
color: var(--color-text-secondary); color: var(--color-text-secondary);
margin: 0; margin: 0;
} }
@media screen and (max-width: 600px) {
.subtitled-img-container-left, .subtitled-img-container-right {
width: var(--media-width);
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 600px) {
.subtitled-img-container-left, .subtitled-img-container-right {
width: 34%;
}
/* Don't limit height of images set to the side because text flows around them */
.subtitled-img-container-left img, .subtitled-img-container-right img {
max-height: initial;
}
.subtitled-img-container-left {
float: left;
margin-right: 16px;
}
.subtitled-img-container-right {
float: right;
margin-left: 16px;
}
}
</style> </style>