Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 12, 2018 at 5:34 pm #1044421
    oldnumber12

    I am using Enfold as a child theme and I have created a page that contains tables with product information. However I want the tables to be smaller in size, i.e. decrease the padding, font size and table width.
    For font size I found a solution on this forum, it told me to add the following to the Quick CSS or to the style.css of the Child theme. I have tried both (Quick CSS through and Enfold Child > General styling Style.css through Appearance > Editor) but font size in the tables still remains the same. 

    .avia_pricing_minimal td,
.avia_pricing_minimal th {
    font-size: 10px;
}

    What am I doing wrong?
    And what additional code can I use to change the cell padding and table width?
    And what if I want different properties for the default pricing table and/or tabular data tables?

    Any help would be highly appreciated.

    Tim

    • This topic was modified 5 years, 11 months ago by oldnumber12.
    December 17, 2018 at 3:37 pm #1046335
    Ismael

    Hey Tim,

    Thank you for using Enfold.

    You should turn off the css minification first and then resave the css code.

    #top .pricing-table>li {
    font-size: 10px;
}

/* adjust padding */
.pricing-table>li {
    padding: 4px 6px;
}

    Best regards,
    Ismael

    December 17, 2018 at 4:15 pm #1046359
    oldnumber12

    Hi Ismael,

    Thanks, that worked very well!

    Now if I want to do changes to the data table rather than the pricing-table, what class is it?
    Besides customizing font size and padding, I would like to customize alignment and formatting of the caption of the data table. Can you show me in the right direction?

    Thanks,
    Tim

    December 17, 2018 at 7:49 pm #1046483
    Victoria

    Hi Tim,

    Which data table are you referring to?

    Best regards,
    Victoria

    December 18, 2018 at 10:10 am #1046775
    oldnumber12

    Hi Victoria,

    Please see link in private.
    When creating a table in Avia, I can use choose: Use the table a Pricing Table or Use the table to display tabular data and then Default or Minimal.
    So there are 4 types of tables I can set.

    Ismael helped me with the CSS code for class selector .pricing table. This way I can edit formatting for the Pricing Table (applies to both Default and Minimal).
    I am wondering the following:
    1. What is the class selector when I want to edit formatting for the tabular data default and tabular data, minimal.
    2. What is the class selector if I want to edit the formatting of the Pricing Table Default and Pricing Table Minimal separately.
    3. What CSS code do I need to customize the formatting and alignment of the caption (applies to tabular data tables only as Pricing table doesn’t allow captions by default).

    Thank you!
    Tim

    December 19, 2018 at 3:18 am #1047086
    Ismael

    Hi,

    1-3) You can add a custom css class selector for every element in the builder. And then use it to apply a specific style to an element.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.