Recently, I as fed up with my theme and I decided to make my own theme to optimize for page loading speed. And indeed, my performance score went from 70-ish to 100. However, after a few days, I received report from Google Search Console that some of my pages are not responsive.
I checked every items in my common responsive check list, including:
- Content must not be wider than its parent
- Max images’ width is 100%
- Columns collapse on to fit 100% width on small screen
After spending almost 3 hours in front of my screen, I figured out two culprits that made some of my post not responsive. This may not be applicable to you but it’s worth a try if you don’t know what’s the cause.
Figure element with a fixed width that caused page not responsive
The first problem I found is I have my image wrapped inside a figure tag. At first, I don’t understand why WordPress does this on some of my images and doesn’t on other. It turned out if your images have caption, they will be wrapped in a figure tag with a fixed width.
You can remove the width attribute of the figure element to fix the problem.
If your page is still not responsive, removing the caption solves the problem instantly.
Code highlighter could be problematic too
If you are using code highlighter like what I have on my site, you could be the next victim of long line of code. Normally, code highlighters have no problem with short string (variable, function name…). However, if you code contains long string such as long function name or long file path, your content could be much wider than it should be.
What’s the fix? Add this rule to Additional CSS (Under Appearance -> Customize)
article {
word-break: break-word;
}
This code tells the browser to break long words in to multiple lines. Save the changes and check your site again (make sure to clear your cache).
If your site is responsive now, it’s great. If it isn’t, please let me know in the comment below. There maybe other factors that cause your problem.
Conclusion
By no mean this is an exhaustive list of fix for site not responsive. However, these are the new problems I have encountered. Hopefully, the tips in this post is useful to you.