Odd Paragraph Height Issue

  • Resolved Crystal Torres-Martinez

    (@crystaltm)


    1 week ago

    Hi, I’m running into an issue on this page where the paragraph text is overlapping for text under the calculator. The height of that element doesn’t grow to allow the text to wrap so it ends up stacked on top of the previous line. You can view it here:

    https://drive.google.com/file/d/1MctYg_SFxSLibrnFDPdzt-zoJr-q5YO5/view?usp=sharing

    This is solely an issue for Chrome when viewed incognito.

    I moved the calculator lower on the page to test whether my hunch that this was related, and it worked. Any text above the calculator looks right, but all of the <p> below it has a fixed height (not in the CSS).

    When refreshed through a viewport resize, for example, when opening the devtools, the text then wraps correctly, so it’s a weird cache or load issue. The CSS is the same for <p> elements before and after the calculator.

    Could you please look into this to see what we can do to fix it?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author CodePeople2

    (@codepeople2)

    1 week ago

    Hello @crystaltm

    Thank you very much for using our plugin. Actually, the issue is not caused by the form but by the inline styles, specifically the line-height:1.6; CSS rule. Please watch the following video:

    https://cff.dwbooster.com/resources/customer-support/2026/04/30/page.mp4

    Best regards.

    Thread Starter Crystal Torres-Martinez

    (@crystaltm)

    3 days, 7 hours ago

    @codepeople2 I see what you mean, but the same can be said for any CSS class. If you change any of then in the devtools, the paragraph height adjusts to show the text correctly. But adding or removing that same CSS in the Customizer, does nothing.

    It also doesn’t make sense for this to be an issue with the CSS that is the same for the text before the form (where no issues is present) and after the form.

    You can also try re-enabling that line-height, and you will see that the issues doesn’t come back. If that was the cause, you would expect the issue to be present when that line is active and go away when it’s not, and that’s not the case.

    Could you please look into this again?

    I created a staging site for you to review. Is there a good email I can send the WP credentials to?

    https://everydayfamilycooking17249.e.wpstage.net/air-fryer-conversion-chart-calculator/

    blogvault – 8a3fd0c9

    Plugin Author CodePeople2

    (@codepeople2)

    3 days, 7 hours ago

    Hello @crystaltm

    The URL provided is protected. Please try the following: enter the iframe attribute with value 1 in the form shortcode, like ex.

    [CP_CALCULATED_FIELDS id="9" iframe="1"]

    in https://www.everydayfamilycooking.com/air-fryer-conversion-chart-calculator/

    If you are inserting the form by using a page builder like the WordPress blocks editor, Elementor, or Divi, you should simply tick a checkbox in the form insertion module.

    Best regards.

    Thread Starter Crystal Torres-Martinez

    (@crystaltm)

    2 days, 2 hours ago

    Hi @codepeople2 ,

    I appreciate that, but that didn’t work.

    I ended up working with Gemini on this and found that adding the following CSS to an HTML block immediately after the calculator shortcode block fixed the text overlap. 

    <style>
    p { 
    contain: layout;
    margin-bottom: 1.5em;
     }
    </style>
    Plugin Author CodePeople2

    (@codepeople2)

    1 day, 8 hours ago

    Hello @crystaltm

    Thank you very much for sharing your solution—it will certainly help others facing a similar situation.

    Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.