quas

I’m not worried. This is a situation I was, in a way, thrown into. That’s exactly why I’m trying to understand better what is going on in order to shield myself more easily in the future and do it as non-mechanically as possible.

Ok, I might have interpreted your advice wrongly. In this clearer context I get it.

I’ll take a good look at those two links. I’ve already looked at sucuri sites, I’m going to take another look there too.

Thanks for clearing things up, anyway.

• This reply was modified 7 years, 6 months ago by Jan Dembowski.

Hi. I wanted to post another text in order to say that the problem has been solved, but I couldn’t, because wordpress said that the topic was closed.
I’ve solved it by adjusting the margin-bottom (and right) after all. So that was the space that interested me.
Thank you for your quick response anyway!

One more thing I’d like to ask you, though. Inside the text, as you can see, there’s the sentence “da-mi un like” and “like” has a blue background.

This is the line code:
<div class="rand"><span class="txt tright2">dă-mi un <span style="background-color: #4865b4; color: white;">like</span></span></div>

I’ve checked it out on Chrome and it goes much lower than the rest of the text. I’ve no idea why that happens. Any other suggestions?:)

Later edit:

I’ve changed the container div’s line-height to 17px and I’ve applied the same line-height to the <span> element and that did the trick 🙂
So it was, again, only about adjusting the line-height, but applied the container.

Thanks again for your help 🙂

But there’s obviously a big difference between the two. My text is visibly lower than yours. And this produces a slightly bad visual effect.

I mean, of course, I can live with it, especially since I inserted the vertical alignment statement, but it’s still not perfectly symmetrical.

Well, anyway, it’s decent and I have you to thank you for it, but if you do find a solution to perfectly adjust the text, it will be much appreciated 🙂

Alright, I’ve tinkered with the padding but to no avail. WordPress seems to represent things in a different way than normal platforms do. I’ve tried also tried your code locally and it works perfectly. But on wordpress, the words are too low compared to the rows they belong to (you can check the second link that I’ve posted above). So even if there isn’t any visible overlapping, the text is not aligned with its row.
I’ve set padding-bottom: 0 and padding-top: 4px (4px seems to be the minimum in order for the top grey line over the text to disappear).
So what should I do? Sorry for being such a nuisance 🙂

Hi!

What you’ve done is perfect and I thank you for it. Except one single thing that happens in wordpress and is more subtle than I could ever manage with my low css skills.
The problem is that in wordpress the box created by the span element (in which the text comes)slightly overlaps the bottom (following)row. So it simply doesn’t look as good as it looks on codepen. I don’t understand why wp changes the format.
Anyway, this is a link to a wetransfer screenshot of the site:

http://bit.ly/1qbUgQ1

I’ve made it work by testing it on my computer, but when I do it in wordpress, it simply doesn’t work.
This is the code that I’ve used on my site:

#rand {
	background-color: grey;
	display: inline-block;
	position: relative;
	width: 700px;
	margin: 2px;
	height: 18px;
	font-size: 15px;
}

#rand2 {
	display: inline-block;
	float: left;
}

And this is what I’ve been trying to present:

<div id="rand"> </div>
<div id="rand" style="width: 300px;"> </div><div id="rand2">Nu sunt genul tău<div id="rand" style="width: 100px;"> </div>
<div id="rand"> </div>
<div id="rand"> </div>

The problem is that the words (“Nu sunt genul tau”) end up in the following row, instead of positioning on the div’s right. So what is the solution?