Customize the table displayed by the shortcode [app_monthly_schedule]

1) Okay, so I can display the table fine, and it works well with the big computer and tablet screens. However on smaller screens such as on cellphones, it's a whole different story! I've included a screenshot with what I mean. Is there anyway I could change that?

2) In relation with the first problem, I was initially using the shortcode [app_schedule], however that looked horrendous on cellphones so I had to change it to something smaller, is there anything I could do to fix this as well? That's the second screenshot (it's pretty long down the page)

3) Also, the white text in the screenshot that says, "Our Schedule for January 2016" Is there any way to change its colour? I had to make the background blue just so it could be read.

Comments 5

I just checked both [app_monthly_schedule] and [app_schedule] shortcode on my test site and both are looking just fine in WordPress Default Twenty Sixteen theme with WordPress version 4.4 . Please check the attached screenshots.

But as these are breaking in your site, so your theme must be some CSS code which is overriding the design.

Don't worry. I can give you custom CSS code to make this looking beautiful but for that, I need to have the URL where I can see this issue live. I'm looking forward to have the URLs from you and solve your query as soon as possible.

Perfect thank you! I was trying something like that, I just didn't know the name of this thing: .appointments-list and the !important; parts. If ever I wanted to do something again, how do I find the names of these things? (Like how would I know that if I wanted to change the padding of the table, I'd have to change this: ".appointments-list table th {" ?

The way we usually finds selectors to target elements on page is via developer tools provided by browsers. It is possible that everyone is not using same browser. But you will see nice documentation for development tools provided by browsers on its docs.

In my case I am using chrome developer tools to inspect page, so if I want to know which selector is used to target specific element on page, i first open developer tools windows by selecting it from Tools > More Tools > Developer Tools or simply on windows pc by pressing Ctrl + Shift + I and on mac Cmd + Shift + I keys together.

On developer tool windows as you can see in attached screenshot option for "inspecting element by hovering over page" is provided. Select it and then hover over the page to inspect different elements. You can click on element while inspecting to update "Elements" tab of developer tools to show you what html structure is used for that particular element.

How do you rate me?

Thank you for rating your experience!

We’re thrilled to hear you had a great experience with . Would you like to leave a comment about your experience?
Thanks for voting on your experience with , we’d love to get some feedback please.
Ohh no! We’re really sorry to hear you didn’t have a pleasant experience with , we’re always looking at how we can improve and would appreciate you provide some further feedback here please.
Type your feedback here

it's great that you had a positive one. Based on your experience in this ticket would you please be kind enough to rate us externally on: