[Resolved] How to reduce white space before title and on the margin for template

[Author]

Posts

[nichaS]

I am trying to create a template for CPT and there too much white space before template view starts, as well as too much white space in the margin. On the other screenshot, I am trying to create a full screen using template, and got white margins from both top and sides.I am using DIVI Builder to edit the template. Please see the attached photo for details.

Can you please advice how I can realign this? I already set the custom margin and adding to 0 for all elements, but I'm still stuck.

[Noman]

Hi,

Thank you for contacting Toolset support. You can remove padding by using following CSS:

.et_pb_row,
.et_pb_section {
    padding: 0 !important;
}

.entry-content > .et_pb_section {
    padding: 54px 0 !important;
}

And it will look as in attached screenshot.

For full width, it seems you are using 2 columns layout at the moment as in attached screenshot. Please use 1 column layout if you want to use full width template.

Thank you

[nichaS]

The screenshot you are using is from an unfinished page and is not relevant. It should be the 2 screenshots I sent you. They are both set to using only one column, and set to full width. But it will not extend beyond the width of the body of the page. For the classes and workshop one, that should start at the edge of the page, without any white space on the top, left, or right margin.

[Noman]

Hello,

Okay, to further debug this issue I need to request you please provide temporary access (WP-Admin and FTP Login info) to your site (preferably staging site), so that I can look into your setup and check the issue.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please provide link to [Page] Edit Screen.

Thank you

[Noman]

Hello,

I have added following CSS in your child theme:

.et_fullwidth_nav .container {
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0 !important;
    width: 100%;
    box-sizing:border-box;
}

Clear browser cache and check here:
hidden link

Thank you

[nichaS]

It is still not working. The white space must be all gone, and this is supposed to be "full width." Based on the CSS, the white space has reduced, but this is not ok.

[Noman]

Hello,

I have added following CSS in your child theme:

.et_fullwidth_nav #main-content .container {
    max-width: 100%;
	padding: 0 !important;
    width: 100%;
}

.et_fullwidth_nav .entry-content {
	padding-top:0 !important;
}

.et_fullwidth_nav .post-meta {
	padding:0 !important;
	margin:0 !important;
}

.et_fullwidth_nav.single .et_pb_post {
	margin:0;
}

.et_fullwidth_nav #left-area {
	padding:0;
}

And now all white space gone. Please check here:
hidden link

Thank you

[nichaS]

Ok, I've modified your code and successfully gotten rid of the white space on the left and right sides. I'm now stuck with getting rid of the white space on the top and bottom. Can you please advice?

So what I did was added the following custom CSS to the template page only

.et_fullwidth_nav .container {
max-width: 100%;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px !important;
width: 100%;
box-sizing:border-box;
}

[Noman]

Hello,

Page title was taking some space from top, I have hide page title by adding following CSS:

.et_fullwidth_nav .et_post_meta_wrapper {
	display:none !important;
}

And now page looks as in attached screenshot. Can you please clear your browser cache and take a look on it.

Thank you