Post and Custom Post layout difference

[gianmarcocereda]

Hello,

created a custom post type based on “single.php”, the same as the standard post layout, but I noticed that in the custom one there is no space between featured image and post title, as shown in the images below. Do you have any idea why this happens?

BTW, I noticed that the featured images have the same size, but the one in the standard post is touching the header and is separated from the title, while the custom post one is separated from the header (there’s a white gap), and is almost touching the title, as in the image below.

The result is weird also on mobile, because the navigation arrow is not ignored, as it happens for normal post type. Here’s an image: https://drive.google.com/file/d/1bEmGd8EOKvTCpISfmjOz_0f7wRNvskpr/view?usp=sharing

Is there a way to completely remove that next/previous post arrow?

Thanks!

[ruenel]

Hello @gianmarcocereda,

Thanks for writing in!

You are having this issue because your custom single post is not supported by the css. To resolve this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-itinerario .x-main .hentry .entry-featured{
    margin-bottom: 2.15em;
}

We would loved to know if this has work for you. Thank you.

[gianmarcocereda]

Hello,

Thanks for your help, this works!

Basic styling CSS, are easy to apply, my problem is how to find the right selector. In this case for example, how did you choose it? Would it be possible for me to open some files and try to find it by myself?

For example now I would like to remove the arrows beside the post title that let you move between adjacent posts. For sure I’ll write display:none, but what is the selector?
EDIT: I did it! I wrote “.x-nav-articles { display: none; }”, I found the selector by inspecting the element in the browser. I also tried the same to get your result, regarding the featured image, in that case I would have wrote .entry-featured{ display: none; }, but I think I would have moved all the featured images all over the site. So how did you choose the other selectors to narrow down the scope of the command?

Thanks for your time!

[basanta]

Hello @gianmarcocereda,

Thanks again for writing in!

If you want to remove the feature image in a specific page or post, please take the post or page body class of the specific page or post.

Example css

body.page-id-414 .entry-featured { 
display: none; 
}

Hope this helps!

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.