X-Axis of Site is Messed Up Because it is in Hebrew

Question

One of my client's sites are in Hebrew which is a right-to-left language.

I'm using the MH Newsdesk Lite theme found on wordpress.org . The theme is using a core wordpress generated class .screen-reader-text{} to display the search form with get_search_form().

The issue is there's text, specifically "חפס", overflowing off the page on the left. I believe this is due to the fact that it's being displayed in rtl language. I want to make it so the homepage (And possibly some of the other pages and posts, too), never scroll to the x-axis. What is the best practice for theme developers and users of these theme to use .screen-reader-text{} while maintaining accessibility and not messing up the display (like the page scrolling horizontally in my case)?

Here are some links I've found that are relevant: https://make.wordpress.org/accessibility/tag/screen-reader/ https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/

Answer 1

It is due to css:

Check this(Line # 314 style.css):

.search-form .screen-reader-text {
    left: -9999px;
    overflow: hidden;
    position: absolute;
}

Remove the left margin then it works fine. It is on sidebar search form. Sorry for English.

Thanks

Answer 2

Context: accessibility guidance says forms should have labels. The theme designer obviously decided they didn't want the label there but used that CSS trick to move it without (completely) disobeying the guidance.

However, that code only hides the search form label off the left of a page in English (or other Left to Right language). Since Hebrew is Right to Left the text is appearing and making the page really wide.

The quick fix is to hide it to the right instead of the left. @Vee's answer brings the text label back next to the form, if you want it there.

You may be being downvoted as someone thinks you're asking the wrong question or you haven't researched it properly, or something else.

Answer 3

@Vee's method will work, but if you want to keep it hidden from display use this method :

.search-form .screen-reader-text {
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;     
}

It looks like you have a jetpack custom css plugin installed so just add this there, then you don't have to mess with the parent theme.