How to Make a One Column Website Mobile Friendly (HTML/CSS)

Responsive Web Design Applied to a 1 Column Layout


How to Make a One Column Website Mobile Friendly (HTML/CSS)

by Christopher Heng, thesitewizard.com

I was asked by a visitor how she could make a website with a one column layout mobile-friendly. She had read my article on making a mobile-ready website and noticed that while I discussed how one could modify a website with two, three or more columns in the second chapter, I did not address the case of a one column website.

Prerequisites

This article requires you to know a bit of HTML and CSS. You don't have to be an expert, but at least some knowledge is needed otherwise you won't know how to apply the information given to your website.

Incidentally, this article is meant for those who already have a site. If you don't have one yet, and are here because you're thinking of starting one, please read How to Create a Website.

How to Make a Mobile Friendly One Column Layout Using Responsive Design

In mentioning the case of a multi-column website, I was not actually trying to ignore single column sites. The thing is, a multi-column website actually has problems on a mobile phone that a one column site does not: namely, the extra columns. In the narrow confines of a mobile phone's browser, having more than one column means that each one becomes extremely squashed. So I had to specifically show how to merge everything so that the site only has one column on a mobile device. Obviously, if you only have one column, this step (and therefore the whole of chapter 2) is not needed.

However, in place of chapter 2, you may still need to adjust the CSS slightly for your layout. So here's a checklist for making a single column website mobile-ready.

  1. Change the Mobile Browser's Defaults

    The first step is to carry out the things mentioned in How to Make a Mobile-Friendly Website: Responsive Design in CSS. In particular, you will need to set the browser's viewport to device width and the scaling to 1. That article also lays the groundwork for using responsive web design, so you should really read it first.

  2. Change to Use Relative Widths if Needed

    Since your site is a one column site, you can probably ignore the second chapter of that series.

    Instead, check the CSS for your web pages. If any of them has a fixed width, change it to use relative units instead.

    For those who don't know what I mean, take a look at the fixed width demo page. Notice that when you resize your web browser window bigger or smaller, the width of the page remains fixed. If you make the window very small (eg, with mobile phone widths), a horizontal scroll bar will appear in your browser, and you will be forced to scroll left and right in order to read each sentence. If your window is larger than the width of the page, the contents do not automatically use the extra space, but stays in the fixed narrow confines assigned to it.

    This occurs when a web page uses pixels (or some other fixed unit) for its width. The result is that the content of the page is locked at that width regardless of the size of the visitor's browser window. If your web page behaves the same way, it means that it also uses a unit like pixels (shown as "px" in your style sheet). Change it so that it uses either "%" (percent) or "em" instead. If you are not sure what to change it to, modify it so that the width becomes "100%". Your web page will then stretch to fill the entire browser width no matter how big or small the window is. You can see an example of this by looking at any page on thesitewizard.com, including this very article that you are reading. Resize it to see what happens.

    For example, let's say that your CSS "width" rule is on the "body" selector, and it originally said something like:

    body {
      width: 800px ;
    }

    Change it so that it now says:

    body {
      width: 100% ;
    }

    If the <body> selector doesn't contain a width rule, but your content is kept in a <div> block that does, change it there instead.

    Alternatively, you can add a max-width rule to the <body> or <div> selector that contains the width rule.

    body {
      width: 800px ;
      max-width: 100% ;
    }

    With the addition of "max-width: 100% ;", your page will look as it always has on desktop browsers, but will be resized so that it is no wider than the window on screens smaller than the width you specified.

  3. Make Your Images Mobile-Friendly

    You should also add the CSS rules for images given in How to Make Your Images Mobile-Friendly (Responsive Design) so that your pictures will be automatically resized on a mobile device. Alternatively, if your images are irrelevant for mobile phone users (for example, they are things that are only useful if your visitor is using a desktop/laptop computer), you can also cause those pictures to disappear in a phone browser.

  4. Make Your Form Fields Mobile-Friendly

    If you have forms on your page, you may want to add the following CSS rules to prevent any form element from exceeding the browser width.

    input, select, button, textarea {
      max-width: 100% ;
    }
    meter, progress, output {
      max-width: 100% ;
    }

    Alternatively, you can even put a "max-width: 100%;" rule in the "style" attribute for the individual form elements. For example, if you have a text <input> tag for a field named "somefieldorother", you can add a style attribute in the following way.

    <input type="text" name="somefieldorother" style="max-width: 100%;">

    If the only form you have on your website is a feedback form generated using my free Contact Form Wizard, you probably don't need to do this, since the max-width rule is automatically added to the fields it generates. Note though that if your form was generated before 23 December 2016, it will not have the CSS rules built-in. The solution is to either add the rules yourself, or generate a new version of the form and script to replace your old ones.

Responsive One Column Layout

In general, it's much easier to make a one column site mobile-friendly than it is a multi-column one, in the sense that there's less work involved. Once you apply the above changes to your site, it will automatically adjust itself to fit your visitors' devices, whatever size they may be.

Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Make a One Column Website Mobile Friendly (HTML/CSS)





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.