How to make Math Latex responsive?

Question

This is a link to the page of my website. This is another link .

I'm using Bootstrap and every content is responsive except the equations in the first link and Matrix multiplication example in the second link that you see in the end. if you resize the browser or see this through phone, you'll see the Latex text crossing the container. I've tried almost everything and not able to fix this. Any ideas?

Answer 1

<span class="mo" id="MathJax-Span-114" style="font-family: MathJax_Main; padding-left: 0.278em;">=</span>
<div class="super-br"><br></div>

You might Want to consider a media Query at the point where you matrix need to be broken. the whole <h2> where your matrix is in is Inline and has a fixed font size so beyond a point the responsiveness is lost

your page is fine until 410px width screen size and if you add a media query to remove the break

@media (min-width: 410px) {
    .super-br {
        display:none;
    }
}

this will remove the super-br Class at 410 Px screen width. if you play around with the media query's a little more you can archive the responsiveness you require

EDIT: forgot to mention : all your matrix elements which are covered by <h2></h2> breaks at some point .. so use super-br at points which you require the added responsiveness