Reduce space between words and images

Support
#1

Hi there,

On my page http://www.eurasianwhispers.com/turkmenistan-caspian-paradise/ do you know how I can reduce the space between the images and the word Varlamov that you see just below them in blue?

the textbook currently contains:

<p>[x_image type="none" float="none" src="http://www.eurasianwhispers.com/wp-content/uploads/2017/10/Awaza-Entrance-Sign.jpg" alt="Welcoming sign to the Awaza resort in eastern Turkmenistan" link="true" info="none" info_place="top" info_trigger="hover" class="lightbox"][lightbox selector=".lightbox"]<p style="text-align: center;"><span style="font-size: x-small;"><a href="https://varlamov.ru/1752230.html" target="_blank" rel="noopener">Varlamov </a></span>

Thank you,
EW

#2

Hey,

You can fix it adding following CSS under the code below to X > Launch > Options > CSS

    margin-bottom: 0px;
}```
#3

Hi John,

Is there someway I can do this without adding the CSS as it is rather time consuming for each image, and instead just change the code in the textbox?

I used to be able to get the required result simply by changing class=“lightbox” to class=“lightbox mbn”, but for some reason this isn’t working anymore…

Thank you,
EW

#4

Hi There,

There are two things that is giving the space between Varlamov and Images here, first is the bottom margin of the <p> tag that is generated by the text editor. I suggest you place those content (Varlamov and Images) on the RAW content element instead of the Text element to avoid the generated <p> tag.

Or you can avoid the generated <p> tag by manually wrapping your content in a <p class="mbn"> tag, atleast that way you have the control over the <p> tag.

Second the image itself (the <a> tag that wrapping it) also has a default bottom margin, to get rid of this add a class mbn to the <a> tag that wrapping the images.

e.g.
<a class="x-img lightbox x-img-link x-img-none none mbn">

Hope it helps,
Cheers!

#5

Hi Friech,

Thanks for your help.

I did what I thought you wanted me to do (and added in the p class=“mbn”) and the resulting code was:

<p class="mbn">[x_image type="none" float="none" src="http://www.eurasianwhispers.com/wp-content/uploads/2017/10/Awaza-Entrance-Sign.jpg" alt="Welcoming sign to the Awaza resort in eastern Turkmenistan" link="true" info="none" info_place="top" info_trigger="hover" class="lightbox"][lightbox selector=".lightbox"]<p style="text-align: center;"><span style="font-size: x-small;"><a href="https://varlamov.ru/1752230.html" target="_blank" rel="noopener">Varlamov </a></span>

but sadly this doesn’t seem to have changed anything. Have I done something wrong here?

Thank you,
EW

#6

Hi There,

Yes, you got the right idea but you forgot to close the p tags. On that code above you have 2 opening p tags while no closing.

Also, add a CLASS mbn to the image. Please update your code to this:

<p class="mbn">
	[x_image type="none" float="none" src="http://www.eurasianwhispers.com/wp-content/uploads/2017/10/Awaza-Entrance-Sign.jpg" alt="Welcoming sign to the Awaza resort in eastern Turkmenistan" link="true" info="none" info_place="top" info_trigger="hover" class="lightbox mbn"]
</p>
<p style="text-align: center;">
	<span style="font-size: x-small;"><a href="https://varlamov.ru/1752230.html" target="_blank" rel="noopener">Varlamov </a></span>
</p>

Move this lightbox shortcode on the bottom of your page, place it on a RAW Content element

[lightbox selector=".lightbox"]

Hope it helps,
Cheers!

#7

That’s brilliant, thank you, Friech

Ew

#8

On behalf of my colleague, you’re welocome. Cheers! :slight_smile: