Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1044421

    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

    #1046335

    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

    #1046359

    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

    #1046483

    Hi Tim,

    Which data table are you referring to?

    Best regards,
    Victoria

    #1046775

    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

    #1047086

    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

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