Featured Image Offset Ethos

[guybower1]

hi

I was trying to remove the x-nav-articles arrow from my blog page and was successful using this CSS

.x-nav-articles {
    display: none;
}

I say successful, though truly, the arrow is still there, it just not displayed. When I inspect the elements in Chrome Developer Tools, the arrow selector still shows as does the URL to the next post. It would be nice to simply get rid of the element altogether

Here is a screenshot

What this does on the posts pages is to offset the featured image the width of that arrow. I have tried a number of times to centre the image using codes like the following

a.single-post .x-main.right .hentry .entry-featured {
    background-position: top center;
}

I have tried variations on this adding in .entry-thumb and so on, but regardless what I do, the image remains offset to the left by the amount of the navigation arrow

Is there a way to have this featured image sit centred above the body of the post, or a way to completely remove the navigation arrow?

This is the URL http://wordpress-102462-558755.cloudwaysapps.com/uncategorized/blog-template/

Regards

[ruenel]

Hello @guybower1,

Thanks for posting in!

1.) Please be advised that the display: none; css only hides the element from your page visually. This is why if your view the source code of the page, you are still seeing the element. If you want to completely remove that element, you will have to modify the template files. To do that, simply remove the x_entry_navigation() function code in your wp-content/themes/x-child/framework/views/ethos/_content-post-header.php which you already have added in your child theme.

2.) The given css code is invalid. The background position property will only work if your image has been set as a background image. If you want to center the image, you should be using this code instead:

.single-post .x-main.right .hentry .entry-featured img{
    min-width: 100%;
}

This code make sure that the width of the image will be the same as the width of the featured image container.

Hope this helps.

[guybower1]

Hi Ruenel

Thanks so much for your reply

Yes, in the end, no need to remove the line in the php file as your CSS did the trick, although I removed the line anyway.

That just gives a much more clean look to the page

Take care and thanks so much

[christian]

You’re welcome.