Optimise Theme x for mobile devices

Daniel KoopWordPressLeave a Comment

Optimize theme X for mobile devices

You may have noticed that I am using Theme X for my website. Unfortunately, the creators decided to have a more universal design that looks the same on every device instead of a design that really works for every device. So, we have to do the work ourselves but how can we optimise Theme X for mobile devices? If you do not want to read my explanation, you can go to the full code.

How does Theme X look on a mobile device?

In this case I am using the stack “Renew”. I did not change the theme much, because I like the simplicity and it meets my requirements. I also prefer to have minimal maintenance on my website, so I also want to use as much of the original code as possible rather than overruling the original PHP code. I did create a child theme already, in case I want to make changes in the future without having to lose any settings. For Yourwebhoster.eu I use the stack Integrity.

Before optimizing

Before I optimised Theme X for mobile devices

After optimizing

After I had optimised Theme X for mobile devices

How to optimise Theme X for mobile devices

Correct body width

The first problem is that Theme X forces to show the background image / color on mobile devices. At a low resolution, the background image / color of the page is not required anymore as it consumes too much space on a tiny device. Instead, I prefer to show more content on the page.

To solve this problem, simply add the following code to Appearance -> Customize -> Custom -> CSS:

This tells every device with the width of 1024px to make the website full-width and will improve your website by a lot. You can also choose to set the max-width to 768px, but in my case it is pointless to show the background. Do note that if you have a background image, it still gets loaded by WordPress. I have chosen to not use a background image instead.

Now the width is correct, we need to adjust the width of the content. This may be a personal opinion, but I would like to use the full width of any device with a width less than 1024px to make sure that the visitor gets the best reading experience. To do so, we add the .x-container.max class to our custom code in the customizer:

I choose to set this to 96% to make sure that the text does not overflow the content. This has to do with the way how Theme X works. Things like breadcrumb and the post content can overflow if you set the width to 100%.

Only load the background image when needed

Do note that the background image is still loaded via the backstretch plugin. When you have a child page, you can modify the file wp-content/themes/x/framework/functions/global/admin/customizer/output.php. As Theme X is in active development and I prefer to have minimal maintenance on this website, I will not use this. Instead, I am using the boring default color.

 

Hide the title “The blog”

In Theme X Renew, you have the option to set the title for the blog page. I do not want this feature and unfortunately the the theme lacks the feature to disable the title. Of course, you can leave the field empty but this causes an unnecessary whitespace and requires extra space on our already small smart phones. Therefore, I have added the following code:

Small header

An other problem of Theme X, is the large header. When you enable the topbar, it is also shown on the mobile device. Normally I prefer to not remove functionality on mobile devices, however in this case the functionality is more a disadvantage to have than an advantage as the main content requires more scrolling. The topbar only presents the social media icons, which are also available at the bottom of the page. I know that this will get less exposure than the topbar but I may pick this up later. Do note that if you have important content in the topbar, you should not remove it on mobile devices. Even when you have the same content at the bottom of the page, it is less seen than content which is placed at the top.

Full code

To optimise Theme X for mobile devices, I ended up with adding the following code to Appearance -> Customize -> Custom -> CSS:

And  the following code to the custom javascript code Appearance -> Customize -> Custom -> JS:

I hope that this blog helped you with how to optimise your website. There is still room to optimise  Theme X for mobile devices but this also highly depends on your installed plugins and other customisations.

To do

There are plenty of other modifications to do when you want to optimise Theme X for mobile devices. For instance, I do not like the font-size of the headings and I try to use the h3 class instead. The normal settings for h2 shouts too much.

Also, when I find the time for it, I want to further optimize the website for mobile and tablet usage. Feel free to leave a suggestion about optimising Theme X for mobile devices in the comments 🙂