Post Grid Styling

  • Resolved oriver

    (@oriver)


    3 years, 11 months ago

    Hi,

    I’m using the post grid widget and have a couple of queries I hoped you could please help with.

    1) I can’t seem to get the author to align with the post title, I tried right and left alignment, but this just seems to move it up and down instead of to the side. Is there a CSS code I could try instead?
    2) There is some really weird padding to the right of the post grid, but padding and margin are set to 0.

    I’ve attached a picture to show what I mean: https://imgur.com/a/GtJk8B3

    3) Is there a way to change the author avatar icon, and/or colour?
    4) Is there a way to show more than three tags? And to show these below the meta author rather than on the image or on hover?

    Thank you for any help you can provide.

    ps.meant to say with the first issues I deactivated all plugins to test there wasn’t any conflict. And I’m using the theme Hello Elementor

    • This topic was modified 3 years, 11 months ago by oriver.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Amit Barai Alit

    (@amitbarai013)

    3 years, 11 months ago

    Hi @oriver ,
    Hope you are doing well.

    Please check the following according to your query.

    1. Please use the following CSS code to get the author avatar to align with the post title: 

    .eael-entry-footer .eael-author-avatar .avatar {
    margin-left: -14px !important;
}

    You can check this documentation to know how to add custom CSS on the WordPress site: https://essential-addons.com/elementor/docs/faq/apply-custom-css-elements/

    2. In order to remove the padding to the right, please use the following CSS code:

    .eael-grid-post .eael-entry-wrapper, .eael-grid-post .eael-entry-footer {
    padding: 15px 0px 15px 15px !important;
}

    3. Unfortunately, it is not possible to change the avatar icon/color.

    4. Unfortunately, this feature is not available. However, you can simply go to your child theme and create a folder called ‘Template‘ if there’s not any. Afterward, create another folder called ‘Post-Grid‘ and inside that create a PHP file which will be your layout.

    This template will be available in your Layout Settings here: https://d.pr/i/IYZKZv

    You can find the default ones example in: wp-content/plugins/essential-addons-for-elementor-lite/includes/Template/Post-Grid`

    Unfortunately, we are not allowed to execute the above process as it is a custom design and custom PHP code. But you can add the PHP code inside that file by following the above process.

    However, Thank you so much for your idea. It would help us to improve the plugin.

    Thank you.

    Thread Starter oriver

    (@oriver)

    3 years, 11 months ago

    Hi @amitbarai013

    Thank you for helping.

    1) With regards to getting the author to align with the post title, the code you’ve given works a treat:) however it only moves the avatar which creates a big gap between the avatar icon and the author name. Is there anyway to move the meta author as a whole to align with the post title?

    I also noticed on the responsive breaks that for the laptop setting the avatar is a different size – about the size of a pin head. Is there anyway to change this to match the avatar size in the other responsive breaks?

    2) The code sadly didn’t remove this strange padding to the right. In the end I’ve put a padding to the left for the section and done so for each responsive break. If it helps others I’ve done padding as:
    25 left for widescreen
    45 left for desktop
    30 left for laptop

    But for tablet, mobile extra and mobile this strange padding wasn’t there so didn’t need to do this.

    It would be great if this could be fixed, as its not ideal to do different paddings to compensate, as it could appear differently on an array of devices.

    3) Apologies totally understand, my brain was stupidly thinking icon and not avatar

    4) That’s great will look into this, thank you

    Amit Barai Alit

    (@amitbarai013)

    3 years, 10 months ago

    Hi @oriver ,
    Thanks for your response.

    
1. Please use the following CSS code to move the whole avatar meta:



    .eael-entry-footer  
{
    margin-left: -14px !important;
}

    Unfortunately, it is not possible to change the pin head size of avatar to match the avatar size in the other responsive breaks.

    2. Thanks for your understanding. Actually, it varies from display to display, I set the padding according to my display that is why it is not matched. But you can set the padding according to your preference by using the code. And we are so glad to know that you added the padding separately for those three screens. However, I will discuss my team regarding this responsiveness.



    Thank you so much.

    Have a good day!

    Thread Starter oriver

    (@oriver)

    3 years, 10 months ago

    Hi @amitbarai013

    Thank you, the gap is still there as it seems to just move the avatar only. But it still looks better with the avatar lining up with the post title, than not. Thanks again.

    Have a great day too.

    • This reply was modified 3 years, 10 months ago by oriver.
    Thread Starter oriver

    (@oriver)

    3 years, 10 months ago

    Hi @amitbarai013

    I discovered its the margin spacing around the avatar, it’s causing a big gap on some of the responsive breaks. Hope this helps

    CSS:
    .eael-author-avatar .avatar {
    margin: 0px 0px 0px 25px;
    width: 20px;
    }

    And set the meta style margin to 0 0 0 -40

    At least this worked for me. Great plugin love the load more feature.

    • This reply was modified 3 years, 10 months ago by oriver.
Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Post Grid Styling’ is closed to new replies.