A common problem on mobile devices is that the layout will appear to be "too wide" for the screen, often causing some empty or colored space to the right or scaling down other parts of the site design.
Most commonly, this is caused by content that's too wide for mobile devices, including these common examples:
- Video embeds: By default, most video sharing services define the width of the video player in pixels. This works find on larger devices, but smaller devices won't be able to display that width correctly and the player can therefore break the layout. To resolve this, see the second part of this article.
- Other embeds or "widgets": Like video players, other widgets or embeddable content can often break layouts as well. You can try enclosing the code in the responsive <div> tags as described in the second half of this article or check with the widget or embed provider to see if there's a fix. Please note that some widgets or embeds may have minimum width requirements. If you're still having trouble, you can try looking for a "width" value in the code provided and changing it to "100%" rather than a fixed number. In some cases, embed codes may have more than one place this needs changed.
- A URL in your text: Another common reasons for layouts breaking is that a long URL is included as part of text content somewhere on a page. Because a URL doesn't contain spaces, most browsers interpret this as a very long word and therefore won't break the word into two or more parts, which can break layouts. The easiest fix for this is to change the URL to a clickable link (such as "read more") that will fit on a single line.
- A long word: Just like with long URLs, sometimes longer words can break layouts in the same way. The exact length of the word that can break the layout will vary based on the font size and other factors. Common instances of this are when hashtags are included or on products that combine two or more words into a single word. To resolve this, you can either break up the word, use an alternate, shorter word, or adjust the font size.