Hello again,
After 4 days of no responses here, and unfortunately no help from Squarespace Support (though, that's not on the person I was working with — she was great), I was able to come up with a solution myself. I wanted to document the process here in case it was helpful to anyone in the future.
TLDR version: Create two gallery sections, one on top of the other. [Order doesn't matter here] The first will contain horizontal-oriented photos. The second will contain vertical-oriented photos. Use CSS to target the two sections to turn one off and one on depending on the break point you want.
While Squarespace Support was friendly and eager to assist, this ultimately led nowhere. It was pointed out that newer/larger phones will display higher quality images, but that wasn't the solution I was looking for.
The weirdest part of all of this was the fact that I could load my website when my phone was in a horizontal orientation and view image crystal clear. Rotating back to vertical, the images were still fine. Upon reload, we were back to low quality garbage.
This led to me wondering if instead of loading horizontal-oriented photos to the gallery, I loaded vertically-oriented photos. Vertical photos looked great on mobile and like trash on desktop. Last step was to duplicate the gallery section. Have one gallery loaded with horizontal-oriented photos and the other gallery with vertical-oriented photos. Then target the two sections and turn one off and one on depending on the screen size. Code pasted below for reference. (Your data-section-id number will be different).
I filled Squarespace Support in on all of this. Hopefully that or this post helps someone else!
@media screen and (max-width: 649px) {
[data-section-id="651db6f3fa172b23a599a565"] {
display:none;
}
}
@media screen and (min-width: 650px) {
[data-section-id="65de5558b05ac75d76dc41d8"] {
display:none;
}
}
