[Resolved] Dispatch theme: Styling front page

[Malin]

Hi,
I’m wondering if I can get some help with how to fix the front page of the Dispatch theme so it’s more readable?

I can’t seem to style the front page very wel. See pic:
https://snipboard.io/Lqm0oV.jpg
I’ve added grey background to these tags:

.wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
    color: #fff;
}

But the grey looks awful (maybe more of a gradient?). And also the headline cuts off after a word or two, can’t figure out how to make it longer. I don’t necessarily need to keep the tiles, they look kind of messy… any ideas how to do this better?

Appreciate help. 🙂

[David]

Hi there,

first of the lineclamping to 2 x lines is due to this CSS, the site import added in Customizer > Additional CSS:

.generate-columns-container article .entry-header .entry-title,
.wp-show-posts article .wp-show-posts-entry-title {
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
    text-overflow: ellipsis;
}

You can remove that to show the full title. I originally added it to the Dispatch Site to maintain some consistency of layout – as reallllllly long titles can make a mess of the layout.

Make that change and then we can look at some alternatives for giving the title a background color

[Malin]

Hi David,
Thank you for your help. Much appreciated.
I’m not sure if you meant remove it all together or just a line or two. Now it looks like this:

.generate-columns-container article .entry-header .entry-title, .wp-show-posts article .wp-show-posts-entry-title {
    line-height: 2.4ex;
    height: 8ex;
    text-overflow: ellipsis;
}

And it’s live on the site:
https://www.alternativephotography.com/

It would be great if the grey could be transparent or nicer in some other way if it’s possible, and also if the text could start from the bottom and up, so it aligns with the bottom of the picture and not sits in the middle when it’s short. Is that possible?

The other issue is that the posts repeat below. But I can open another ticket for this.
Thank you so much!

[David]

Can you remove all that CSS – that will fix the alignment then i can look at changing the background colors etc.

[Malin]

Ok, thank you! Now these are left:

@media (min-width: 768px) {
}

But nothing inside.
https://www.alternativephotography.com/

[David]

Oh that can go too 🙂
And how about adding this CSS to put a background behind the card content, and reduce its padding a little so the text doesn’t cover so much of the image:

.wpsp-grid.wpsp-card .wpsp-content-wrap {
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
}

[Malin]

Wow David!
Amazing. That looks very good, thank you very much!

[David]

Glad to be of help!

[Author]

Posts