WordPress.org

Ready to get started?Download WordPress

Forums

WPtouch Mobile Plugin
[resolved] Blockquote breaks format in WPTouch (10 posts)

  1. Parneix
    Member
    Posted 1 year ago #

    Hi,

    I use a special class of <blockquote> in my theme css style sheet and it breaks in WPTouch. The thing is it also breaks when I don’t use the special class. Simply using the tag <blockquote> makes the text piling on itself and renders it unreadable.

    ANyway to fix that?

    Thanks a lot!

    P.

    http://wordpress.org/extend/plugins/wptouch/

  2. Parneix
    Member
    Posted 1 year ago #

    CORRECTION: the normal <blockquote> DOES NOT breaks the css, only the special class I’m using.

    P.

  3. Parneix
    Member
    Posted 1 year ago #

    I was thinking:

    1) Either to add a rule to WPTouch style so that this custom class is somehow neutralized.

    2) WOuld this be easier to fix in the Pro version.

    Again, thank you.

    P.

  4. Parneix
    Member
    Posted 1 year ago #

    More precisely. The text will pile upo and overlap when window is resized (rendering it unreadable: the more the window is resized, the more it overlaps) only if the post has this structure:

    <blockquote class="custom"><p></p></blockquote>
    <p></p>
    <blockquote><p></p></blockquote>
    <p></p>

    Etc.

    If the post has this structure, there no problem (that is if it doesn’t start with a custom class blockquote):

    <p></p>
    <blockquote><p></p></blockquote>
    <p></p>

    Etc.

    Anyone has any idea? Thanks a lot,

    P.

  5. BraveNewCode Inc.
    Member
    Plugin Author

    Posted 1 year ago #

    Have you added your custom CSS to your mobile theme? The Stats & Custom Code area allows you to add CSS from your desktop theme.

  6. Parneix
    Member
    Posted 1 year ago #

    Hi,

    Thanks for the suggestion, I really appreciate it! I did add a custom code, basically making sure that my custom blockquote is styled exactly as usual blockquotes in the mobile theme.

    But I found out that was not the problem.

    Using the Developer tool in Safari, I’m able to open the page as a mobile user agent (say iPod). I can double-check the result I have on screen with my own iPod.

    When the window is resized (i.e. made smaller), text from a paragraph will be correctly reframed and push downward as the column gets narrower. The strage thing is new paragraphs won’t move accordingly. It’s as if <p> are anchored into the page. Since those won’t move, the text from the paragraph above will be pushed unto the text of the following paragraph, overlapping it and making it unreadable. You’ll find a good example here.

    I would greatly appreciate your insight on this. Meanwhile, I’ll keep looking into it.

    Thanks,

    P.

  7. Parneix
    Member
    Posted 1 year ago #

    Ok! Got it.

    For some reason, in the default css stylesheet of WPTouch there a class defined as follow:

    .big {
    	height: 200px;
    }

    I don’t know to what element it’s supposed to apply, but in my case it applies to blockquote and lock the height of blockquote (apparently). If I kill the fixed value for height, than everything works just fine.

    Do I need to do that directly into WPTouch default theme or can I add a blank .big class to my custom css into the The Stats & Custom Code area?

    Thanks,

    P.

  8. Parneix
    Member
    Posted 1 year ago #

    One more thing,

    I added some custom CSS rules to the Stats & Custom Code area but the code actually shows up at the bottom of each posts on mobile devices.

    I’ve try clicking on the red question mark in this area to get more info, but nothing happens when I click on it.

    Is there special rule I should follow when adding custom CSS in this area? Thanks.

    P.

  9. BraveNewCode Inc.
    Member
    Plugin Author

    Posted 1 year ago #

    Looking at your url, you have paragraphs nested inside blockquotes that have overflow set to "visible". This setup is likely causing the odd floating you're seeing when the large amount of text is viewed on smaller screens.

    The help text in the popup reads, "You may enter a custom css file link easily. Simply add the full link to the css file like this:

    <style type="text/css">#mydiv { color: red; }</style>"

  10. Parneix
    Member
    Posted 1 year ago #

    Hi,

    Thanks for the useful information. I don’t know about the “visible” value, but killing the “.big” class in WPTouch default stylesheet did the trick for me.

    Marking this topic as resolved. Thanks again for your generous help.

    P.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic