Fix spacing issues, wrong fonts, misaligned cursor, and other theme-related CSS conflicts.

The Cointacted Social Terminal is designed to work with any WordPress theme, including:

• Classic themes
• Block/FSE themes
• Page builders
• Membership/social communities
• Custom templates

However, some themes inject global styling that can distort the terminal’s appearance.

This guide helps you fix:

• extra spacing
• wrong fonts
• broken cursor alignment
• input height problems
• background conflicts
• overflow/scroll issues
• borders/padding injected by theme CSS

---

🔹 1. Input Field Too Tall or Wrong Height #

Some themes apply global form styles like:

input[type=text] {
    height: 40px;
    padding: 12px;
}

This breaks the terminal input alignment.

Fix:
The plugin already resets this automatically using:

--has-height: 0;

But if your theme still overrides it, add:

#cointacted-social-terminal-input {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

---

🔹 2. There Is Extra Space Above or Below the Terminal #

Some themes wrap shortcodes in generic blocks with extra margin:

Examples:

.wp-block-group { margin-bottom: 40px; }
.elementor-widget-container { padding-top: 20px; }
.bb-wrap { margin: 30px 0; }

Fix:

.cointacted-social-terminal {
    margin: 0 !important;
    padding: 0 !important;
}

Or remove spacing from the builder widget/container itself.

---

🔹 3. Cursor Is Misaligned or Moves Incorrectly #

Most common cause:
Theme sets a custom line-height or monospace font override.

Fix:

.cointacted-social-terminal__input,
.cointacted-social-terminal__prompt-label {
    line-height: 1.5 !important;
    font-family: var(--cointacted-social-terminal-font-mono) !important;
}

If cursor flickers or jumps:
A builder may animate inputs (rare), disable animation effects on the shortcode block.

---

🔹 4. Terminal Background Appears Wrong Color #

Some themes force:

div { background: #f5f5f5; }

or apply block editor “background presets”.

Fix:

.cointacted-social-terminal {
    background: radial-gradient(circle at top left, #eff4ff 0, #ffffff 60%) !important;
}

Or use a solid background:

.cointacted-social-terminal {
    background: #ffffff !important;
}

---

🔹 5. Terminal Overflow or Scrollbars Are Weird #

Common causes:

• parent container has overflow:hidden
• builder section uses flex with weird alignment
• theme imposes max-height

Fix:

.cointacted-social-terminal__output {
    overflow: auto !important;
    max-height: inherit !important;
}

If output doesn’t scroll at all:

Check for parent containers with:

overflow: hidden;

Remove or override that.

---

🔹 6. The Font Looks Wrong (Not Monospace) #

This happens if the theme forces:

* { font-family: inherit }

Fix by restoring the terminal’s built-in typography:

.cointacted-social-terminal__output,
.cointacted-social-terminal__output * {
    font-family: var(--cointacted-social-terminal-font-mono) !important;
}

---

🔹 7. Builders Adding Padding/Margins to Widgets #

Page builders often add spacing:

Elementor #

elementor-widget-container

Bricks #

bricks-element

Divi #

et_pb_module

Beaver #

fl-module-content

Fix inside builder:

• Set padding to 0
• Set margin to 0
• Disable theme spacing presets

Or override globally:

.cointacted-social-terminal * {
    margin: 0 !important;
    padding: 0 !important;
}

(only if absolutely needed)

---

🔹 8. Buttons Look Wrong (Theme Overriding Them) #

Some themes override all <button> styles.

Fix:

.cointacted-social-terminal__actions .button {
    padding: 4px 12px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
}

---

🔹 9. Terminal Is Stretched Full Width or Too Narrow #

Use simple CSS:

.cointacted-social-terminal {
    max-width: 600px;
    margin: 0 auto;
}

Or allow 100% width:

.cointacted-social-terminal {
    width: 100%;
}

---

🔹 10. Theme Is Injecting CSS You Cannot Identify #

If you cannot find the source:

1. Right-click the broken element
2. Inspect
3. Switch to “Computed”
4. Look for:

• padding
• margin
• border
• line-height
• font-size
• height

This reveals the exact conflicting property.

Then override it in Customizer → Additional CSS.

If completely stuck:
Switch temporarily to Twenty Twenty-Four theme — compare styling.

---

🎯 Summary #

If terminal styles look wrong:

✔ Reset input height (common cause) #

✔ Remove theme-added padding/margins #

✔ Restore monospace font #

✔ Fix cursor alignment via line-height #

✔ Override background if theme overrides div backgrounds #

✔ Fix overflow in parent containers #

✔ Clean builder/widget spacing #

✔ Inspect computed styles for clues #

With 2–3 small CSS overrides, all theme conflicts are fixable.