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.