Journal Style with Title/Caption on Right

Piscataway

To support story-telling in a photo club, I'd like to use a Journal-style gallery with titles/captions to the right of photos. One user, Allen, developed CSS to do this. Thank you, Allen! Here's his site and CSS:

https://www.photosbyat.com/Archery/Bobs-Bear-Trip/
https://dgrin.com/discussion/comment/1950590#Comment_1950590

However, when I installed it into a CSS content block, absolutely nothing changed. Here's my test page:

https://diversions.smugmug.com/Journal-Style-Gallery-w-Captions-on-Right/n-7BBsDP/

I'm a bit of a neophyte, so don't know how to debug this. Can anyone point me in the right direction? Thanks.

Hikin' Mike

What else have you customized? I added that to my testing gallery and it works fine. There is something "wrong" with your site.

Allen

One of my old test pages. At the bottom I was playing with an html box with photo and wrapping text.
For a journal you'd just have to copy and paste in additional html widgets. Edit photo link and text.
https://www.photosbyat.com/Test-old-journal/n-nF9zb

Hikin' Mike

@Piscataway said:
To support story-telling in a photo club, I'd like to use a Journal-style gallery with titles/captions to the right of photos. One user, Allen, developed CSS to do this. Thank you, Allen! Here's his site and CSS:

https://www.photosbyat.com/Archery/Bobs-Bear-Trip/
https://dgrin.com/discussion/comment/1950590#Comment_1950590

However, when I installed it into a CSS content block, absolutely nothing changed. Here's my test page:

https://diversions.smugmug.com/Journal-Style-Gallery-w-Captions-on-Right/n-7BBsDP/

I'm a bit of a neophyte, so don't know how to debug this. Can anyone point me in the right direction? Thanks.

Use this instead of @Allen code:

.sm-tiles-vertical.sm-tiles-fit .sm-tile-info,
.sm-tiles-vertical.sm-tiles-fit .sm-tile-content {
  display: inline-block;
  width: 50%;
}

.sm-tiles-vertical.sm-tiles-fit .sm-tile-info {
  padding: 0 .5em 1.2em 1.2em;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.sm-tile-wrapper {
  width: 100% !important;
}

.sm-tile-caption {
  padding-top: 40px;
  font-size:120%;
}

.sm-tile-info {
  text-align: left !important;
}

He added .sm-user-ui on some of the CSS, I do as well, but I noticed your site doesn't use that. I've never seen that before. Your site has .sm-nui. Anyway, this should take care of it. Would like to know from SM as to what .sm-nui is. @leftquark ?

Piscataway

Thank you, Mike! That works on both my sites.