search

EnlighterJS / Plugin.WordPress

:package: Official WordPress Plugin of EnlighterJS
http://wordpress.org/plugins/enlighter/
GNU General Public License v2.0
115 stars 17 forks source link

Lines are to high #339

Closed SKB-CGN closed 1 year ago

SKB-CGN commented 2 years ago

Describe the bug Lines are to high with Colibri Theme

WordPress Editing Mode Which WordPress editing mode you're using ?

Frontend or Backend Issue

Does the issues occurs on your frontend or on the backend (WordPress admin area) Frontend

To Reproduce ?

Expected behavior Normal line numbers

Screenshots 2021-10-13 16_34_42-iRobot Steuerung in ioBroker - Kreyenborg koeln

AndiDittrich commented 2 years ago

some css rules of your theme are overriding the EnlighterJS styles - use the element inspector of chrome/firefox to identify the weak rulesets and remove them from your theme

SKB-CGN commented 2 years ago

Now the lines are a little bit smaller, but till very big. 2021-10-13 16_40_13-iRobot Steuerung in ioBroker - Kreyenborg koeln

This is the only thing i found. The high is reduced from 63px to 43px.

AndiDittrich commented 2 years ago

take a look into all elements within enlighter-default

SKB-CGN commented 2 years ago

Where i am able to do that and perhaps "how"?

AndiDittrich commented 2 years ago

within element inspector, check each element within the .enlighter-default wrapper

SKB-CGN commented 2 years ago

Only that one is using the class 2021-10-13 16_50_35-iRobot Steuerung in ioBroker - Kreyenborg koeln

AndiDittrich commented 2 years ago

shure, expand the element and inspect all child elements

SKB-CGN commented 2 years ago

There are no other classes used. 2021-10-13 16_57_13-iRobot Steuerung in ioBroker - Kreyenborg koeln

AndiDittrich commented 2 years ago

the elements are matched by other selectors, they didn't require a own "class" attribute. by clicking on these element you will see that there a a lot of styles added...

SKB-CGN commented 2 years ago

Sure, i inspected them. 2021-10-13 16_59_38-Inbox - stephan kreyenborg@intl att com - Outlook

If i deactivate this one marked in red, the line is "almost" ok. 2021-10-13 16_59_55-iRobot Steuerung in ioBroker - Kreyenborg koeln

AndiDittrich commented 2 years ago

please provide a link to your page and i'll take a short look into it

SKB-CGN commented 2 years ago

One second. As i am testing the Plugin for further use - it is not fully implemented. I will provide you one.

SKB-CGN commented 2 years ago

Have a look here: https://www.kreyenborg.koeln/test-enlighter/

AndiDittrich commented 2 years ago

the Enlighter plugin is not working (other issue) because your using some kind of "optimization" plugin which adds defer to the script tag. see https://github.com/EnlighterJS/documentation/blob/master/wordpress/FAQ.md#javascript-error-enlighterjs-resources-not-loaded-yet for details.

it's also possible to enable the "single file mode" see Enlighter -> options -> resources -> Initialization

SKB-CGN commented 2 years ago

I added the Plugin to exclusion. In Edge its displaying nearly ok - but Firefox still has the high lines. Would you please have a look again?

AndiDittrich commented 2 years ago

it's an issue with your theme (the css rule display:table for all pseudo elements looks very weak...) :

Screenshot_2021-10-13_17-58-57

SKB-CGN commented 2 years ago

Thanks for having a look again. I will check with the theme.

SKB-CGN commented 2 years ago

Thanks for pointing me to the right level .... I never looked into pseudo-elements :D If you want, you can test the page again. It should look like it should before, right? ;)

SKB-CGN commented 2 years ago

A small additional question here. If i go to the page via my mobile phone in horizontal-mode, the code is not in a scroll-able area. Its not scroll-able right nor left.

If i switch my phone to landscape, the code even wraps inside the area.

Is this related to the theme or to the Plugin?