[Resolved] Fix mobile formatting issue in element

[William]

Hi there,
I have a category appear with some CSS to make to look a button. It looks fine here. However, on mobile here, it double stacks which ruins the look of the button.

Is there a way to fix this?

Kind regards,

Will

[Leo]

Hi there,

Decreasing the font size on the mobile is the only fix I can think of.

[William]

Hmm okay, probably will cause issues with Google text too small to read.

Is there a CSS that could work for buttons that will look good, regardless if its one line or two lines?

[Leo]

I think you can try making the <div id="post_title"> like a button.

[William]

Sorry, I don’t follow what you mean by that?

[Leo]

Not sure if it’s going to work but maybe something like this?

#post_title {
    display: inline-flex;
    background-color: #fff;
    border-radius: 23px;
}

If not then reducing the font size is probably the best solution. Or else you need to play with the CSS some more.

[William]

Yes inline-flex works a treat, thanks!

[Leo]

No problem 🙂

[Author]

Posts