Changing look and feel of Headline theme

Themes
1

Is there any [easy] way to change the headline theme sections to look more like the grid of Source than those small images?

I do like the look and feel of the headline theme on a bigger screen but my readers for sure sit on their phones which is why I like the source theme so much cause every item looks the same when one scroll.

2

Bumping this up a bit, is there anything I can do to make the images bigger on the front page so the look and feel gets a bit more like the Source theme?

3

If there no-one out there who has any intel on this. I’d like to use the Headline theme but would want the “look and feel” of source where the featured images are bigger

4

You’re wanting to change the mobile layout, right?
So it’s going to be /something/ like this, in your code injection, between <style> </style> tags.

@media (max-width: 767px) {
    .gh-topic-grid .gh-card-link {
       flex-direction: column; /* makes the image and text stack instead of side by side */
     }
     .gh-topic-grid .gh-card-image {
        width: 100%;
     }
}
1 Like
5

That did not work, the code ended on top of the page. So I guess something might be missing?

Edit, I saw another snippet and realised style maybe missing and tried this, which seem to be working

<style>
  .gh-topic-grid .gh-card-link {
       flex-direction: column; /* makes the image and text stack instead of side by side */
     }
     .gh-topic-grid .gh-card-image {
        width: 100%;
     }
</style>
6

^^ Oh good, so it’s working when you follow my directions? :rofl:

7

Something like that :laughing:

This really is a deal breaker for me cause I love this theme but hate those tiny photos that show up in the different sections which would fit perfect for a big site for news, but not so much on a blog based site. :smile: