What could be the reason behind Google and Bing's mobile-friendly tests inaccurately flagging my site as non-mobile friendly?

Our website for resources is responsive and has been thoroughly tested on various real smartphones, including iPhone, Android, and Windows devices. It looks great on every phone we've tested it on.

You can visit the resources website here:

The site scales down effectively when tested in Chrome and Safari. However, both Bing and Google mobile friendly tests are not displaying the site correctly.

It seems like they may be viewing an outdated cached version of the CSS, even though they are recognizing the meta/viewport tag. We are puzzled as to why this older version is being cached, considering that the site consistently serves the latest version. This issue has persisted for weeks now.

Interestingly, our marketing site, which utilizes similar responsive code, displays correctly as responsive on mobile devices.

In the resources site, the stylesheet marketing-31db0bf8ce9fcecf2bceb39be640285e.css contains the responsive CSS code:


@media (max-width: 720px) {
    /* Responsive styles go here */
}

We are looking for suggestions on what we might be overlooking or need to adjust in order to ensure that the resources site appears as mobile-friendly as our marketing site.

Answer №1

Upon closer inspection, it appears that some elements are being cut off on the right side and the entire content is slightly shifted to the right. Typically, running your website through tests like these will provide you with instructions or alerts. Interestingly, when I first checked your site on , two errors were indicated (buttons too close together, and content extending beyond the right boundary). However, upon retesting, no errors were found and the site was deemed mobile friendly.

Answer №2

It took an excessive amount of time to troubleshoot the issue, but I eventually identified what was causing Google and Bing mobile tests to fail.

Upon inspection, it was determined that the body tag had the following style applied:

body {
    min-width: auto !important;
}

After making a simple adjustment to the code, changing it to this instead:

body {
    min-width: 100% !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When elements are arranged side by side without using floats, the alignment at the top is not correct

I am having trouble aligning multiple divs next to each other using inline-flex. They are not lining up properly on top (refer to the screenshot). Interestingly, if I remove the svg, the divs align correctly. ...

What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this: Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16. This is what the .font16 class contains : .font16{ font-size: 16px; ...

Persistent Footer while scrolling on Internet Explorer

Trying to achieve a consistent look across Chrome, IE(11), and FF for my responsive website has been a challenge. The main issue I'm facing in IE is that when the site's content extends beyond the viewport, the scrollbar fails to reach the end d ...

Utilize the JavaScript Email Error Box on different components

On my website, I have implemented a login system using LocalStorage and would like to incorporate an error message feature for incorrect entries. Since I already have assistance for handling email errors on another page, I am interested in applying that sa ...

The single controller can now showcase various notification styles for operations such as insertion, updating, or error handling

I need to display notifications to the user based on three different scenarios using a controller. When data is successfully inserted When data is successfully updated In case of an error For each scenario, I want to show a different style of notificati ...

How can I target all ul elements except those contained within a div with a specific class using CSS?

In my global.scss file, I have defined global styles for ul elements as shown below: ul { list-style: none; margin: 0; padding: 0; } However, I am trying to find a way to style all ul elements except those within a specific jodit-wrapper class ...

Tips for keeping my wordpress menu at the forefront

This piece of code is responsible for controlling the main menu on my website. Currently, it's set up so that when I scroll down, the menu disappears, and when scrolling up, it reappears. However, I would like the menu to always remain displayed at t ...

Struggling to align elements in React/JS/M?

My challenge is aligning the elements in the middle of my page. I aim to have 3 elements per row, with n rows depending on the number of "VideoBox" components. It's crucial that these elements fit within the lettering of the P R O F E S S I O N A L ...

Tips on implementing vertical-align within an inline-table

Can someone help me with vertically centering text inside links without losing the 100% height of "a" elements? I've tried to tackle this issue without success, and I am using Twitter Bootstrap 3. Any suggestions would be greatly appreciated. ...

Adjust the alignment of text to a precise vertical ratio of the image

Let's say I have this amazing logo with some artistic text in it that cannot be replicated using a downloaded WebFont In the image, the text baseline sits at 68% from the top and 32% from the bottom. Now I want to align text in an HTML document, whi ...

Customizing the appearance of Jquery UI Accordion Headers

Trying to integrate the JQuery UI accordion into my JQuery UI modal dialog has been causing some alignment issues. Despite following code examples found online, such as http://jsfiddle.net/eKb8J/, I suspect that the problem lies in CSS styling. My setup i ...

Creating a multi-level mobile navigation menu in WordPress can greatly enhance user experience and make

Hey there, I am currently in the process of developing a custom WordPress theme and working on creating a mobile navigation system. Although I have managed to come up with a solution that I am quite pleased with after multiple attempts, I have encountered ...

Align the tops of the tables

I currently have three tables in my HTML code. When all three tables are filled with data (10 rows each), they appear correctly aligned as shown in the first picture. However, if any of the tables do not have the maximum capacity of 10 rows reached, they ...

What is the best way to distinguish the Footer from the Content?

While I was honing my skills in crafting a website using only HTML and CSS, I encountered an issue. I couldn't figure out how to place the footer beneath the content properly. My goal was to clearly separate each section - header, content, and footer. ...

FlexNav excluding

I have implemented FlexNav for my website navigation. The demo I used sets the width of top-level menu items to 20%, which works well with five menu items. .flexnav li { . . . width: 20%; } However, in my menu, the text lengths of the top ...

Elements of <nav> within a <footer> section

I've recently started using HTML5 display elements like header, footer, and nav. While reading about the nav element in particular, I found this interesting information in the HTML5 spec: The nav element is primarily intended for major navigation b ...

Out of the blue div, could you lend your assistance?

I have a code that displays 5 random images with corresponding text. My challenge is that I want to separate the text into another div so that I can add another function to it, while still keeping the images random with their corresponding text. <scr ...

Dynamic resizing in NextJs does not trigger a re-render

My goal is to dynamically pass the width value to a component's styles. Everything works fine on initial load, but when I resize the window, the component fails to re-render even though the hook is functioning as intended. I came across some informat ...

Illuminate the current page

I have been working on a website with around 20 pages that all have a side navigation bar. To make it easier to manage, I decided to centralize the links in a JavaScript (JS) file and include it on each HTML page. This way, any changes can be made quickly ...

retrieve all the table data cells except for the initial one

I have a specific table structure that I need to work with: <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td&g ...