CSS Issue Involving Bullet Points & Theme's Responsive CSS

[gignnn]

Hello,

I am trying to add content on a specific page of my website that involves bullet points, but due to the responsive code built into the theme, they aren’t displaying properly across all devices. I have attached two screenshots of the issue to this post (one for mobile devices and the other for larger devices), and provided login credentials in a secure note below so you can access this page, which is currently private and available to logged-in members only. The issue inverts depending on whether a user is visiting the site on mobile devices or a wider screen (iPads and PCs). When the text is inverted to the right margin, I would like the bullet points to also invert so that they are flush along the right-hand margin along with the text, and vice versa for mobile device views. Thanks!

[paul.r]

Hi @gignn,

To achieve that, you can add dir="rtl" for the list that you want the bullets to be aligned right.

You can do that by using code editor.

Hope that helps

[gignnn]

Thank you! That worked, but unfortunately, the margins appear to be off rather than flush with the rest of the content in the DIV. Please take a look at the attached screenshot to see what I’m talking about. Can you help me tweak the CSS to correct this issue? Thanks!

[nabeel]

Hi @gignnn,

Thank you for the screenshot, to fix this simply add the following code in the Theme Options > CSS:

ul[dir="rtl"] {
    margin: 0 1.655em 2.15em 0;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!