MinervaNeue seems to be incompatible with the MediaWiki CSS found in common.css, as it only works properly

My website is an RTL (right-to-left, Hebrew) MediaWiki 1.32.0 site with Vector as the desktop theme and MinervaNeue as the mobile theme.

I have included the following code in common.css to prevent <pre> LTR (left-to-right) content from aligning to the right edge of the screen on this RTL site. This class has been applied to almost all <pre> tags on the website:

.preLTR {
    direction: ltr;
}

The issue I'm facing is that while <pre> content in the Vector theme aligns to the left, it doesn't do so in the MinervaNeue theme even though it seems to be accepted in the DOM[1]:

  • Even adding !important, saving, and clearing cache doesn't resolve the problem.

What could possibly be causing this inconsistency?

Related discussion on the MediaWiki support desk

htmlcsscontent-management-systemglobalmediawiki

Answer №1

Be sure to include the identical CSS code on the page Mediawiki:mobile.css. This particular page is designated for applying styles to mobile skins.

Once you've saved it and cleared the cache, you'll notice that the alignment remains consistent across both desktop and mobile platforms.

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

A guide on effectively inspecting the value in each cell of an HTML table across all rows and

I need to incorporate a validation check into my script. The requirement is for the user to input a unique string that will be inserted into an HTML table. Upon submitting the input, the script should compare it with the existing values in the table cell ...

htmljquery

What is the best way to include a tr within a td element in a Bootstrap 4 table?

I'm looking to insert two rows inside a td similar to the picture below, but so far I haven't been able to find a solution. ...

htmlbootstrap-4

Is it time to terminate the XMLHttpRequest?

Greetings! I am managing a website that features numerous 'tooltips'. These tooltips are activated when hovering over specific text. The tooltip, displayed as a div block, appears above all other site content and disappears once the cursor moves ...

javascriptphphtmlxml

Send the user to the login page once their email has been verified

On my website, I have a process where users need to verify their email by clicking on a link sent through emails. When the user clicks on this verification link, I want them to be redirected to a page thanking them for confirming their account and then a ...

phpjavascripthtml

Tips for adding a border to an element when hovered over

I am looking to achieve a hover effect that displays a border around an element without actually adding the border to the element itself, as shown in this image: https://i.sstatic.net/iFpCA.png The challenge I'm facing is that I want to allow users ...

javascripthtmlcss

Include a scroll bar for menu items that contain submenus, while ensuring that the submenu items remain visible

Looking for a way to add a scrollbar to the courses menu list due to its excessive length (refer to the image below). The fixed top navbar prevents scrolling, making it necessary to implement a scrollbar within the menu itself. After applying the followin ...

jqueryhtmlcssmoodle

Unable to scroll content above the header/banner

Hey there, I'm looking for some assistance to achieve a similar effect to the one on this page: https://jsfiddle.net/WsXP6/126/ However, my goal is to have the top section be a solid color instead of an image. I've been struggling to make it wo ...

htmlcss

What are the steps to clear a client's local cache after updating my website?

Is there a simple way to clear the cache of all players who have previously played my game? The game stats are stored in local storage, and some players experienced bugs when the stats were incorrect. This outdated data is now affecting the updated stats ...

javascripthtmlcss

What is the best way to give precedence to non-auto capitalization in input fields on the Input Component from Material UI, especially when using iPads?

The issue I'm encountering is specific to Material UI and IPad, requiring a change in the component used from MUI. Currently, I am utilizing the Input component from Material UI. Upon clicking on the input, the IPad keyboard opens and automatically ...

javascripthtmlreactjsipadmaterial-ui

"Encountering a Javascript issue while trying to apply a CSS class to a

Encountering issues in Safari desktop / mobile and Internet Explorer. The error message states: In Safari: TypeError: Attempted to assign to readonly property. IE Edge: Assignment to read-only properties is not allowed in strict mode The problem arises ...

javascripthtmlvue.js

Ways to ensure next/image takes up all available grid space

Is there a way to make the next/image element span from grid 1 through 8? It seems to work fine with the imgtag but not with next/image. .project { display: grid; margin-bottom: 4rem; grid-template-columns: repeat(12, 1fr); align-items: center; } ...

cssreactjsnext.jsnextjs-image

What sets apart element.class from element .class in CSS?

I've been puzzled trying to figure out why my CSS was not applying when I had mydiv .myclass { font-size: 24px !important; } But then I randomly decided to try mydiv.myclass { font-size: 24px !important; } and surprisingly it worked perfectly. Wh ...

htmlcss

problems with an extra administrator account access

Is it possible to have a single login form that can cater to both users and admins? I currently have a user login system in place but would like to add an admin login as well. How can I implement this without creating separate logins? if(isset($_POST[&ap ...

phphtml

clear background with logo embossed

I have encountered an issue while trying to place my logo on a black background with transparency. Instead of the background being transparent, now my logo is also becoming transparent which was not my intention. Does anyone have any suggestions or ideas ...

htmlcss

Verifying the number of div elements within an if condition

I've been attempting to determine the number of div elements in my DOM. However, when I try to assign this count to a variable, it displays as undefined in the console. Strangely, when I utilize an alert, it correctly shows the value as "8". My goal ...

jqueryhtml

Creating an interactive slideshow using jQuery and styling it with CSS

Upon downloading the script for a slider show, I encountered no issues. However, after implementing the slideshow, I faced problems with SEO optimization in HTML5. The code included <div u=""> or <img u="">, which resulted in an error message s ...

jquerycsshtmlseoslider

Adapting Vue.js directive based on viewport size - a guide

Having an element with the v-rellax directive, I'm utilizing it for prallax scrolling in this particular div: <div id="image" v-rellax="{ speed: -5 }"></div> Currently, there's a need to adjust the speed property ...

javascripthtmlcsslaravelvue.js

Having trouble sending messages on the server?

Programmer Seeking Help with Adding Data on the Server using JavaScript Stack I am encountering an issue with my javascript code as I am attempting to use the post method to add data on the server-side, but it seems to not be posting successfully. Can ...

javascripthtmlcssnode.jsexpress

Access the HTML file through the Heroku Bash terminal

After deploying my Flask python application on Heroku, I encountered an issue with one line of my python code where I need to open an HTML file for some javascript to execute. While it works fine locally on my Mac, Heroku seems to have trouble recognizing ...

pythonhtmlbashherokuheroku-cli

The PHP code for displaying a button with an onclick event may experience functionality issues

I've attempted to display the button using echo, but for some reason the link isn't functioning properly. I believe there may be an issue with the href link, could you please assist? echo "<input class='button_normal' type='but ...

phphtml