Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Text problem

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #260475
    isendersms
    Participant

    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

    #260484
    Paulie_D
    Moderator

    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.

    #260537
    isendersms
    Participant

    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

    #260539
    Paulie_D
    Moderator

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design’ is closed to new topics and replies.