This stylesheet uses CSS grids to force a consistent look between link posts and image posts when using the compact layout option. There's probably a better way to accomplish this, but this is quick & dirty & it works.

It probably doesn't play nice with different page layouts triggered at smaller breakpoints.

.col.post_teaser_body {  
  display: grid;  
  grid-template-columns: auto 170px;  
}  

.col.post_teaser_body h3 {  
  grid-column: 1;  
  grid-row: 1;  
}  

.col.post_teaser_body .author {  
  grid-column: 1;  
  grid-row: 2;  
}  

.col.post_teaser_body .post_teaser_image_preview {  
  align-self: end;  
  margin-left: auto;  
  grid-column: 2;  
  grid-row: 1/3;  
  height: 90px;  
  width: 170px;  
  overflow: hidden;  
}  

.col.post_teaser_body .post_teaser_image_preview .post_link {  
  width: 100%;  
}  

.col.post_teaser_body .post_teaser_image_preview .post_link img {  
  object-fit: cover;  
  width: 100%;  
}  

.col.post_teaser_body .col_thumbnail.thumbnail {  
  grid-column: 2;  
  grid-row: 1/3;  
}  

.col.post_teaser_body .post_utilities_bar {  
  grid-row: 3;  
  grid-column: 1/3;  
}  
Consistent Compact Layout
you are viewing a single comment's thread
view the rest of the comments
[–] [S] 1 point 10 months ago

The elements are positioned via the use of CSS grid. Horizontal position is set with the grid-column property. So if you set the grid-column for the previews to 1, and shift everything else's column over, you should get the images on the left.

  • source
  • parent