Issues with Content Layout on Category Page – Headings, Lists, Tables, and Dividers

Dear @khurram virk,

Please find our guidance below for each of the issues you mentioned:

1. Heading Sizes (H2 & H3):
To differentiate the H2 (blue) and H3 (black) headings, you can apply custom CSS to adjust their font sizes. For example:

.category-content h2 {
    font-size: 28px;
    color: #0073e6; /* Blue */
}

.category-content h3 {
    font-size: 22px;
    color: #000000; /* Black */
}

You may adjust the font sizes and colors as needed to suit your design preferences.

2. Bullet Lists Overflowing:
To ensure that bullet lists stay within the content area, please use the following CSS:

.category-content ul {
    padding-left: 20px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}

This will help maintain proper alignment and prevent overflow.

3. Table Styling & Responsiveness:
To add borders and improve table clarity, you can use:

.category-content table {
    width: 100%;
    border-collapse: collapse;
}

.category-content table, 
.category-content th, 
.category-content td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .category-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

4. Spacing Above Dividers:
To add spacing above and below the dividers, you can apply margin styles:

.category-content hr {
    margin-top: 20px;
    margin-bottom: 20px;
}

Adjust the margin values as needed to achieve the desired spacing.

Please add the above CSS to your theme’s custom CSS section (Appearance > Customize > Additional CSS) or within your child theme’s stylesheet.

Should you need further assistance or clarification, feel free to let us know. We’re here to help.

Best Regards,
8Theme’s Team

Dear @khurram virk,

We’ve updated the custom CSS codes, can you please add them again?

.term-description.et_second-description h2 {
    font-size: 28px;
    color: #0073e6; /* Blue */
}

.term-description.et_second-description h3 {
    font-size: 22px;
    color: #000000; /* Black */
}

.term-description.et_second-description ul {
    padding-left: 20px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}

.term-description.et_second-description table {
    width: 100%;
    border-collapse: collapse;
}

.term-description.et_second-description table,
.term-description.et_second-description th,
.term-description.et_second-description td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.term-description.et_second-description hr {
    margin-top: 20px;
    margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
    .term-description.et_second-description table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

Thank you!