Content on the page is not fully visible on mobile devices when the Right-to-Left attribute is applied

I recently added multilanguage support to my blog using the RTL attribute. However, I noticed that when users switch to another language, the page content shifts from LTR to RTL.

Everything was working fine until I encountered an issue with a toggle tab on one of the pages in mobile view. The toggle tab and its content do not display in full width, resulting in a poor layout as illustrated below:

View the problem here

Here is how it should look like:

It should be like this

Below is the HTML code for reference:

    <div class="&row d-flex">

        <div class='col pl-md-5 py-md-5 '>

            <div class='row justify-content-start pt-3 pb-3 '>

                <div class='col heading-section ftco-animate '>
                    <h2><?php echo $lang['get-in-touch']; ?></h2>
                    <h2 class='mb-4'></h2>

                    <div class='tabulation-2 mt-4 '>
                        <ul class='nav nav-pills nav-fill d-md-flex d-block'>
                            <li class='nav-item'>
                                <a class='nav-link active py-2' data-toggle='tab'
                                    href='#home4'><?php echo $lang['contact us']; ?></a>
                            </li>
                            <li class='nav-item'>
                                <a class='nav-link py-2 mb-md-0 mb-2' data-toggle='tab'
                                    href='#home2'><?php echo $lang['register']; ?></a>
                            </li>

                        </ul>
                        <div class='tab-content bg-light rounded mt-2'>

                            <div class='tab-pane container p-0 fade' id='home4'>

                                <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='POST'>
                                    <h5 class="card-title"><?php echo $lang['contact us desc']; ?></h5>
                                   
                                    <div class='form-group'>
                                        <input type='text' name='name' class='form-control'
                                            placeholder='<?php echo $lang['name'];?>'>
                                    </div>
                                    <div class='form-group'>
                                        <input type='text' name='email' class='form-control'
                                            placeholder='<?php echo $lang['email'];?>'>
                                    </div>
                                    <div class='form-group'>
                                        <input type='text' name='phone' class='form-control'
                                            placeholder='<?php echo $lang['phone'];?>'>
                                    </div>
                                    <div class='form-group'>
                                        <input type='text' name='subject' class='form-control'
                                            placeholder='<?php echo $lang['title'];?>'>
                                    </div>
                                    <div class='form-group'>
                                        <textarea name='message' id='' cols='30' rows='7' class='form-control'
                                            placeholder='<?php echo $lang['message'];?>'></textarea>
                                    </div>
                                   
                                   
                                        <div class="parentElement">
                                            <input type='submit' name='submit-message'
                                                value='<?php echo $lang['send-m'];?>' class='btn btn-primary btns'>
                                        </div>
                                    </div>

                                </form>
                            </div>
                            <div class='tab-pane container p-0 fade' id='home2'>
                                <p> </p>
                                <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='POST'
                                    class='bg-light p-4 p-md-5 contact-form'>
                                    <h5 class="card-title"><?php echo $lang['register desc']; ?></h5>
                                    <br>
                                    

                                </form>
                            </div>



                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
and here is the CSS code snippet: 
[lang="ar"], [lang="ar"] * {
    direction: rtl;
    text-align: right !important;
    width: 100%;
    font-family: "Changa", sans-serif;
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;

}
.row {
 
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col {
  
    flex-basis: 0;
    -webkit-box-flex: 1;
    flex-grow: 1;
    max-width: 100%;
}
.justify-content-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
}
.pb-3, .py-3 {
    padding-bottom: 1rem !important;
}
.pt-3, .py-3 {
    padding-top: 1rem !important;
}
.ftco-animate {
    opacity: 1;
    visibility: visible;
}
.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

If anyone has a solution or advice, please feel free to share. Your help is much appreciated!

htmlcssbootstrap-4

Answer №1

After reviewing the code you posted, I found no issues with it. A simple solution was to enclose the 

<div class="row d-flex">
within a container and wrap that container with a parent element. This resolved the problem for me, as I couldn't replicate the issue you reported.

If possible, could you provide more details about your CSS? It's possible that there might be an underlying CSS-related cause for the overflow issue.

I tested your code with dir="rtl" applied to the <HTML> tag using RTL Bootstrap from the official website, and encountered no problems.

In addition, applying dir="rtl" to the parent class also yielded positive results for me. Therefore, I believe the overflow issue might be stemming from another section of your code.

If you're still experiencing trouble, I recommend checking out this helpful article from CSS-TRICKS on identifying and rectifying body overflow: Finding/Fixing Unintended Body Overflow

Update

Upon testing your CSS, everything appears to be functioning correctly on my end.

 <!-- Your HTML code block here provided in original text -->

update 2

Following further investigation, it seems that the issue is related to the js-fullheight library causing side scrolling on the images. Consider switching to rtl-bootstrap to resolve margin and padding discrepancies introduced by the dir="rtl.

Once you address these issues, your layout should function properly. Here's the outcome after removing the js-fullheight library and adjusting margin-right (you can utilize bootstrap-rtl for automated adjustments):

https://i.sstatic.net/3N2UG.png

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

How to troubleshoot Bootstrap 5 tabs not hiding flex content after tab change?

Bootstrap 5 tab features a Leaflet map that we intend to occupy all remaining space once selected. We managed to achieve this, but now, when switching tabs, the content area of the first tab does not disappear. We suspect that the issue might be related t ...

csstwitter-bootstrapflexboxleafletbootstrap-5

Steps for importing selenium web elements:

