Resize magazine hero blocks in Generatepress Dispatch front page

[Samuel]

Can you tell me how to resize the header, magazine grid in dispatch? I’ve tried resizing my images, I’ve played around with the CSS for hours trying to manipulate the images, and now I just want to change the dimensions of the boxes themselves to get the images to fit. How can I do this?

[David]

Hi there,

the site uses some complex CSS to create the grid and their responsive behaviour. So not something that is easily changed without custom development.

But the CSS should also ensure that Images always fill the space.

Can we see your site so i can see the issue ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Samuel]

My apologies, forgot I had the site maintenance plugin active. It’s open now. You can see how the pictures are clipped on all sides by the same proportion. Logo at top and writing at bottom is cut off, which is the most critical.

[David]

Thanks for removing the maintenance.
Unfortunately there isn’t much we can do about that.
The CSS simply forces the background to fill the space
The Dispatch site was designed for sites where all the images are of the same size and where the backgrounds are more ‘superfluous’.

I am not sure what the options are aside from removing the post grid.

Thoughts ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Samuel]

Bummer. I guess my only option IS to remove the grid. It’s a shame, because the grid and this entire theme looks incredible and is super light weight. Really enjoyable after having dipped my toes into the tagdiv newspaper world and getting bogged down by code and framework. Thanks for the quick replies!

[David]

Hmmm… i don’t like saying we cannot do something.

What if the Post grid was set to display ‘selected’ posts only ? Ones where more appropriate featured images of the same size were set and a little bit of cropping would do no harm?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Samuel]

The problem with that is I only have two sections of original content on my site right now. The satire articles you see there (which I need to be front and center for those directed off of social media to view) and my blog. The rest are RSS news feeds (which I could care less if they get cropped or not) that I don’t want to be the center point of my site since they’re not original work. Unfortunately, the category the magazine grid feeds from looks perfect on both desktop and mobile when I actually click into the category from the menu. Every block on the whole site looks great (minus the featured image slab at the top of the posts, but I don’t care about that since the full picture is displayed below it), and this is the only thing not quite there.

[Samuel]

I like the grid. I’m going to remake the pictures to allow for the cropping. Can you tell me how to maintain desktop dimensions when it switches to mobile? The main block hero picture gets very wide.

[David]

Can i see the grid with the new pictures in place ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Samuel]

OK, I’ve put the grid back in place. You can check it out.

[David]

How do you want them displayed on Mobile?
Do you want the The Big Featured Post followed by 2 columns of smaller posts ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Samuel]

That’d be fine. My main concern is the featured post be scaled properly. Two columns of smaller posts would be pretty cool though.

[David]

Sorry i think our timings are out and you took the grid down.
Do you have an option to create a Staging site ? If so we could work on that so your live site remains intact while we figure it out.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Samuel]

No, that’s my mistake. I thought you just needed to look at it that once to identify the problem. It’s back up now. I don’t get enough traffic to be too concerned about it at the moment. I’m not used to this kind of continual customer support, so I’m slightly shocked you’re engaging with me this frequently. Thank you. Your move, David, lol.

[David]

No problems – i built Dispatch so i like to help if i can.

Try adding this CSS for the Mobile Layout. This will be the large featured image. Followed by the 2 column/2 row grid of the smaller posts:

@media (max-width: 599px) {
    .wpsp-grid .wp-show-posts {
        display: grid
    }
    .wpsp-grid .wp-show-posts article {
        grid-column: span 6;
    }
    .wpsp-grid .wp-show-posts article:not(:first-child) {
        grid-column: span 3;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts