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.

  • Rupok

    Hi Omar

    I hope you had a wonderful day.

    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.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Omar

    I hope you had a wonderful day.

    # You can fix the table design breaking issue with the following custom CSS Code:

    .appointments-list table th {
        padding: 0 !important;
    }
    .appointments-list table td {
        padding: 0 !important;
    }

    # To change the color of the title, you can use the following custom CSS Code:

    .appointments-wrapper > h3 {
      color: #ff0000;
    }

    Please change color code from #ff0000 to any color code you want.

    To use custom CSS Code in Divi Theme, you can check instructions here: https://www.wpthemefaqs.com/adding-css-to-the-divi-theme/

    Have a nice day. Cheers!
    Rupok

  • Omar

    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 {" ?

    I'm not really a coder, so I don't know.

  • Milan

    Hello @Omar,

    We are glad that it helped you. :slight_smile:

    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.

    You can know more about how to use chrome developer tools here,
    https://developer.chrome.com/devtools

    And if you are inspecting using firefox then here is docs which can help you to know better about its provided developer tools.
    https://developer.mozilla.org/en/docs/Tool

    If you are using different browsers than firefox or chrome, just google with search term "Browser name developer tools". Actually I did the same for finding firefox and chrome developer tools docs.

    I hope this helps you.

    Cheers,
    Milan Savaliya.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.