How to align text nicely independently of screen size

  • I am developing a website and on some pages I have several columns with images with associated texts. I want the text to look good independently of screen size. Have been using
    and am not sure it is the best, I tried the attribute justify but it did not look good. What is the best align attribute to use to get the text to adapt to the image and look good independently of screen size. Right now I am using this code: <p style=”text-align: left; width: 300px;”>

    And then in the text I am using

    The image is 300px wide.

Viewing 5 replies - 1 through 5 (of 5 total)

  • have you tried something like:

    <div style="width: 300px; position: relative;" >
 <img width="100%" src="/path/" />
 <p>this text should be responsive, max width is 300 pixels..</p>
</div>

    and by the way, using pixels isn’t a good practice to get elements responsive, unless you use media queries already..

    Hi Gabby,

    Can you post the url to your site?

    Stacy

    Matt Knowles

    (@aestheticdesign)

    The best way is to use a responsive theme that does all that for you. Unless you’re familiar with CSS media queries and want to take control of it all directly.

    But to answer your specific question, I usually float the image left or right for wider layouts, and then at a breakpoint where the text just gets to narrow, I’ll change the image CSS so that it no longer floats, but is inline, usually centered.

    Justified text looks good when you have a wide column, but if the column is too narrow, the word spacing required to maintain the justified edge can be awkwardly big. So left would be the way to go if that’s the case.

    Thread Starter gabby_wordpress

    (@gabby_wordpress)

    @sam, no I have not tried something like what you have posted but will look into it.

    @matt. I have a responsive theme, I guess that the
    mess things up. I am going to try to float the image to the left (in the actual page) and see what happens. What CSS code are you using? I have just started to learn CSS. I will also remove those
    .

    Thread Starter gabby_wordpress

    (@gabby_wordpress)

    Hi guys, now I have changed the code in the page to the following:

    <img src=”/path/” style=”float:left;” />
    <p style=”text-align: left;”>text</p>

    I removed the width: 300px from <p>. The text looks good under most pages. I guess if the Word is too long to fit within 300px it will be moved to the second row.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to align text nicely independently of screen size’ is closed to new replies.