How to widen HTML block?

Using Ghost
1

I used the HTML block option to embed a table into one of my Ghost blog posts.

The table is significantly wider than the block, and it creates horizontal scrolling, which is sub-optimal.

I assume that the width of code blocks is not determined by my theme, as I have tried a number of different themes, and the available widths for blocks are standard. In other words, the width of the HTML block seems like a “built-in” feature of the Ghost infrastructure, although I could be wrong about that.

Does anyone know how I can widen the HTML block?

See the post here. Scroll to the bottom, and you will see the embedded table first, and then a screenshot image file of what the desired output might look like.

EDIT: I am using Taste theme.

2

This is normal theme behavior and believe me, it’s optimal. Without that integrated in the table horizontal scroll, you would have an huge horizontal scroll bar in the browser itself. And it would look ugly on desktop and uglier on mobile. You can try that with a Wordpress instance with a standard theme and no plugins. The table you wanted to put has simply too much columns and that’s how it works with css and html with these kinds of tables.

3

The tip: Add the class “kg-width-full” to enable full width or “kg-width-wide” to enable widescreen.

For example:

Full wide

<div class="kg-width-full">
....your embed code...
</div>

or widen

<div class="kg-width-wide">
....your embed code...
</div>
4

Also, check the HTML code that you pasted. You have embedded a CSS code that affects your added table.