Can all of these ... tags be extracted simultaneously? I aim to retrieve every ... from that particular webpage! Web address: 'https://school.programmers.co.kr/learn/challenges?order=recent&page=1' ...

pythonhtmlselenium-webdriverweb-scrapingelement

Align the middle row using CSS Grids

I am working on creating a grid layout with a size of 4x3, and I would like the second row to be centered as the top row contains four elements. Here is an example of what I am trying to achieve: https://i.sstatic.net/FnN7s.png Check out the demo code b ...

htmlcsscss-grid

upright scrolling mouse slider

In my project, I have implemented a vertical slider with mousewheel control using SwiperJS from https://swiperjs.com/. Although the slider is working perfectly fine, I am looking to fix the positions while scrolling on the page similar to the example pro ...

javascripthtmljquerycss

Could you please ensure that the animation activates upon hovering over the "a" element?

Utilizing bootstrap, I have created the following code. I am looking to add functionality that triggers an animation upon mouseover of an img or a element, and stops the animation upon mouseleave. .progress-bar { animation: pr 2s infinite; } @keyfr ...

javascripthtmlcssbootstrap-4bootstrap-5

What is the method for creating a HTML test report using Python incorporated into my code?

from selenium import webdriver import unittest, time, re import HTMLTestRunner class TestAutomation(unittest.TestCase): def setUp(self): self.errors = [] self.driver = webdriver.Chrome() self.driver.get("http: ...

pythonhtmltestingreport

How can I determine if a user has reached the end of a non-scrollable div by utilizing HostListener and directives within Angular?

In my Angular project, I have designed a main layout using flex display with specific height and overflow settings. The main content div inside this layout has its own unique styling to ensure consistent appearance for any components inserted within it. By ...

htmlangularscrollangular2-directives

Specify padding or margin for all sides in a single line of XML code

Is there a way to set the padding or margin for all four sides in xml with just one line, similar to how we can do it in css? For instance, in css: padding: 1px 2px 3px 4px; Is there an equivalent method in xml for accomplishing this? ...

androidcssxml

Arranging Radio Buttons in a Row and Aligning a Radio Input Group Side by Side using Bootstrap 5

"I'm having a little issue with aligning radio buttons and a radio input group inline on the same line. The input group keeps moving to a new line for some reason. Can anyone help?" Below is the code snippet: <div class="d-flex flex ...

csstwitter-bootstrapbootstrap-5

Building a responsive CardMedia component with React Material UI

I am currently working on creating a gallery using React Material UI (utilizing Card, ...). I am facing some challenges in making the gallery responsive, especially with varying cover sizes: https://i.stack.imgur.com/2n6vf.png Here is the code snippet I ...

cssreactjsflexboxresponsive-designmaterial-ui

Unleashing the power of JavaScript: Sharing arrays and data structures effortlessly

Currently, I am utilizing HTML & JavaScript on the client side and NodeJs for the server side of my project. Incorporated in my form are multiple radio buttons. When the user clicks on the submit button, my intention is to post the results to the server. ...

javascripthtmlnode.js

Arranging Divs Inside a Container Div - Dealing with Overflow

I am in the process of developing a website that includes a unique structure that I have not encountered before. This layout involves joining multiple sections within a wrapper. As this is my first time attempting such a layout, I am encountering some chal ...

csshtml

Issues with SVG Image Mask in Firefox and IE: How to Fix Them

Creating a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) has been easy for browsers like Chrome. However, I've been encountering significant difficulties in getting the mask to display properl ...

csssvgxhtml

Removing all table rows except one in Jquery

I currently have this code in my view: <script> $(document).ready(function() { $("#add_instruction").click(function(){ $("#instructions").append("<tr><td></td><td><input type='text' name='rec ...

javascriptjqueryhtml

SharePoint 2013 on a mobile device does not support scrolling within iframes

Recently, I set up a SharePoint 2013 website with a few iframes. However, when I access the site on my mobile devices (iPad and Android), I am unable to scroll through the entire page by touching within the iframe. I attempted to solve this issue by inclu ...

androidioscsssharepointiframe

How can I select elements in CSS that are "between x and y"?

If I have an HTML table with 20 rows and 3 columns (20x3), I am looking to highlight the rows from 7 to 12 in red. What CSS selector should I use for this specific task? How can I define the range of rows to be styled as "between"? ...

csscss-selectors

What's the best way to vertically center a div with a 100% width and a set padding-bottom on the screen?

I am struggling with positioning the following div on my webpage. .div { width:100%; padding-bottom:20%; background-color:blue; } <div class="div"></div> I have been searching for a solution to vertically center this responsive div on my web ...

javascriptjqueryhtmlcss

Error occurred during download or resource does not meet image format requirements

Encountering an issue when attempting to utilize the icon specified in the Manifest: http://localhost:3000/logo192.png (Download error or invalid image resource) from the console? import React from 'react'; import Logo from '../Images/logo1 ...

javascripthtmlcssreactjsbrowser

Arranging elements on a webpage using CSS grid placements

Currently experimenting with css grid, envisioning a scenario where I have a 2x2 grid layout. When there are 4 child elements present, they would form 2 rows of 2 elements each. My challenge is when dealing with an odd number of children, I aim to avoid al ...

htmlcsscss-grid

Addressing a pagination glitch

I seem to be encountering an issue with pagination while using tabs. Specifically, when I attempt to navigate to the second page of the candidate table within the second tab (candidate), I find myself redirected back to the first page of the contact tabl ...

phphtmlpagination