Not mobile friendly - Content wider than screen in Google Search Console

[pablosolar]

Hello,

Google Search Console noticed me that the component is not mobile friendly because the content is wider than the screen.

Its easy to check using:

https://search.google.com/test/mobile-friendly

And demo url:

https://codyhouse.co/demo/schedule-template/index.html

I think that the origin of the problem is something related with modal and horizontal scroll.

Could you review this? Maybe we can find a solution all together!

Thank you very much!!

[sebastiano-guerriero]

Hi Pablo,

We'll look further into this, although I just checked and on mobile we have horizontal scrolling on purpose (not sure if the Google algorithm is "against" horizontal scrolling). We're not updating the CodyHouse experiments, but a new version of the Schedule Template will be available soon on the new UI Framework.

[pablosolar]

Hello @sebastiano-guerriero,

Thank you for the fast response. Yes, on mobile horizontal scrolling works fine for me. The strange this is that I have another webpage with uses your component with some others and there Google says that it is mobile friendly.

Anyway, I think that is something related with modals, its hidden position or similar. I am going to create a test page to check it deeper to, and will update with anything I see.

Thanks!!

[pablosolar]

Hello @sebastiano-guerriero, I can give you more info!

The problem is not the horizontal scroll, but the number of classes that are defined and what their css.

For example, if I have 7 classes defined for a single day and the values of .cd-schedule__event, .cd-schedule__name and .cd-schedule-modal__name are lowered to:

    .cd-schedule__event {
    width: 35% !important;
    }

    .cd-schedule__name, .cd-schedule-modal__name {
        font-size: 12px;
    }

There it works for Google. If I keep the original css values it stops working.

But, if for example the css values are lowered to these values and instead of 7 classes I define 17, it doesn't work either.

I think it is a problem of the width that both the classes and their styles occupy.

I don't really know how to solve this ... any ideas?

Thank you!!

[sebastiano-guerriero]

It's unlikely that the number of classes affects the Google algorithm. My guess is the alert is caused by the horizontal scrolling. Keep in mind that sometimes these alerts get it wrong (e.g., if you check the option "do the test again", then the error is no longer detected).