WAIT: Mobile usability issues in Google Search Console - Bricks Builder

Dear Bricks Builder Support Team,

I am writing to bring to your attention a recurring issue that myself and several other developers have been encountering while using Bricks Builder for website development. The issue pertains to mobile usability problems that consistently arise across websites built using your platform.

Upon thorough analysis and cross-referencing with Google Search Console, it has come to our attention that there are three predominant mobile usability concerns that consistently appear across various websites built using Bricks Builder:

  1. Text Too Small to Read
  2. Clickable Elements Too Close Together
  3. Content Wider Than Screen

I want to emphasize that these issues are not isolated to websites developed by our team alone. Upon inspecting other websites created by different companies and developers, I noticed the same set of mobile usability challenges. This suggests that there may be inherent aspects within the Bricks Builder framework contributing to these concerns.

Sample sites:

  1. scholarshub.info
  2. muhammadadeel.net
  3. portstephensdbs.com.au
  4. davidfoley.net

In an effort to collaboratively address these challenges and enhance the quality of websites built using Bricks Builder, I kindly request your support and guidance. It would be immensely beneficial if the Bricks Builder team could investigate these issues, provide insights into potential solutions, and work towards an improved user experience on mobile devices.

I greatly appreciate your attention to this matter and look forward to your response.

Thank you for your time and consideration.

Thanks,

Hi @muhammadadeel,

All of the points mentioned seem like implementation issues rather than tool-specific issues (in this instance Bricks).

  • Text Too Small to Read: The user is in control of the font size.
  • Clickable Elements Too Close Together: The user is in control of the design.
  • Content Wider Than Screen: The user is in control of the width settings.

Can you help me better understand what exactly Bricks is responsible for here? :slight_smile: or can you point me to an exact case where Bricks is at fault?

Thank you!

@charaf

Yea sure, Let me explain!

This time I’m also attaching a screenshot about what crawlers see when crawler visits our site.
muhammadadeel.net In this site you can see that font-size is of 17px on mobile. And it is a very clean site with proper spacing between elements. Still Google is saying that

  1. Text is too small
  2. Elements are too close together

I build this site. But Below I’m going to mention another website built by another developer in a big company. It’s not our website only. It is also showing the same issue in it. davidfoley.net

I checked 5 to 6 sites built on bricks builder. All websites have the same issue on mobile. And it is not the issue of how we developed the site. Because, the websites that I checked was developed by different developers in a different company.

Are you getting my point?

I think bricks is not loading CSS properly on mobile phone therefore Google is saying text is too small and elements are too close (Check screenshot)

I can confirm that I get such Search Console warnings.

What I did was to simply click on Validate Fix button in Search Console and the fix will be validated. (While the screenshot bellow is not for a bricks website, I am quite sure the things will be the same in a bricks website situation)

@solarian
We starting using bricks 6 to 7 months ago. Before this, we were using Elementor. All websites that we built using Astra + Elementor are not showing these issues.
But in these months we built 5 to 6 websites and all websites have the same issue.

Then I thought that may be we are missing something in our development process then I crawled other companies’ sites, they are also using bricks. And I saw the same problem with those websites.

Therefore, I opened this conversation. I think when Google boot crawls our website at that time bricks doesn’t load CSS properly. Which is causing text to small but we do not keep font-size less than 17px on mobile. 17px is the minimum size that we are carrying on all sites.

I hope, I’m clear. Am I ?

Good morning

I can’t confirm that. My Bricks built page does not show these errors you mention:

Cheers

Patric

Hi @muhammadadeel,

By running a lighthouse report on muhammadadeel.net these are the results:


Channel: DevTools
Initial URL: https://muhammadadeel.net/
Chrome Version: 116.0.0.0
Stack Trace: LighthouseError: PROTOCOL_TIMEOUT

This combined with the screenshot you’ve shared from Google console highly suggests that you have a server issue.

@charaf

You are checking desktop. My Ticket is about Mobile Usability. Below I’m attaching a screenshot of my site. In this screenshot Google is saying that this website is not useable on mobile phone and the reasons are

  1. Text size is too small.
  2. Clickable elements are too close.

But the reality is, my website font-size is 17px on mobile phone.
And each element have a proper spacing. When you will open site in real device.

But when Google crawl this site, Google see nothing style (Check screenshot, what Google see when it crawls my site).

I don’t know why bricks is not loading properly when Google crawls our site.

Also, recently, I built a blogging site on bricks and it’s continuously getting failed in “Mobile Usability” then I re-built using Astra + Elementor. And know that site is working perfectly.

I’m not a one time bricks user. We built at-least 2 to 3 websites every month for our clients. But this issue is coming in every site. But with same techniques, we build site on Elementor Builder or using another theme this issue doesn’t come.

It’s a very serious and critical issue for us. Please help us.

Hi @muhammadadeel,

I understand this is a frustrating situation. I’m currently trying to investigate this, but I can’t find similar reports where Bricks was the issue.

Are you using the same hosting provider/hosting setup for all websites & themes? Also, regarding the CSS loading method, are you utilizing inline or external files? Another aspect to consider is the cache plugins; does the site render correctly when you disable them?

I found a relevant discussion on the Search Console Help forum that might shed some light on the situation. According to a response in this thread, Google may not load certain resources deliberately for various reasons. This sometimes results in important resources being skipped, affecting the page rendering in the screenshot. So I would suggest setting the CSS loading method to inline as a debugging step.