Make Table Width Smaller

Hi Fran,

thanks for your post, and sorry for the trouble!

You are right, your theme also contains some CSS code that influences the table, and especially the width. To change that, we’ll just have to raise the priority of your CSS, and actually just for one line. Please replace

.tablepress-id-1 {
	width: auto;
}

with

#wrapper .tablepress-id-1 {
	width: auto;
}

That should make your table more narrow, and the table will then obey the individual column widths that you are setting.

And don’t worry too much about the color of the strings, like “auto” or “center”. This is supposed to be some sort of help on the syntax of the code, but unfortunately, the external JavaScript library that is used for this does not know all possible strings in all contexts of where they can be used. So, basically, you can ignore the coloring of these words. They do not influence the code in any way.
And I’ve also noticed that glitched with the lower lines of text in that field not being visible until clicking into the textfield. This is also related to that external JS library, and I hope that it will be fixed in one of the next releases of that library.

Regards,
Tobias

Hi Fran,

great to hear that this worked! 🙂

Well, technically it’s not the #wrapper that was missing. It just comes in handy when we want to give our CSS precedence over the theme CSS.

To find this, I use the Developer Tools in Google Chrome. With that, I saw that the theme CSS has the priority. Usually, it is then enough to just use the same CSS selector as the theme, but with our desired values. As the CSS selector here is rather complex, I decided to use a simpler one, and (again with the Developer Tools) I found that the #wrapper will work nicely, as it is a CSS element that is part of every page of your site, and that has a higher priority.

A similar method would have been to use the !important keyword, as in

.tablepress-id-1 {
	width: auto !important;
}

That would also have given priority to our CSS command, over that of theme.

And thanks for wanting to donate, I really appreciate it!

Best wishes,
Tobias

Hi,

thanks for your post, and sorry for the trouble.

There’s a small typo in your CSS. Also, you should add the table ID to the CSS selector, so that it only affects one table at a time.
Please change this

.tablepress-id-1 {
	width: auto !important;
}

.tablepress .column-1 {
	width: 100px;
}

.tablepress .column-2 {
	width: 100px;
}

.tablepress .column-3 {
	width: 100x;
}

.tablepress .column-4 {
	width: 100x;
}

to

.tablepress-id-1 {
	width: auto !important;
	margin: 0 auto 1em;
}
.tablepress-id-1 .column-1,
.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4 {
	width: 100px;
}

Regards,
Tobias

Hi,

from what I can see, that’s simply an embedded Google Calendar, from http://calendar.google.com .

Regards,
Tobias

Hi,

good to hear that this helped!

Regards,
Tobias

Hi Mike,

thanks for your post.
I’m a little bit confused though. What do you want me to take a look at? Did you maybe want to post a link?

Regards,
Tobias