[Resolved] How to Make Blog Post Mobile responsive

[arrunadayy]

Hello,

I am facing problem with making Blog post content mobile responsive. Please check http://shalinikoul.com/to-my-conscience/ on mobile. It shows correctly till tab but in mobile view content of the post does not show correctly.

Everything other than that shows correctly in mobile view.

Arrunadayy

[Leo]

Hi there,

I believe the <pre> tag is causing the trouble.

Text in a <pre> element is displayed in a fixed-width font and it preserves both spaces and line breaks:
https://www.w3schools.com/tags/tag_pre.asp

I think a workaround would be to add the content twice, one displays on desktop only with pre tag and one displays on mobile only without the pre tag. So something like this:

<div class="hide-on-mobile">
    <pre>
        content here
    </pre>
</div>
<div class="hide-on-desktop hide-on-tablet">
    content here
</div>

Let me know if this works.

[arrunadayy]

Thanks Leo for your help.

The work around worked atleast content is being seen now.

[Author]

Posts