Custom Post Type - full width

Support
#1

Hi. I have searched around and I can’t figure this out. I created a Custom Post Type and I need to make it full-width. I do want the inner container for the main content, but I need the custom banner to be full width. My blog settings for Integrity are already set to full-width.

The background needs to be all one color, and I’m not sure how to change that either.

I also need to remove the default header with author and date under it.

Can you please help?

Here’s the URL: https://www.zevo.io/guide/overview/

Thanks in advance!

#2

Hi There,

Thank you for writing in, please use the CSS selector below to adjust your custom post template’s main container.

.single-guide .x-container.offset {
	/*YOUR CSS PROPERTIES HERE*/
}

The properties that you need to adjust are the max-width, width, margin-top, and margin-bottom.

You can add your custom CSS under Pro > Theme Options > CSS

Hope it helps,
Cheers!

#3

Thanks for the response. I just tried the following CSS under Theme Options:

.single-guide .x-container.offset {
width: 100% !important;
}

I emptied cache and it did not change anything. Any ideas why not?

#4

Hi There,

That is because the container is still limited to max-width: 1200px; so you need to adjust that to max-width: none;

Dont forget the margin-top and margin-bottom if you don’t want those space above and below the container.

Cheers!

#5

Thanks. That basically worked. I still have a space to the right and left, though. I tried margin-left and margin-right with no luck.

Also, I need to remove the upper post title with author and date under it. I can inspect the CSS for this post, but how do I remove that for all these custom posts?

#6

Hi There,

Do you mean this?


That is your Row’s Inner Container, you can turn that off on the Row configuration.


Add this to your Theme Options > CSS

.single:not(.single-post) .entry-header,
.single:not(.single-x-portfolio) .entry-header {
	display: none;
}

Hope it helps,
Cheers!

#7

Thank you. That code worked great!

For the sides issue, the inner container is fine. It’s the space outside of those. This is what I’m going for: https://www.zevo.io/page-template/

This is a regular page, and it all works fine. It’s just the custom post where it doesn’t work this way.

I appreciate your help.

#8

There’s also that white space between the banner and the header. Any way to get rid of that?

#9

Hi There,

Oh those spaces are the wrapper’s padding, please add this to your custom CSS.

.single:not(.single-post) .entry-wrap,
.single:not(.single-x-portfolio) .entry-wrap {
	padding: 0;
}

Add this custom CSS as well.

.single:not(.single-post) .entry-content.content {
	margin-top: 0;
}

Hope it helps,
Cheers!

#10

Perfect! Thank you so much!

One more thing since you’ve been so helpful - can you tell me why the buttons shrink to a very tiny size when going to a mobile screen. I understand they should shrink a little - that’s fine. The rest of the text and titles are fine, but it seems anything with a link shrinks up very very small. Of course, I can create separate sizes of buttons for the different responsive viewports, but I have a lot of these pages to do, so that seems like it will be very tedious.

#11

Hi There,

That is because unlike the text elements you have that is set to fixed 16px font-size. The buttons are set to 1em which is relative to Theme Options > Typography > ROOT FONT SIZES configuration.

It’s either you adjust the Theme Options > Typography > ROOT FONT SIZES for small screen (SM) and for extra small (XS), which affect all the element’s font-size that is relative to it (example the buttons).

Or you adjust the font-size of your buttons element individually.

Hope it helps,
Cheers!

#12

Ah, very helpful. Thank you so much!

#13

Thank you again for answering all my ignorant questions. Your customer service has been amazing!

Have a good rest of your day/night.

#14

You’re welcome and thank you for your kind words too.

Have a great weekend, Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.