Text between <code> goes on another row

Justoverclock

I think I have issue with my custom css code but I need help to find the problem

on Flarum.it if i put a word inside code tag, this automatically goes into a new row.

how can i make my code to appear like this <—

davwheat

Justoverclock

You can set display: inline-block on your <code> element.

Justoverclock

Thanks I will try this asap !!!

Justoverclock

definitely not work

Ralkage

Can you post your custom CSS/LESS code here? Use the triple tick (```) markdown and give it the ol' CSS language label so it's easily readable please 🙏

Edit: from your screenshot, it looks like it's on the same line as your sentence, you just need to adjust your styling a bit 😉

Justoverclock

idk how to give css label

.Post-body code {
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: inline-block;
    word-wrap: break-word;
    border-radius: 10px;
}

.Post-body pre code {
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: inline-block;
    word-wrap: break-word;
    border-radius: 10px;
}

Justoverclock

done, its overflow:auto 🙂

Ralkage

Justoverclock may I suggest dropping margin-bottom: 1.6em; as well as padding: 1em 1.5em;? it'll look a lot cleaner that way 🙂

Justoverclock

Ralkage droppet too 🙂, but i think code text is not colored inside...mmmhhh

Justoverclock

i have some problem with a composer with rich text editor (@askvortsov maybe u know how to fix this):

example:

AnteikuDevs

Justoverclock how to make the left side green?

Justoverclock

AnteikuDevs is all css....simply inspect your codeblocks and change css according to your needs

luceos

AnteikuDevs

$some = 'test';

Change with:

code.hljs {
    border-left: 1px solid green;
}

AnteikuDevs

luceos What path is this code in?

anonymousDev

luceos code.hljs {
border-left: 1px solid green;
}

whats hljs? Some custom parameter?

Justoverclock

AnteikuDevs put the code into your custom css settings

AnteikuDevs

Justoverclock in the vendor folder?

Justoverclock

AnteikuDevs no into your admin panel/custom css