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

Tobias, that is perfect!
(…and boy are you FAST!)

Is there a simple way that you can tell me how you found the #wrapper id was the culprit? I use several different WooThemes, and I imagine they will all have a similar problem. Your plugin is good and I’m sure I’ll need it again, I’d like to be able to troubleshoot without bothering you again.

I’ll be sure to rate the plugin, and contribute to your efforts via PayPal. ??
Thanks again.
Fran

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 Tobias,

I can not get my 4th column in the good width… Also how do I get the table located in the center beneath the text? With the normal tool of wordpress I can not get this done!

My url is: https://www.reclamelangsderails.nl

Thanks in advance!

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 socialsparkmedia

What plugin are you using for:

Freestyle Schedule and Club Calendar

https://palmettoskateclub.com/calendar/freestyle-schedule/

Hi,

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

Regards,
Tobias

Fantastic!

Hi,

good to hear that this helped!

Regards,
Tobias

Hi Tobias,

Can you take a look at this one and tell me what’s wrong

Your efforts will be remunerated, have spent a lot of time with this already

Thanks

Mike

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