Unexpected padding on front page of logged users when Google Site Kit installed

  • Resolved stephenzhao

    (@stephenzhao)


    3 years, 9 months ago

    When Site Kit by Google plugin installed, there would be unexpected padding to div.mdc-layout-gridon front pages(contact form 7 widget embeded) of logined users(there is a admin bar stay on top of their front pages). And it was caused by CSS variables like --mdc-layout-grid-margin-desktop.

    Check out screenshots on Imgur

    I inspected the css code and found css these variables were all activated.

    :root {
    --mdc-layout-grid-margin-desktop: 24px;
    --mdc-layout-grid-gutter-desktop: 24px;
    --mdc-layout-grid-column-width-desktop: 72px;
    --mdc-layout-grid-margin-tablet: 16px;
    --mdc-layout-grid-gutter-tablet: 16px;
    --mdc-layout-grid-column-width-tablet: 72px;
    --mdc-layout-grid-margin-phone: 16px;
    --mdc-layout-grid-gutter-phone: 16px;
    --mdc-layout-grid-column-width-phone: 72px;
}

    I was frustrated with this for a long time and finally found the reason. How can we fix this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author GusRuss89

    (@gusruss89)

    Hi @stephenzhao

    This is an interesting case of the Material Design for CF7 plugin and Google SiteKit both using the same css variable names. Well done for figuring it out!

    You should be able to fix it by adding this CSS under Appearance > Customize > Material Design Forms > Custom CSS:

    #cf7md-form .mdc-layout-grid {
  padding: 0;
}

    By adding the CSS in the right location, that should work, but if it doesn’t, just add !important.

    Thanks,
    Angus

    Thread Starter stephenzhao

    (@stephenzhao)

    Thanks, I hope you can release a permanent solution in future versions.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Unexpected padding on front page of logged users when Google Site Kit installed’ is closed to new replies.