Make a Website Responsive using CSS and HTML

Pankaj Garg Knowledge

I am going to talk about something different from the regular topics in this post. I recently moved one of my old websites to a different hosting provider. As part of that, I worked to make the website responsive. The whole process turned out to be much easier than I thought, and required just few changes. I thought to put them in a post, so it can help anyone else needing the same. Note: I have only tested this in Chrome and Edge on Windows and Android.

Meta Tag

First, I needed to add a meta tag for width and scaling. This should be between the <head></head> block in your HTML document. This is what I added:

<meta name = "viewport" content = "width=device-width, initial-scale = 1">

Responsive Images

Next, I needed to make sure that images on my website can scale based on device screen sizes. For this, I added a new class to my CSS file:

.myImage {
    width: 100%;
}

And used this class in my images:

<IMG src="/Projects/CrashDoctor.jpg" class="myImage"/>

Note: You can also add other attributes to the CSS class, such as max-width etc. if you need to enforce maximum size of an image.

DIV Tag

Finally, my website is built using tables and the header contained multiple columns a table row. Some columns were left aligned and others were right aligned. I wanted to keep the same behavior, and also add responsive behavior where on smaller screens, the row automatically splits in two with left aligned columns in one row and right aligned columns in another row.

I did this by splitting the table in two separate tables and wrapping those inside two separate DIV tags. This is the code for CSS for the two DIVs:

.left-div {
    display: inline-block;
    max-width: 320px;
    text-align: left;
    padding: 0px;
    background-color: #eaeaea;
    border-radius: 0px;
    margin: 0px;
    vertical-align: top;
}
  
.right-div {
    display: inline-block;
    max-width: 280px;
    text-align: left;
    padding: 0px;
    background-color: #eaeaea;
    border-radius: 0px;
    margin: 0px;
}

And this is the partial HTML code for the two set of columns:

<!-- This is the first column set -->
<div class="left-div">
  <table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0" STYLE="MAX-WIDTH:320px; MIN-WIDTH:320px;">
    <tbody>
      <tr border="0" style="border-collapse: collapse; height: 44px;">
        <td STYLE="padding-top:0px;">
          <A href="/?BH=home" class="clsMenuItemAnchor">
            <img width="36px" src=<?=$gHomeMenuImage?>>
          </A>
        </td>
        <td width="20px" style="min-width: 20px;">&nbsp;</td>
        <td class=<?=$gHomeMenuClass?> >
          <br>
          <A href="/?BH=home" class="clsMenuItemAnchor">Home</A>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- This is the second column set -->
<div class="right-div">
  <table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0" STYLE="MAX-WIDTH:280px; MIN-WIDTH:280px;">
    <tbody>
      <tr border="0" style="border-collapse: collapse; height: 44px;" class="clsMenuItem">
        <td width="20px" style="min-width: 20px;">&nbsp;</td>
        <td class="shareTD" style="min-width: 20px;">
          <br>
          <A class="clsMenuItem" rel="external nofollow" href="javascript:void(0);" onclick="share_article('twitter');"> <img id="idTitleImageTwit" border="0" align="right" WIDTH="20px" Height="20px" src="/Images/TwitHigh.png" title="Share on Twitter"> </A>
        </td>
        <td width="20px" style="min-width: 20px;">&nbsp;</td>
        <td class="shareTD" style="min-width: 20px;">
          <br>
          <A class="clsMenuItem" rel="external nofollow" href="javascript:void(0);" onclick="share_article('facebook');">
            <img id="idTitleImageFb" border="0" align="right" WIDTH="20px" Height="20px" src="/Images/fbHigh.png" title="Share on Facebook">
          </A>
        </td>
      </tr>
    </tbody>
  </table>
</div>

To ensure that second column set is right aligned inside its respective DIV on desktop but center aligned on mobile, I also added a small change to CSS to use width:100% for desktop and width:0% for mobile. Here is the CSS:

.shareTD {
    width: 100%;
}

@media screen and (max-width: 602px) {
    .shareTD {
        width: 0%;
    }
}

Result

Before these changes, my website rendered like this:

After these changes, on desktop the website renders like this (very close to older website):

However, now on mobile, this website renders much better by automatically reflowing the content:

Summary

Hope you find this post useful and it helps you in converting your websites to be responsive.

Please note that I am not a web developer and a lot of HTML/CSS here (or on the website) might not be perfect, especially as I had few hours to make these changes due to other priorities. That said, if you see areas of improvements or have any suggestions, I would love to know about those and would do my best to incorporate them.

Share