Docs

[knoxmercury]

In this image, there is an image graphic that has the top knox logo, “winners” and some color bars. Below it is a light blue box made using a container shortcode that I’m building a menu/navigation in. I’d like to eliminate the space between my image and my menu so it looks like one unit. Can anyone help me with how to delete the spacing on the bottom of the image or the top of the container? The page is private until it is ready so I can’t share a link.

Thanks!

Tricia

[Christopher]

Hi there,

Please add man in sections class field.
If you need further assist, please provide us with URL and login credentials in private replay.

Thanks.

[knoxmercury]

This reply has been marked as private.

[knoxmercury]

Looks like I will also need to get rid of a hairline border.

[Rad]

Hi there,

There are two spacing there,

1. Image’s margin bottom, you can add mbn as your image’s class name. Example,

<img class="aligncenter size-full wp-image-52299 mbn" src="http://www.knoxmercury.com/wp-content/uploads/2016/10/TK16_web-01winners.jpg" alt="tk16_web-01winners" width="1090" height="220" style="margin-bottom: 0px;">

2. Your image is wrapped by <p></p> which add more space, and probably due to line breaks. WordPress converts line breaks to <p></p>, hence, the solution is removing the line break.

Example,

<img class="aligncenter size-full wp-image-52299 mbn" src="http://www.knoxmercury.com/wp-content/uploads/2016/10/TK16_web-01winners.jpg" alt="tk16_web-01winners" width="1090" height="220" style="margin-bottom: 0px;">
[vc_row]

will be converted to

<p><img class="aligncenter size-full wp-image-52299 mbn" src="http://www.knoxmercury.com/wp-content/uploads/2016/10/TK16_web-01winners.jpg" alt="tk16_web-01winners" width="1090" height="220" style="margin-bottom: 0px;"></p>
<p>[vc_row]</p>

It should be

<img class="aligncenter size-full wp-image-52299 mbn" src="http://www.knoxmercury.com/wp-content/uploads/2016/10/TK16_web-01winners.jpg" alt="tk16_web-01winners" width="1090" height="220" style="margin-bottom: 0px;">[vc_row]

Make all elements on the same line to avoid <p></p>.

And bout the hairline, is it the menu separator? If yes, then please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.x-navbar .desktop .x-nav>li>a {
    border: 0px !important;
}

Hope these helps.

[knoxmercury]

I have already deleted the <p> tags and figured out how to delete the rule around the container band, so no worries there.

I did try the mbn code in the image class style to no avail last night. I’m pretty sure the spacing is connected to the container band, not the photo.

I’m on deadline today, but will try to get you more info this afternoon.

Thank you for your help!

[Rahul]

Sure. We are always here to help you out.

Let us know how it goes.

Thank you.

[knoxmercury]

This reply has been marked as private.

[knoxmercury]

BTW, I have tried adding no_margin=”true” to the content band code to no avail.

Like this:
[content_band style=”color: #95d7e3″ bg_color=”#95d7e3″ border=”none” inner_container=”true” no_margin=”true”]

[knoxmercury]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code to :

<p class="mbn"><img src="http://www.knoxmercury.com/wp-content/uploads/2016/10/TK16_web-01winners.jpg" alt="tk16_web-01winners" width="1090" height="220" /></p>[content_band style="color: #95d7e3" bg_color="#95d7e3" border="none" inner_container="true"][column type="1/4"]<strong><a href="http://www.knoxmercury.com/topknox2016community/">Community</a></strong>
<strong><a href="http://www.knoxmercury.com/topknox2016food/">Food</a></strong>
<strong><a href="http://www.knoxmercury.com/topknox2016drink/">Drink</a></strong>[/column] [column type="1/4"]<strong><a href="http://www.knoxmercury.com/topknox2016music/">Music and Nightlife</a></strong>
<strong><a href="http://www.knoxmercury.com/topknox2016shopping/">Shopping</a></strong>
<strong><a href="http://www.knoxmercury.com/topknox2016services/">Services</a></strong>[/column] [column type="1/4"]<strong><a href="http://www.knoxmercury.com/topknox2016arts/">Arts and Culture</a></strong>
<strong><a href="http://www.knoxmercury.com/topknox2016education/">Education and Media</a></strong>
<strong><a href="http://www.knoxmercury.com/topknox2016home/">Home and Garden</a></strong>[/column][column type="1/4" last="true"]<strong><a href="http://www.knoxmercury.com/topknox2016health/">Health and Beauty</a></strong>
<strong><a href="http://www.knoxmercury.com/topknox2016recreation/">Recreation and Fun</a></strong>
<strong><a href="http://www.knoxmercury.com/topknox2016online/">Knoxville Online</a></strong> [/column][/content_band]

Please add following code in Customize -> Custom -> Global CSS :

.page-id-41096 div#x-content-band-1 a {
    color: #fff;
}

Hope it helps.

[knoxmercury]

Thank you!

(I realize this can feel like talking to a child, but every time someone gives me a bit of corrected code, I figure a little more out.)

[Rahul]

Glad you’ve figured it out for yourself!

If you have any further queries, let us know. We’d be happy to assist you with that.

Thank you.

[Author]

Posts