Show Me the Data - A Blog About University and College Websites

Rock-solid websites are the foundation of effective digital marketing, communications, e-commerce and social media campaigns.

But, you can’t know if your higher education website is rock-solid without checking it.

We study higher education websites to identify and benchmark the critical issues and we publish the results here.

Our automated higher education website quality assurance service is founded on our research so you can find and fix issues from privacy and security, through social media usage and SEO, to website analytics and content.

How To Make A Mobile Friendly Website: Content Wider Than Screen (2/5)


Fixing “Content Wider Than Screen” Failures

Our previous post addressed preparing your website for mobile friendliness.  We looked at the background to being mobile-friendly, the Google mobile-friendly test tool and set out the solution to the easiest of the five problems Google’s tool highlights.

We now turn our attention to a slightly-more-difficult-to-solve problem the tool will identify.

Content Wider Than Screen

This issue might seem to be just a browser problem.  If the text is too wide to fit the screen, won't the browser just reflow the text to fit? 

In fact, there are, at least, three reasons for Google to conclude that the content is too wide for the screen. 

  1. images (but probably not background images - this depends on your page styling) may have dimensions too large to fit in the viewport
  2. text sizing is causing the browser to make the text display so large for certain types of HTML element that it causes the browser to render the page to be wider than the viewport. 
  3. the page construction is such that HTML block elements are not reflowing within the mobile browser's viewport. 

Let's see how to fix each of these issues.


Google recommends implementing fully responsive web site designs. One aspect of responsiveness is to define element and other dimensions using relative measures, such as percentages or, for text, in terms of multiples of ems

This approach means, for example, defining an image width as 100% or 100vw (100 times 1% of the viewport width) - incidentally, these two would not always give the same result, since 100% would mean "100% of the containing element". Configured this way affected elements resize to fit the viewport.  

For images, you should probably define the height to auto, otherwise the aspect ratio (width:height) could change and produce undesirable results. 


For text, using em units means making the text sized relative to everything else. You may wish to start by deciding the size of ordinary paragraph text and then setting all other text sizing relative to that.

With a fully responsive design, you would probably use CSS Media Queries to alter the definition of basic page elements. Media queries allow you to define CSS properties based on media features such as device width (for “device” in this instance, read “browser”). Current practice seems to be that media queries are used sparingly by having several definitions (for various screen width ranges) that alter only a limited set of CSS properties such as paragraph text sizing. 

Combining media queries with relative element and text sizing goes a long way to making a responsive design that will be mobile friendly.

Fundamental Page Design

The third factor causing content to be wider than the screen is much harder to solve as it derives from the fundamental design of a page. 

Page designs that fix the relative position of page elements or designs that prevent the browser reflowing or breaking text at the right hand end (or left hand end for right-to-left script) result in the content being deemed too wide for a mobile screen.

It may be the case that only one of a few pages suffers from this problem, in which case a fix may be easily developed and implemented. However, if a whole site is affected, it may be that a single common design decision is all that is needed to revisit, redevelop and implement changes with site-wide benefits for mobile friendliness.

The next post addresses: Links Too Close Together



Sign Up for Email Delivery:

We collect the following solely to email you new blog posts.

* indicates required

MailChimp stores your details. We do not share data with third parties.



eQAfy helps higher education institutions manage their web estates and helps websites be error-free and
deliver their intended user experience and meet their marketing and communications objectives

Run a sample QA audit


Photo Credit: Adrien |



Sign Up for Email Delivery:

We collect the following solely to email you new blog posts.

* indicates required

MailChimp stores your data.
There's no sharing with third parties.
Unsubscribe or ask to be removed at any time.


eQAfy Logo


Higher Education Website QA


Rock-solid websites are a foundation of effective digital marketing, communications and social media campaigns.

You’ll only know if a site is undermining campaigns, harming reputations or creating risk exposures by checking it.


Run a sample QA audit

25 Most Recent Blog Posts