Making a Grid Using Shortcodes

  • Unknown's avatar
    randygener · Member ·

    I would like to use CSS on these pages:

    (1) https://cultureofoneworld.org/criticism-without-borders/dance-movement/
    (2) https://cultureofoneworld.org/invested-premises/

    so that:

    (a) the title is bigger than the excerpt in terms of font,

    (b) making clearer spaces between one post to the next,

    (c) attaching the featured image related to the proper content,

    (d) is there a way to put a title above the image followed by excerpt…

    Making a grid using the shortcode is quite a big change, but I am told I can post a separate question on the CSS forum about it.

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi @randygener!

    You can increase the size of the titles shown by your shortcodes like this:

    .display-posts-listing .title {
    font-size: 1.5em;
}

    Then, if you want to increase the spacing between the posts, you can use this:

    .display-posts-listing .listing-item {
    margin-bottom: 25px;
}

    Placing the title above the image isn’t something CSS is going to be able to do, since each title and image is a little different.

    In terms of a grid – it’s probably possible to set up a basic grid with CSS, but I’d recommend against trying to turn the Display Posts Shortcode into a grid – it’s likely to be some complicated CSS that would need a fair amount of experience to put together. If a grid is an important design for your site, I’d recommend selecting a theme that has a grid built in:

    https://wordpress.com/themes/filter/grid-layout/

    Let me know if you have any more questions! :)

  • The topic ‘Making a Grid Using Shortcodes’ is closed to new replies.