[Resolved] putting posts with thumbnails horizontally at the bottom of each page

Home Forums Support [Resolved] putting posts with thumbnails horizontally at the bottom of each page

Home Forums Support putting posts with thumbnails horizontally at the bottom of each page

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1625775
    liza

    Hi!

    I want to put posts with thumbnails horizontally at the bottom of each page (before the footer bar) My theme doesn’t seem to have the CSS codes needed to make the necessary modifications on this section.

    #1625777
    Elvin
    Staff
    Customer Support

    Hi,

    I want to put posts with thumbnails horizontally at the bottom of each page (before the footer bar) My theme doesn’t seem to have the CSS codes needed to make the necessary modifications on this section.

    To clarify: Are you trying to place a “recent posts” thumbnails in 1 row before the footer?

    Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1625779
    liza

    Yes, just a single horizontal line with thumbnails(before the footer bar)just like the website I linked in the private information field.

    Thanks!

    #1625934
    Elvin
    Staff
    Customer Support

    Yes, just a single horizontal line with thumbnails(before the footer bar)just like the website I linked in the private information field.

    First, you’ll need a plugin to show the related posts.

    We recommend WP Show Posts: https://wpshowposts.com/

    Upon installing and activating, you can create your post list.

    Within WP you should be able to configure the number of posts that are displayed. You can also set how many columns to display.

    Say for example, you want to display 4 posts in a row. To do this, you’ll have to set WPSP list’s post to display and column number to 4.

    On the WPSP config page’s right hand side, you should see a shortcode. Copy this shortcode.

    You then create a Hook element:
    https://docs.generatepress.com/article/hooks-element-overview/

    Within the hook element’s code area, paste the shortcode you’ve copied.

    Make sure “Execute Shortcode” is checked and set the hook to generate_before_footer.

    You then set the display rule location to the pages you want the recent post to display.

    A wise man once said:
    "Have you cleared your cache?"

    #1626150
    liza

    Thank you so much Alvin for the detailed explanation =) One more thing, I don’t want it to appear on mobile …what can I do to do just that? TIA

    #1626523
    David
    Staff
    Customer Support

    Hi there,

    edit your Hook and wrap the shortcode in a <div> container like so:

    <div class="grid-container hide-on-mobile">
        Add your shortcode here 
    </div>

    The grid-container will keep it from filling the full width of the screen, and the hide-on-mobile does exactly what it says 🙂

    #1627049
    liza

    Hi!

    Don’t mind this..the issue is resolved. Thanks!

    Sorry for my lack of technical know how..the div is the container where I will have to insert the codes you provided ..right? I did just that but it did not work. It still shows up on mobile and the grid container still occupies the full width of the screen.
    The link to my website is in the private information field. Thanks!

    #1627080
    liza

    Thanks, David..it worked!

    #1627081
    Elvin
    Staff
    Customer Support

    Nice one. Glad you got it sorted:

    To add: There’re also hide-on-tablet and hide-on-desktop incase you need them.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.