[Michael]

On my site I am using these plugins
– Cool Timeline Pro
– Tablepress

The width of the timeline and the table is restricted (according to the support from those plugins) by the container in which they sit. This is something which can only be adjusted in the theme of course.

Here are example pages:

TIMELINE https://www.gayundah.info/timeline-gayundah/

You’ll note there is a lot of blank space between the vertical timeline, and the timeline quick-scroll at the RHS of the page. Apparently this is due to the width of the container the timeline sits in being too narrow.

TABLE https://www.gayundah.info/the-men/
You’ll notice the width of the table is restricted to such an extent that the formatting settings in the plugin are not working (columns should adjust to size of longest word in the text, but instead column contents are being forced to wrap. This occurs irrespective of whether the page is zoomed in or out.

You’ll also note that the table width and the timeline width are the same – again pointing to a container size issue with the theme.

I’d appreciate if you could tell me please how to fix this issue as it is severely impacting the look and readability of my site.

Thank you.

[Skandha]

@landyvlad: Hello there,
The width of the table seems to be coming from the plugin itself. Can you try contacting the Table Press plugin regarding this issue?

Kind Regards,
Skandha

[Michael]

What about the timeline? – they tell me it is definitely a container issue.
They included a screenshot but its too low-res so I’m seeking a better one from them.

[Skandha]

@landyvlad: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

table {
    table-layout: unset;
}

Let me know if this works out!
Kind Regards,
Skandha

[Michael]

re the table:
Thanks @Skandha that worked.
https://www.gayundah.info/the-men/

What about the timeline? – they tell me it is definitely a container issue.

[Michael]

As above – also is there a way to make the container bigger universally?

[Skandha]

@landyvlad: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.page-id-443 .content-area {
	width: 100%;
	max-width: unset;
}
.page-id-443 #content .wrapper {
	max-width: unset;
}

Let me know if this works out!
Kind Regards,
Skandha

[Author]

Posts