How to Align text at left from div when tags inside div have inline text-align to justify

user_10463680 0
Viewed 159

I want to fix the front view of a website. I am a just a beginner. The issue arising in the long description which having values in p tags.

laptop View:

enter image description here



Mobile View:

enter image description here



Css in Inspect: i have no idea from where Class="MsoNormal" and style come from in BLDes, but i have to fix it.

enter image description here

Code Behind:

<div class="uni-entry-description" style="text-align:left !important">
                                                        <p>
                                                            @Html.Raw(Model.BLDes)
                                                        </p>
                                                    </div>

The value of Model.BLDes is edit my Rich Text Editor. So, it contain some p tag in it. The div inline css is not working in it.
The first p tag in inspect is from code, while other p tags are the value of BLDes.
I used the inline css in div with !important keyword but its not working. I also used media query for mobile view but not working. Thanks for the help in advance.

What I tried so far:

text-align model-view-controller css html javascript
2 Answers

Thanks to everyone. Who read the post and contribute to it.
The problem is solved by the help of Remove a specific inline style with Javascript|jQuery.

I just change the location of script tag from top to bottom of the page.

<script>
    let declaration = document.getElementsByClassName("MsoNormal");
    for (let i = 0; i < declaration.length; i++) {
        declaration[i].style.removeProperty("text-align");
    }    
</script>

If someone explains to me why changing the location of script solve the problem, it's really helpful for me in the future. To avoid such mistake. Thanks in advance

[Edited]
Change the above code so any tag not having MsoNormal class still align to left

let allElementInDiv = document.getElementsByClassName("uni-entry-description");
    for (let i = 0; i < allElementInDiv[0].children.length; i++) {
        allElementInDiv[0].children[i].style.removeProperty("text-align");
    }
user_104636800

You can remove the style="text-align:left" and try this code

<p align="left">
        @html...
</p>
user_65809430
Related