Casper theme displays 1 "read more" article in a block instead of 3

JohnSavern · January 28, 2023, 10:37pm

Casper theme displays 1 “read more” article in a block instead of 3. At the bottom of the article page there is a block with suggested posts. There are 3 by default and they are displayed correctly on desktop. However, on mobile and tablet it’s 1 or 2 articles. Even though I can see 3 articles in web inspector (image below), but only one is shown.

Does anyone know how to fix it and display all 3 articles on any resolution?

markstos · January 30, 2023, 3:17pm

By searching for read-more in the CSS for Casper, it appears that some posts are hidden based on the width:

github.com

TryGhost/Casper/blob/main/assets/css/screen.css#L1824


      
          .read-more {
              display: grid;
              grid-template-columns: repeat(6, 1fr);
              grid-gap: 4vmin;
          }
          
          
.read-more .post-card-tags {
              display: none;
          }
          
          
@media (max-width: 1000px) {
              .read-more {
                  grid-template-columns: repeat(4, 1fr);
              }
              .read-more .post-card:nth-child(3) {
                  display: none;
              }
          }
          
          
@media (max-width: 700px) {
              .read-more {

So by customizing the theme or using the Code Injection feature, you can adapt that logic as you wish.

It could be as simple as deleting some of those CSS media query blocks that apply to smaller widths. I haven’t tested this.

Topic		Replies	Views
Slight Casper change Themes	2	583	December 1, 2018
Casper theme – image formatting guidelines? Developer help	1	427	August 13, 2019
Casper theme post width Developer help	0	248	November 6, 2021
Making Galleries Less Wide in Casper? Themes	0	266	February 13, 2023
Change NB of posts Themes	0	271	January 9, 2023

Casper theme displays 1 "read more" article in a block instead of 3

Related Topics