Tables

voltzclarke · Member · Mar 23, 2017 at 6:41 pm
Copy link

Add topic to favorites
Hi all,

I have multiple tables on my site. I have had to make them small so they are not distorted on mobile screen. However, when I view it on my desktop the font is tiny.

Is there a way to keep the size on mobile but change so that is bigger depending on the size of the screen you are using.

Thank you in advance.

The blog I need help with is: (visible only to logged in users)
timethief · Member · Mar 23, 2017 at 6:45 pm
Copy link
Volunteers cannot view private blogs and we do not request access to them. Staff can view private blog content and Staff provide support for CSS editing. Please be patient while waiting.
thesacredpath · Member · Mar 23, 2017 at 9:12 pm
Copy link
Hi there, first off I see you have copied and pasted the entire stylesheet into the Custom CSS window, and that can cause issues. What is better is to write CSS rules to override the existing CSS. Your custom CSS will be loaded after the original, so any overrides or additions you make take precedence.

Remove all that CSS and click save and publish and then add the following which will allow you to change the font size in your tables. What I’ve done is to put all this in a Media Query and limit this to screens/windows 768px and wider so as not to cause problems on smaller screens. I’ve included rules for both th (table headings) and td (table cells). the page I looked at only had text in the heading cells, but just in case you had some text in the standard table cells, I included it.
```
table td {
	font-size: 100%;
}
table th {
	font-size: 150%;
}
```
voltzclarke · Member · Mar 23, 2017 at 10:43 pm
Copy link
Dear SacredPath, you have helped me so much in the paste. I will remove that CSS now. Where have you put that media query?

You seem like the guru on this forum, can you tell me if this set up of a rollover image is possible on my site….
http://voltzclarke.com/artists.html

I am trying to replicate that above site and have come across serious hurdles :(
thesacredpath · Member · Mar 24, 2017 at 5:07 pm
Copy link
Oh that’s embarrassing. I forgot to wrap that code in the query. Use this instead.
```
@media screen and (min-width: 768px) {
table td {
	font-size: 100%;
}
table th {
	font-size: 150%;
}
}
```
Sorry about that.
voltzclarke · Member · Mar 24, 2017 at 8:55 pm
Copy link
Hi sacredpath, don’t worry, thank you! Is it possible to use a similar query to format simple link lists so they too do not get distorted on different screens?

Thank you again!
thesacredpath · Member · Mar 27, 2017 at 5:29 pm
Copy link
It should be. Can you point me to an example so I can take a look? Even if it is a draft post or page, I can see those. Just let me know the name of the post or page.
voltzclarke · Member · Mar 27, 2017 at 7:37 pm
Copy link
Hi,

Here is a link to the example, I’m trying to have it so that it is three columns and the image appearing on the left. It keeps appearing distorted and even worse on phone :(

https://voltzclarke.wordpress.com/artists-home/
thesacredpath · Member · Mar 28, 2017 at 1:45 am
Copy link
I don’t see a way to make this work well on all screens because those three columns are too wide for a mobile. That is amplified due to the 33% right padding you have on the ul element.

My suggestion is to create three divs, one for the left column of info, one for the center and one for the left. With CSS, set the width of those three at 32%. Float the left one to the left and the right one to the right. The center one should show up between the two. Then use a Media Query set for a max-width of 480px where you set the float on all three to left and the widths of them to 100%. I would assign a CSS class to each of the divs, perhaps my-left, my-ctr, and my-right or something like that.

The position: absolute on the images with the ul li elements really isn’t going to work, as you can tell since they all just sort of stack up on one another.

Can you explain a bit more what you are trying to accomplish with this page so I have a clearer understanding of your goals?
voltzclarke · Member · Mar 28, 2017 at 4:10 am
Copy link
Thank you, I will try using three separate classes now. This is the page I am trying to recreate

http://voltzclarke.com/artists.html

I am really finding it very tough to get my entire site appearing correct on mobile so again-thank you for ALL your help.
thesacredpath · Member · Mar 28, 2017 at 4:48 pm
Copy link
You are welcome, and if you run into problems or have questions, just let me know.

No items found.