Resize images in Headline home page

i am still fiddling with this theme, on the phone this solution worked Changing look and feel of Headline theme

But is there anyway I can use some code snippet to make the images look more as in source than they do in those tiny sizes out of the box in headline when on a computer?

I also like to change the back ground colour but am I blind that cannot find it in the theme custom tool in my control panel?

Headline doesn’t have a color change setting. You’d have to use CSS. (In code injection)

You could definitely resize the images in headline with code injection, and quite possibly restack them, too, depending on exactly how the page is built.

This is probably an hour job for a developer, but too big for me to dig into for free, sorry. Crazy busy this week.

If you prompt an LLM to give you some css that restyles the page background, I’d guess that’ll work. The card rearranging is going to be harder to prompt - you’d need to give the LLM access to the current HTML (and maybe styles), and I’m not sure any free plan has enough context window to pull it off.

It is more the size than re-stacking them that is of interest, I’ll keep looking :slight_smile:

Using this code the container is bigger and the smaller images got tall, but skinny like skyscrapers LOL Not sure how to fix that though :expressionless_face:

<style>

/* Adjust the card image container height */
.gh-topic-grid .gh-card-image {
    height: 250px !important;
    position: relative;
    overflow: hidden;
}  

/* Adjust the image itself to fill the new container */
.gh-topic-grid .gh-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute;
    top: 0;
    left: 0;
}

/* Optional: add space between cards */
.gh-topic-grid .gh-card {
    margin-bottom: 2rem;
}
</style>

it’d be a lot easier to troubleshoot with a link to your site.

Hi, maybe changing this

to one of these:

object-fit: contain !important;

object-fit: fill !important;

object-fit: scale-down !important;

If you have images with different aspect ratios would be more complicated to manage them.