search

codyhouse / schedule-template

A simple template that lets you display events on a timeline, as well as organize them in groups (week days, conference rooms etc…)
https://codyhouse.co
185 stars 102 forks source link

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

Open pablosolar opened 4 years ago

pablosolar commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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).