Skip to content

Snippets / CSS

CSS

Responsive description container toolbar

J Joshua · 184 views · Updated 1 year ago
This code removes the horizontal scroll from the advanced description toolbar.

 
Apply this css code in the create post block or apply it in the elementor css editor
/* Adjusts the TinyMCE toolbar to be adaptive */
.mce-container.mce-flow-layout-item > div {
display: flex !important;
flex-wrap: wrap !important; /* Allows them to fit on multiple lines */
overflow: visible !important; /* Removes horizontal scroll */
padding-bottom: 10px !important;
-ms-overflow-style: auto;
scrollbar-width: auto;
}

/* Optional: adjust the width of the buttons if you want them to be more compact on mobile */
@media (max-width: 600px) {
.mce-container.mce-flow-layout-item > div button,
.mce-container.mce-flow-layout-item > div .mce-btn {
flex: 0 0 auto;
min-width: 40px;
}
}
CSS · 18 lines

Discussion

Ask a question or share how you used this.

Log in to join the discussion.

No comments yet — be the first.

Voxel Guide assistant
Ask about snippets, addons & how-tos

Hey — how can I help?

I can dig through the library for snippets, addons, and tutorials.

AI can be wrong — double-check anything important.