Width and height of pages with contact form is changing

  • Resolved noahstad

    (@noahderlange)


    8 months ago

    When the antispam plugin is activated, the stylesheet of every page and blog post is changed.

    On desktop devices, no change is visible. But on mobile devices, the height and width of the website is changed. The size of the content remains the same, but the navigation-burger is not visible. You have to scroll to the right, to access the menu. When scrolling down, the menu disappears, although it should stay on top. It’s possible to zoom out. Then the menu stays on top and occupies the whole width of the page. But then, the content is way too small.

    This occurs on Firefox, Chrome, Edge and Safari.

    I know, my problem is very specific, I’m not using a default theme and I did a lot of modifications to the appearance of the website. So reproducing this bug is hard.

    I couldn’t figure out, how I could fix this behavior, since no element on the page seems responsible for a width/ height change. Also, I can’t reproduce it myself on my test-system of the page (although it is no exact copy of my main page, which is probably the reason).

    So my question would be, if someone experienced something similar, or if I can deactivate the part of the plugin, which changes the stylesheet/ the content of the website.

    I’m really thankful for this plugin, since my page receives up to five spam-messages per day and this plugin was the only way to regulate it.

    • This topic was modified 8 months ago by noahstad.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Erik

    (@codekraft)

    ciao @noahstad, sorry for replying quickly, but i give a quick check and I think this might be the culprit. You should check the style called ‘sccss’ that is added at the end of the header, specifically a class like this:

    header.wp-block-template-part { position: fixed; width: 100%; top: 0; left: 0; z-index: 99; box-shadow: 0px 0px 12px var(--wp--preset--color--custom-grau); }

    If that is custom css (it looks like), try to use a different method to fit the width of the page (eg. left: 0; right: 0), or try to load the style with an higher priority.

    Thread Starter noahstad

    (@noahderlange)

    Hi Erik, thanks alot, that already helped me much.

    By setting the width to 100% or right: 0 and left: 0 the issue was not solved. Setting it to 100vw however did the trick.

    But doing this i found, the problem of being able to zoom out remains. There is still something generating some blank space at the right of the page. So the problem is, that something is making the pages with forms on it wider, than they should, when the antispam plugin is enabled. So i’m gonna go on and look further.

    Anyway thanks alot already ??

    Plugin Author Erik

    (@codekraft)

    try with something like this:

    /* box sizing is used to "compensate" the space created with the padding */
div#fresh-header {
    box-sizing: border-box;
}

/* the main wrapper is missing the relative position so the header cannot be placed with the fixed position */ 
.wp-site-blocks {
    position: relative;
}

/* now left and right should work! */
header.wp-block-template-part {
    left: 0;
    right: 0;
}
    Thread Starter noahstad

    (@noahderlange)

    I solved the issue.

    After deactivating the custom style section for the contact fields, the issue was solved. And going through it, i finally, finally got what happened.

    The hidden fields with the class fit-the-fullspace were addressed alongside the normal fields. Because, I’m addressing them through the field tag, rather than classes, it adapted the width of the regular field. So even if invisible, the fields took up some vertical space along the normal fields. And for some reason the parent tags and the body did not adapt this whole width, so for the most time I thought, the issue must lie somewhere in the header itself, to take this much width.

    Thanks to your advice to check through my custom styles I could narrow it down and come to the solution ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Width and height of pages with contact form is changing’ is closed to new replies.