If you use a responsive theme, you should check out on the mobile device how the text inside pre tag is being displayed.
The font-size for pre element can be set with !important declaration, but the text size can still get way bigger than you want, like on the picture attached.
You won’t see the problem while changing window width on a desktop browser. You should open a blog post on an Android or iOS device.
Don’t try to set a fixed font-size to all classes involved. The problem is not connected with font-size but the fact that mobile browsers don’t know what’s the real width of the pre element, when its white space is set nowrap.
You can use try one of these two tricks to fix the problem:
1. Set white space to pre-wrap
In your stylesheet, for pre class, add or change the white-space property:
pre {
white-space: pre-wrap !important;
}
Leave other elements unchanged.
If you are using a syntax-highlighting plugins like WP-Syntax, you should also add this property to classes defined by the plugin.
For WP-Syntax, you should do that for every code language you use (the one you define inside opening pre tag, by lang=”LANGUAGE”.
The languages are at the same time the names of a relevant class. The example below shows it for php and css languages:
pre.php, pre.css {
white-space: pre-wrap !important;
}
With this method, the text will fit the actual width of the pre element.
There is a disadvantage, though, if you want to add line numbers to your code, as the ones above. The line numbers won’t match the lines in the original code, as the text will wrap to fit the current width of the screen.
If you want to display line numbers in your pre boxes, try the second method.
2. Define a smaller width for mobile browsers
Setting width to 50% fixes the problem on the iPhone. In your style.css find the @media screen:
@media screen and (max-width: 480px) {
pre {
width:50% !important;
}
}
For WP-Syntax it will be:
@media screen and (max-width: 480px) {
.wp_syntax pre {
width:50% !important;
}
}
If you are planning to deeper modify the styling of WP-Syntax, you can copy css file from plugin’s directory (plugins/wp-syntax/css/wp-syntax.css) directory into your theme’s main folder (where style.css is). Thanks to that, the styling won’t reset when the plugin is updated. Plus you won’t need to add !important declaration to every property.
More on WordPress:
[pi-archive number=5 tag=”wordpress” ]
Writer Updated 