Site logo

Archived topic

Problem top bar with social icon and wp show post

3 replies · Started by Sara on April 5, 2020

Viewing posts 1–4 of 4

Hi, sorry for my bad english.

I have two problems with my site:
1) in the top bar I put the social icons, but when I go into a category or on "blog" these disappear. Both if I use the bar as a widget menu and if I use it as a secondary navigation. I can't understand what's wrong.
2) I installed (from the Site Library) the Liberte theme which with this CSS Grid

@media (min-width: 600px) {

    body:not(.single):not(.page) .inside-article,
    .wp-show-posts-inner {
        display: grid;
        grid-template-columns: 30% auto;
    }

    .post-image,
    .entry-summary,
    .wp-show-posts-image {
        margin-top: 0;
        margin-bottom: 0;
    }

    .post-image,
    .wp-show-posts-image {
        grid-column: 1;
        grid-row: 1 / 4;
        margin-right: 1em
    }

    .entry-meta {
        grid-column: 2;
    }

    .post-image img,
    .wp-show-posts-image img {
        -o-object-fit: cover !important;
           object-fit: cover !important;
        height: 100% !important;
        vertical-align: middle;
    }
    
}

modifies the post in my home page and in blog page (with Wp Show Posts, I think). Unfortunately I also use Wp Show Posts (at the end of each article) and the images change, but I don't want to. Is there a way to prevent them change?
- as I see it now
https://ibb.co/Bssfx1X
- how it should be
https://ibb.co/7JxvK5z

I attach the images because they are bad with English.
Thank you very much for helping,
Sara

Hi there,

1. You're using icons which are loading from Elementor. On pages where Elementor doesn't exist (categories), Font Awesome isn't loading, so the icons break.

You'll want to use a menu icon plugin like this: https://wordpress.org/plugins/menu-icons/

2. Try this CSS instead:

@media (min-width: 600px) {

    body:not(.single):not(.page) .inside-article,
    body:not(.single) .wp-show-posts-inner {
        display: grid;
        grid-template-columns: 30% auto;
    }

    .post-image,
    .entry-summary,
    body:not(.single) .wp-show-posts-image {
        margin-top: 0;
        margin-bottom: 0;
    }

    .post-image,
    body:not(.single) .wp-show-posts-image {
        grid-column: 1;
        grid-row: 1 / 4;
        margin-right: 1em
    }

    .entry-meta {
        grid-column: 2;
    }

    .post-image img,
    body:not(.single) .wp-show-posts-image img {
        -o-object-fit: cover !important;
           object-fit: cover !important;
        height: 100% !important;
        vertical-align: middle;
    }
    
}

Let me know :)

Yess! It works! 🙂
thank you very much!

You're welcome :)

This archived topic is closed to new replies.