Can't remove div entry wrap padding

Support
#1

Please see the image below. I’m trying to remove this padding on each page but can’t seem to do so with visual composer.

http://account-base.com/

Similarly, on one of the sections below, there’s excess with space which isn’t showing as padding. Please see the section ‘get in touch’.

Thank you!

#2

Hi there,

Please add this code in the Global CSS:

.hentry .entry-wrap {
    padding: 0;
}

Hope this helps.

#3

That’s really helpful! Thank you very much. I have just two more issues that I can’t seem to get my head around.

Firstly, when the screen size is reduced manually the text appears tight against the far side however I want it to maintain the same width as is seen when the page is maximised.

The last point is that there is always excess space between the bottom of a line element and the top of the next section.

You can see some examples here:
http://account-base.com/
http://account-base.com/salesforce-sales-cloud/
http://account-base.com/account-based-advertising/

Thank you,
Tom

#4

Hello Tom,

Thanks for updating in!

1.) To resolve your padding issue in smaller screens, please update the css code given in our previous reply and use this instead:

@media(min-width: 980px){
  .hentry .entry-wrap {
    padding: 0;
  }
}

2.) There are spaces above the heading tags by default. This gap is the reason for the empty spaces between the bottom of a line element and the top of the next section. To resolve this, you will need to edit the page and change the spacing of the heading tags. For example, instead of using this:

<h4><b><span style="color: #003300;">Get in touch</span><br>
</b><br>
<a href="http://account-base.com/wp-content/uploads/2018/03/Tom-Hayward-Pardot-Consultant.jpg"><img class="alignleft wp-image-76 size-thumbnail" src="http://account-base.com/wp-content/uploads/2018/03/Tom-Hayward-Pardot-Consultant-150x150.jpg" alt="" width="150" height="150"></a><span style="color: #003300;">Tom Hayward<br>
<span style="color: #333333;">Founder and Lead Pardot Consultant</span></span></h4>

You must replace it with this:

<h4 style="margin-top: 0;"><b><span style="color: #003300;">Get in touch</span><br>
</b><br>
<a href="http://account-base.com/wp-content/uploads/2018/03/Tom-Hayward-Pardot-Consultant.jpg"><img class="alignleft wp-image-76 size-thumbnail" src="http://account-base.com/wp-content/uploads/2018/03/Tom-Hayward-Pardot-Consultant-150x150.jpg" alt="" width="150" height="150"></a><span style="color: #003300;">Tom Hayward<br>
<span style="color: #333333;">Founder and Lead Pardot Consultant</span></span></h4>

The top margin can be adjusted if you wanted it too.

#5

Thanks for your help. The second solution works great however the issue with the text sticking so close to the left edge when the screen size is minimalized still exists. I did remove the first code you mentioned which was used to remove the extra wrapping above sections but now neither seem to be affecting the page.

#6

Hello @Hayward,

Thanks for updating the thread. :slight_smile:

I can see the issue of text sticking on the left side of screen when adjusting the width. I suggest you to please try adding following CSS under X > Theme Options > CSS and see how it goes:

@media only screen and (max-width: 1200px) {
    div#top {
    padding: 20px;
}
}

You can change the values as per your requirement.

I have also recorded a screencast how website behaves upon adding above code while adjusting width that you can take a look. https://cloudup.com/cMQXP8w7Wem

Please let us know how it goes.

Thanks.

#7

Hi,

Thanks a lot for your help. I’ve tried that but it didn’t work unfortunatley.

Also with the excess margin, is there a way for me to remove the margin-top sitewide as this issues exists in every section across 20+ pages and when I’m editing some it doesn’t seem to remove the margin?

Thanks again in advance for your help.

Tom

#8

Hi Tom,

Are you referring to this?


That is the default top margins of headlines that Ruenel mentioned above.

We can remove that default top margin with a custom CSS, but keep in mind that this will affect all first instance of H3 headline inside the column site-wide.

.x-column > h3 {
	margin-top: 0 !important;
}

The remaining space is the entry-wrap padding which you can remove/adjust with the custom CSS code given by Ruenel above.

But not too fast, please copy all your custom CSS in Theme Options > CSS and check it here and resolve the typo error. (do not skip this or else none of the given CSS code will work)

Regarding your mobile issue, that seems to be a side effect of the CSS syntax error you have. Resolve the CSS syntax error and see if that address the mobile view issue as well.

If not, please add this to your CSS.

@media (max-width: 767px) {
	.x-main.full.x-container {
		max-width: 80%;
	}
}

Hope it helps,
Cheers!

#9

Hi!

Thanks a lot for coming back to me. I’ve actually removed all of the existing CSS on the site to resolve the syntax errors and added the last code that you’ve provided and the text is still going up again the side of the page.

What would you recommend I do next?

Thanks,
Tom

#10

Hi Tom,

Did you added the first CSS block I provided above? (I don’t see it on the page source), that is the code that removes the top space/margin of the headline.

Your body content is not on the edge of the screen on my end (https://prnt.sc/j3kgix). Please clear your browser’s cache.

If you want to apply this on the footer content as well, please update the given code to this;

@media (max-width: 767px) {
	.x-main.full.x-container,
	footer.x-colophon .x-container.width {
		max-width: 80% !important;
	}
}

Adjust the max-width: 80% where you see it fits.

Hope it helps,
Cheers!

#11

That’s really strange. For me, on chrome, even after clearing cahce, it still shows as tight up again the edge of the screen.

#12

Hi There,

Oh so you have other pages that are built in VC, please update the given CSS to this:

@media (max-width: 767px) {
	.x-main.full.x-container,
	.vc_section .x-container,
	footer.x-colophon .x-container.width {
		max-width: 80% !important;
	}
}

Don’t forget to clear your browser’s cache.

Cheers!

#14

Hello @Hayward,

Has the solution shared by @friech worked for you as I see that the post has been withdrawn. Can you please confirm?

Thanks.

#15

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