In my opinion, WordPress is by far the best CMS platform to use for your website or blog. There are great HTML5 themes available for around $40 and they perform well on search engine results. The only downside is how they look on mobile devices.
If I quickly explain what the 2 functions for how your website is displayed on desktop and mobile devices, then I will go into how to solve the problem.
Responsive Design
All good WordPress themes come with the responsive design option. This is usually a check box in your themes option menu. If you login to your WordPress dashboard, there will be an option on the left menu with the theme name. Browse through the options, usually in the ‘layout’ or ‘general’ menu. Make sure this ‘Responsive Design’ box is checked.
Responsive Design means your website will be re-sized and adjusted to load and display correctly on any mobile device. With more people using mobile devices to visit websites, it is important your website is responsive. The last thing you want is a potential client visiting your site and it doesn't load correctly!
Viewport Tag
The problem most WordPress users have is how their website looks on mobile devices. Yes they load very quickly but they are not very appealing to visitors.
The viewport tag in most WordPress themes automatically adjusts the layout to fit the device your site is viewed on. This usually cuts off some important features from your website or just makes everything into one long list.
How To Display Your Site On Mobile Device
Before you follow the below steps you should always make a backup of your files. I have tested this process on multiple themes and they all worked correctly, this may not work for all themes. If you are unsure, or have made a mistake, please contact an experienced web design company to check your themes WordPress files or comment below for any support.
Step One
Login to your WordPress dashboard. Click ‘Appearance’ then ‘Editor’.
Step Two
You will now be shown all your themes files. These files control the look and feel of your site so you need to be very careful when editing. Connect to your websites files through your FTP account to backup the file were about to edit. If there is a problem after editing, you can easily upload your file to restore the original settings.
File navigation to backup header.php file:
public_html > wp-content > themes > SELECT CURRENT THEME NAME >
Now download and save the header.php file. If there are any problems after editing just upload the header.php file back to the above directory to restore your original view.
Step Three
On the right hand side of your WordPress menu you will see a list of file names. Click on ‘Header’ (header.php). This will now load your header file for editing.
Step Four
Scroll down the Header file until you see the below line of code.
Delete this line of code. Do not delete anything else. Now click ‘Update File’.
Step Five
Before you check your website on your mobile device, check it still looks correct on your desktop computer. You may need to clear your websites cache and browser cache to view the latest version of your website.
Your website should look exactly the same as before you deleted this code. If it doesn't, upload the saved header.php file back to the stated directory.
Now check your website on your mobile device. Instead of your site being a long list, you should see a scaled down version of your website. If not, upload your header.php file back to the directory.
If everything has worked correctly, you should now have a great looking website that displays on mobile devices!
