Photos That Squeeze the Text Into a Narrow Strip on Phones

Two words to a line

On a computer, an accounting firm's service page looks tidy: a photo of the partners at a meeting table on the left, and a paragraph about tax planning beside it.

On a phone, the same page is hard to read. The photo still fills most of the width, and the paragraph runs down beside it in a column two or three words wide.

Visitors scroll past a ribbon of broken phrases, give up on the text, and leave without learning what the service includes.

How the editor places a picture

When you insert a picture in a page editor and choose left or right alignment, the editor sets the image to float. Text then flows around it, which suits a wide screen.

The editor also writes the picture's size into the page, in pixels: 300 wide, say. On a computer that is a third of the column. On a phone held upright it is nearly the whole screen.

The text gets whatever width is left over. With a narrow screen and a fixed picture, that leftover is a strip.

Pictures with captions need the same care. Some editors wrap them in a box with its own fixed width, so a theme rule for the picture alone leaves the caption box squeezing the text.

What the theme should do

A responsive theme should handle pictures inside page content with a few rules for small screens:

• Stop the float below a set screen width, so text no longer wraps beside the picture.
• Scale the picture to the width of the column, never wider than the screen.
• Keep the proportions, so a photo shrinks evenly instead of stretching.
• Add space above and below, so the picture does not touch the text.
• Centre small images, such as logos, rather than stretching them to full width.

These are a few lines in the theme's stylesheet. Many themes sold as responsive handle the layout but forget the pictures inside the content, which is where this problem lives.

Testing your own pages

Open your service pages on a phone held upright, and on a small tablet. Look for any paragraph that runs beside a picture.

On a computer you can get a rough view by narrowing the browser window until the layout changes. Phones themselves are the real test, since sizes and text settings vary.

Check pages written long ago as well as new ones. Older posts are the likeliest to have pictures inserted at fixed sizes.

Placing pictures so phones cope

Even with a good theme, placement matters. Insert each photo between paragraphs, not part way through one, so that when it goes full width it sits at a natural break.

Choose sizes that suit the job. A portrait of a staff member can stay small; a photo of the office or a team at work reads better at full width.

Write alternative text for each picture saying what it shows. Screen readers read it aloud, and browsers show it when the image does not load.

A worked example

A horse boarding stable on the edge of a farming valley has pages for stall board, pasture board, the indoor arena and its lesson program, each with a photo set to the left of the text.

On phones every one of those pages showed a narrow column of words beside a photo of a horse, and the board rates near the bottom were the hardest part to read.

The stable's theme handled its menus and columns well on small screens, but treated pictures in the content exactly as it did on a computer.

The developer added rules to the stylesheet so that below tablet width, pictures in the content stop floating, scale to the column and sit between paragraphs.

A few pictures inserted mid-paragraph were moved to the breaks. On a phone each page now reads as a photo, then the full text, then the next photo, in order.

Galleries and pictures in a row

Two or three pictures in a row have the same problem in another form. On a phone they shrink to thumbnails too small to see, or spill off the screen.

A gallery in the content should become a single column, or a grid of two, on small screens. That is another rule for the stylesheet, not a job for each page.

Large files behind small pictures

A picture shown 300 pixels wide may be a camera photo several thousand pixels across, scaled down by the browser. Phones download the whole file either way.

Resize photos before uploading them, to about the widest size the layout ever shows. Pages then load faster, which matters most on a weak signal.

Most editing systems also create smaller copies on upload; inserting the medium or large copy rather than the original keeps the file in proportion to the space.

Pictures in older pages

Pages written over several years often carry pictures inserted in different ways: some aligned, some sized by hand, some pasted from a document with odd settings.

The theme's rules catch most of them. The rest are usually pictures with a width typed into the page itself, which a developer can find and clean up in one pass.

The counter-case

On wide screens, a photo beside a paragraph is often the best layout. It saves space, keeps the picture near the words about it and breaks up long pages.

Small images can stay beside text on phones too. A headshot or an icon 80 pixels wide leaves plenty of room for the words, and the theme can let small pictures keep their float.

So the fix is not to give up on aligned pictures. It is to let the layout change with the screen, which is what a responsive site is meant to do.

Fixing pictures on phones

1. Open each service page on a phone held upright.
2. Note every paragraph squeezed beside a picture.
3. Ask your developer for small-screen rules for content pictures.
4. Scale pictures to the column, keeping their proportions.
5. Move pictures out of the middle of paragraphs.
6. Resize large photos before uploading them.
7. Check galleries and older pages the same way.

Step three fixes the whole site at once. One set of rules in the stylesheet changes every page, including the ones nobody remembers writing.

Another theme feature that works on a computer and turns awkward on a phone is the panel in a mega menu on a site with twelve pages.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.