Search The Hostwinds Guides Knowledge Base

How to make your website Mobile Friendly

Share This Article

In this guide, we will learn how to make a simple landing page mobile friendly. This guide requires, you to create an index.html page with a css style sheet. We have covered this topic previously so you can follow this guide and learn how to create your own HTML landing page with HTML and CSS.

Why You Need A Mobile Site

Most websites are designed to be viewed on devices like computers with decently sized screens. On a computer, the site may look simple and clean, but when viewed on a mobile device with a smaller screen, this can cause issues. Thankfully, this can be resolved a few different ways. For this guide will explain how to alter the style for a predefined screen size by editing the HTML and CSS files.

Here is the example site as displayed on a computer:

Here is the same site displayed on a much smaller screen:

Editing the Site

For reference during this here are the original index.html and css.css for our example site above.



Step One: Adding the meta tag

To make sure the browser recognized the new styles we will need to add the following line inside the <head>  tag of the index.html file

Without this tag, you may be able to see your changes in some browsers like Mozilla but not Chrome.

Step two:  Create different @media sections for the desired screen sizes

This example will create two different devices sizes 400px and 900px, when creating the @media section need to have both the max-width to identify which screens are using this style as well as setting the actual display screen size for the style. The identifier will be in the @media screen and (max-width:) and the actual style for it will be inside the body tag.

An @media section for each screen size is needed. For this example, we are going to use 2 default sizes:

For screen size with 900px like a tablet: @media screen and (max-width: 900px) {}

For devices like your cellphone 400px: @media screen and (max-width: 400px) {}

This example used a max-width, meaning any screen with that size or less will follow those style rules

Inside these tags is where the style will be redefined in order to better fit the different screen sizes. This example changes background and font sizes as well as hiding some objects to keep a clean appearance.

Depending on your background image you might want to play around with the different sizing to get the best effect. This example used a larger image size to make sure there was no distortion of the image and there was no white space.

Step three:  Changing the Background and font

In this example we set the background to a 100% height and 100% width. This makes sure the image dimensions stay constant but in the above example it shrinks the image and repeats it across the screen. This can be resolved in a few ways, first change the background-size attribute, in the main css.css to auto.

Defining images as auto only makes sure the image and text will fit in the screen. To adjust the site to display the best for different screen sizes these attributes should be added in your @media tags.

Here is what the example site looks like just using auto:

Adding this code to the css.css file

Defining new attributes

Step four: Hiding Content

If you notice also removed the “Content Coming December 2018” to help make sure our page is simple and easy to read on any screen.  I did this by adding the display:none;  in our <p>

Here is the @media section for 900px:

Step five: Adding new content

When working with screens that are significantly smaller than the one you originally designed you might need to change what context you display. In our 400px example, we did just that

The size was adjusted and the unwanted texted was hidden using the display: none;  but we also change the top margin and added a new object.

The new object needs to be added to both the index.html and the CSS

Here is what the full index.html looks like for this example:

The <p2> text should only show up on screen 400px or less, both the main styles and the @media for the 900px need to have the <p2> hidden.  Here is the full css.css for this example:

Test your Site!

You can your browser’s developer tools to view how the page will be displayed on different devices.

Related Articles