Dispatch – Customise font position on only one of the grid sections

[James]

How can I move the font down on just one of the magazine grid sections? The rest are placed fine but just one is higher up than it should be.

[David]

Hi there,

you can target a specific article in the header grid like so:

.inside-page-hero .wp-show-posts .post-XXX .wpsp-content-wrap {
   padding-bottom: 3em;
}

The post-XXX is the ID of the Post which you can find by editing the Post itself and looking for the ID in the post URL.

Use padding-bottom or padding-to to adjust its vertical position.

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

[James]

Thanks.

[David]

You’re welcome

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

[James]

Sorry I have another question…

I’ve been working with a support freelancer and there’s two things he cannot figure out.

1) How do we overlay images with links with the “Standard” list like they are with the magazine grid?

This would alleviate the need of the second problem we are having, which is:

2) How do you move the links closer to the text in “Standard” in mobile view only, without affecting the desktop view?

I’ve edited my OP with my web address.

[David]

To create the card style overlay effect simply wrap the list in a

with the wpsp-card class eg.

<div class="wpsp-card">
/* Your WPSP Shortcode in here */
</div>

Then those styles will apply to any list – just note that the results may not be as expected if there is a large excerpt or other meta ie. the image may not be large enough to cover.

The alternative is to use WP Show Posts pro which has built in card styles in the beta version – styles can be seen here:

https://demos.wpshowposts.com/cards/

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

[James]

Thanks David.

[David]

You’re welcome

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

[Author]

Posts