Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] How to Make Blog Post Mobile responsive

Home Forums Support How to Make Blog Post Mobile responsive

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #342062
    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

    GeneratePress 1.3.48
    #342101
    Leo
    Staff
    Customer Support

    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.

    #342311
    arrunadayy

    Thanks Leo for your help.

    The work around worked atleast content is being seen now.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.