Google Guidlines – Off-Screen Elements – Accordion – Offscreen??

Hey Ismael,

I want to learn a little more about enfolds “aesthetic hidden content” below inactive elements. I need to understand, what you mean. It’s cool, if you can create two screenshots with the difference, that i can understand.
Please tell me more about the difference between

    
left: 0%!important;
and
left: 120%;

in both layouts and aesthetic with screenshots.
I want to understand, what you mean, if you say, it’s for aesthetic. If I use the checkbox in the developer tools and switch between both options, I can’t see any differences. Only the inactive grey field moves to the original position. I must trust you, that this has any effect in layout for this element.
If you say “all websites”: Can we process this in googles example below, where this is used in the same way? And can you show me, how google know it, that Enfolds rule is not determined as the mentioned “don’t Using CSS to position text off-screen” since only mobile first indexing is active?
https://support.google.com/webmasters/

As example: Ranking Benchmarks?

Best Regards,

S

Dear Ismael,

i can only ask again: Where is a content box with
left: 120 %

defined in your examples?

Best

S.

Strange.

I’m asking you what a hidden element off-screen with aesthetics has to offer: No answer.

I’m asking you if you can show me with examples how the effect of positioning something off-screen can be with hidden elements in front-end: No Answer

I ask you if you can clarify how Google sees this. You ask me the question as repeat. You see my answer at the end of this thread, what is the difficulty at this point.

Although Google explicitly says: Please do not place anything off-screen. You know, there’s a lot of controversy is Google reads CSS and JS correctly. Google scans specifically for look for black-hat methods like white-on-white or off-screen elements. Google can exactly decide, what is off-screen. Google Read css and search for triggers.

Why are you playing with fire?

Why can’t you just change it if there is no aesthetic impact at all and you keep coming up with new adventurous stories.

Where are your examples? On rank 100 in Google? Okay, I found something from a bad block forum post from 2010. There is your example.
And to be sure to see good examples that Google thinks are good too, I looked at the results in Google’s top10. Just to make sure that no rotten tomatoes and techniques from rotten forums from 1998 are sold here.
I looked at the top 10 results in Google. Where I know for sure that Google doesn’t penalize here and rewards clean code.

Like W3C, Codepen and the shown FAQ-Accordion in Google Search Result as main point, which give me a good hint: here is nothing hit by violate guidelines and what google dislike.

Nobody uses off-screen stuff on hidden elements from this results. As best working example: google himself with FAQ-Result at Rank 0.
The rule is: content:hidden is ok, but not off-screen. It should at the same place. All 10 prominent examples have the hidden elements at the same place.

And if you are honest to yourself: There is
no aesthetic reason, to align hidden elements off-screen.,
There is no visible effect in frontend.

Or: Show me this. But you can’t

https://www.mediaevent.de/tutorial/css-accordeon.html
https://www.w3schools.com/howto/howto_js_accordion.asp
https://codepen.io/raubaca/pen/PZzpVe
https://www.zella.de/code/accordion-multiple.html
http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/howto/howto_js_accordion.asp.html
https://support.google.com/webmasters/?hl=en#topic=

And if you go even deeper into the Search Console and all the scripts that Enfold delivers It always happens at “fetch as Google” that scripts are not reached. Live Example with a page without wp-rocket:

Page Resources
19/32 could not be loaded

Only if you reduce massively scripts and css with wp-rocket, it works well on other pages with similar plugins and of course: Enfold. So: What do you think is the chance that the problem with active vs hidden is not crawled and processed properly by google?

You can get a first impression by looking at
Google Cache for Enfold. It is not the same as in the live view. Example here: Menu bar. This was the first example with a hit for the menu bar, that is not the same result in google cache vs. live page.
And now we talk about the fact that Google understands all your codes? And left-120% can be not fail interpreted? Silly.

What difficulties Google has to evaluate such elements with js and css correctly, you can see here.

https://www.rebootonline.com/blog/hidden-text-experiment/

So why play with fire? Google’s a crawler. It tries to approach people and reproduce what they might see.

So: in summary: The end user doesn’t see any effects with Left: 120% and you don’t like to fix it. Okay, not my problem. I wanted to help all users get the most out of your pages and improve Enfold.
I’ll just add manual css and that’s it. Just like disable
h1.entry title, 50px padding to 0px, border:none!important while border none is defined in color section, missing social icons in mobile view, rotten overlapping breadcrumps, overlapping logos, logos with no lazy load rule etc. There is an endless filled css box, when an expert use enfold as end user with detail view on all edges.

And to talk with developers about SEO and fine-tuning: It’s like this thread. Senseless and consulting resistant. Like the discussion about Rank Zero Position in Knowledge Graph with good FAQ-Sections, schema-optimized. Which are easy to implement but it seems, it’s an unbreakable iceberg for enfold. Either you have a team that can keep up. Or high-end customer successes are not achievable.

It’s so buggy and so much !important rules must overwrite failed elements and so painful to discuss such senseless elements.
Not much work is put on the finer points of technical SEO. “The main thing”, the site looks good in your eyes on the surface.

If you stop getting better, you stop being good.
Philip Rosenthal