Text problem

[isendersms]

Im trying to set image by image with text below, everything good, but when i need to insert a long text (text with 2 words) so the text become 2 rows, and that destroy the design.

There is a way to make that when it’s need to be 2 rows, so the text will be small and it’s stay in 1 row?

Or more simple soultion, how to do that the circle buttons stay in the same place, and just the text will go below, like in the 2nd screenshot.

https://codepen.io/xwp003x/pen/PJWwMw

https://lh5.googleusercontent.com/Qn9pUNAr78OOR3j_eQza6j6S3ulqxvbCa6tukPbZqgvahiRwjIkqiErlG6cjnvl8IVorOULWxDY6dBE=w1920-h857

https://lh6.googleusercontent.com/7nIz5OdTifTp6ew7ud9OYASAtg643Bpi1zfdoPbksJFoVAsET8w0lXx5TBX1LnoWqTuLAhy9K7rM7Y8=w1920-h857

[Paulie_D]

Your Codepen it doesn’t show thie issue (perhaps for the same issue below).

The other links are 403’d.

I’d sugegst using dummy images but regarding…

There is a way to make that when it’s need to be 2 rows, so the text will be small and it’s stay in 1 row?

You can’t do this with CSS. You’d need Javacript.

[isendersms]

Weird… try this:
https://photos.app.goo.gl/TdxMX4OeLulzVS2g2

The second screenshot:
https://photos.app.goo.gl/yvj0uswjlG0KNaPC3

The Codepen doesn’t show the issue because you see it in enough width space, but in smartphone view it’s narrow and make the text in 2 rows

[Paulie_D]

Judging from your image (note the images in your Codepen do still not show up), I’d start with making sure that the inline-block divs are set to vertical-align:top.

However, I don’t that that will solve the basic issue.

When the text wraps it make the element taller and you need a layout method that will equalise the heights of the elements automatically. I’d use flexbox or CSS Grid but that will depend on your own requirements.

As I mentioned before trying to reduce the font-size because the text wraps is a job for Javascript and frankly…would look odd.

A couple of other things.

1. <center> is an obsolete element and should no longer be used.

2. You should really wrap your raw text in a proper text element like a p or a span.

You might want to look into the figure element and it’s associated figcaption child.

[Author]

Posts