How to adjust space between a specific sidebar widget?

cwmills,

The problem widget are is not the “Recent Posts” widget, but the “GAW Miners” text widget above it.

Since you only have an image link on that text widget and the link itself is not surrounded by any div element it seems the height for the widget area is been set automatically and it does not match the height of the image.

This could be fixed easily by defining a height for the wrapping element. You could replace the contents in the text widget with this:

<a href="https://gawminers.go2cloud.org/aff_c?offer_id=34&aff_id=746&file_id=98" target="_blank" style="display: block; height: 250px;">
<img src="https://media.go2speed.org/brand/files/gawminers/34/20140807150227-300x250new.png" width="300" height="250" border="0">
</a>
<img src="https://gawminers.go2cloud.org/aff_i?offer_id=34&file_id=98&aff_id=746" width="1" height="1">

And add this to your CSS file:

#text-3 .textwidget { height: 250px; }

I added some inline styles to the link element in order to properly define the height, and by targeting the specific text widget with its ID (in this case #text-3) we make sure the height is only assigned to that specific text widget.

Keep in mind that if you were to paste this code on another text widget it will not work as the ID is specific to only one element.

A better approach would be to just wrap everything inside the text widget with a div tag and give it a class so the same code could be used on any text widget in the future.

For example you could paste this on the text widget, and get the same results:

<div class="gaw-miners-wrap">
<a href="https://gawminers.go2cloud.org/aff_c?offer_id=34&aff_id=746&file_id=98" target="_blank" style="display: block; height: 250px;">
<img src="https://media.go2speed.org/brand/files/gawminers/34/20140807150227-300x250new.png" width="300" height="250" border="0">
</a>
<img src="https://gawminers.go2cloud.org/aff_i?offer_id=34&file_id=98&aff_id=746" width="1" height="1">
</div>

And this to the CSS file:

.gaw-miners-wrap { height: 250px; }

In fact I suggest the second option better since it takes the same amount of work, but it is more flexible in that this code will work on any text widget you place it in.

I hope this helps!

Hello ajvillegas,

I tried the second method but the gap between recent posts and the ad still exists. Am I doing something wrong? I have changed the ad since but followed your instructions otherwise.

Also, where is this line coming from

<img src="https://gawminers.go2cloud.org/aff_i?offer_id=34&file_id=98&aff_id=746" width="1" height="1">
</div>

I only had one “image source” tag, not sure what you call it. Is there a reason why I need two? Also I notice that the “aff_c?” was changed to “aff_i?”

Thanks alot for your help!

cwmills,

I copied the code from what the page rendered when viewing the source code using Chrome. I’m honestly not sure what it is since affiliate links sometimes render extra code in order to track sales.

The most important part is the style added to the <a> tag as I showed before:

style="display: block; height: 250px;"

And the CSS code of course.

Are you still having the same issue? I went back to the page and I do see that you changed the ad image, but I don’t see a gap anymore.

Good luck!

Thanks ajvillegas! What you instructed me to do actually worked, I was just viewing it in an outdated browser at work at the time. Thanks again!

Excellent. Glad I could help!