Gaps above and below widget rows


#1

Hi,

This is the page in reference:
http://zachwillason.com/hosting/

As you can see, there are blank gaps above and below 2 widget rows I added using the page builder.
Is there a setting that removes them that I am not seeing?

Thanks!


#2

Dear Zach,

To control those top-bottom padding, please have a look at here.

Regards,
Kharis


#3

Hi Kharis,

I actually had already tried that before.
I went back and double-checked, and each row had the padding set to “0”.

It still looks like this: http://zachwillason.com/hosting/

In fact, after alternating between “0” for the padding, and leaving it blank,
it only changes the size of the green background. The gap at the top remains the same.

Thanks,

Zach


#4

Dear Zach,

Thank you for updating me.

I checked this page http://zachwillason.com/hosting/. I found this HTML content exists in your text widget. I thought they shouldn’t be there.

I also still found 100px padding top-bottom still exists in your homepage’
s rows.

Regards,
Kharis


#5

Hi Kharis,

It seems we have a difficult one on our hands haha

This is a screenshot of the HTML that I have for the top row:
http://postimg.org/image/6sti5jl1j/

Secondly, yes I added 100px spacers in the rows. However, these spacers/paddings
change the size of the COLORED area (aka, the row itself).
Regardless, I just completely removed the 100px spacers that I had in the first row.
If you visit the page again, you will see the gap at the very top is still there.
It seems to be unrelated to the green row with the “Get website hosting!” text.

The padding on my homepage is not a concern, and looks fine. However, I also
changed the padding of the homepage rows to 0 now, but the /hosting page still
has the gap. :frowning:

Thanks man,

Zach


#6

Dear Zach,

Could you please try to add the following CSS code through the Simple Custom CSS plugin?

.content-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.content-area .hentry{
  padding-bottom: 0 !important;
}

.page .entry-footer{
  display: none !important;
}

@media only screen and (min-width: 992px){
  .page-wrap{
    padding-top: 100px;
  }
}

Let me know how it works. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis


#7

Kharis,

2 things…

  1. When I went into “Editor” to add the CSS, I noticed that all of the custom CSS I had previously added was gone. I am positive that I did not update the theme. Any idea how this could happen? Luckily, I document all of the CSS additions I make, but that is still very scary. Did it update on its own?

  2. I downloaded the Custom CSS plugin, and added all of the code you suggested, without changing anything on the /hosting page. Now, the gap is simply bigger.

Thanks,

Zach


#8

Dear Zack,

I would like to apologize in advance for inconvenience.

Try to remove the following lines.

@media only screen and (min-width: 992px){
  .page-wrap{
    padding-top: 100px;
  }
}

Regarding the missing custom CSS previously added, I am still looking into it. Please wait, I’ll update you ASAP.

Regards,
Kharis


#9

It won’t update its style.css unless someone do updating it. I’d suggest you to use the WP Security Audit Log plugin to monitor users activities in admin area.

Regards,
Kharis


#10

Hey Kharis,

After removing those lines, the gap is gone! Thank you!!!

Also, changes I made in other .php files are also gone.
There are no other users on my account for this website.

Oh well, I have easily restored the changes.

Thanks a bunch for your help on this issue, and you may now
mark this issue as RESOLVED!

Much thanks,

Zach