usability issue with font sizes

Hey gatehealing,

Thank you for the inquiry.

1) Summary: Legible Font Sizes (THREE issues)

1) Font Size 11px – It seems to be referring to the base or default font size for all text elements. This css rule is overridden by the custom font sizes that can be set in the Enfold > General Styling > Typography panel.

2-3) Font Size 11px .pagination span, .pagination a – You can adjust the size of the pagination with this css code.

#top .pagination .current, #top .pagination a, #top .fullsize .template-blog .pagination a {
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 100px;
    margin-right: 5px;
    font-size: 1em;
}

#top .pagination .pagination-meta {
    float: right;
    line-height: 35px;
    font-size: 1em;
}

2) Summary: Tap Target Sizing (FIVE issues)

1) Element Label Search – Looks like you’ve disabled the search bar in the header but if you want to adjust the size of the label, try to use this css code.

#top .av_minimal_header #s {
    font-size: 1.2em;
}

———————————————–
2-5) Element Label span.blog-categories > a – The other 4 refers to the post categories, which can be adjusted using this css code.

.html_elegant-blog #top .post-entry .minor-meta {
    font-size: 1em;
}

Best regards,
Ismael

Hi,

Thank you for the update.

You can enable the search icon back in Enfold > Main Menu > General panel, toggle the Append Search Icon To Main Menu option. You can also add the search field in the header as widget. Please check the documentation below for more info.

// https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

Best regards,
Ismael

Hi,

Thank you for the clarification.

The logo is pushed a bit to the right because of this css code.

.responsive #top .logo .subtext {
    transform: translate(2%,-50%)!important;
    width: 235px!important;
}

Adjusting the transform/translate value should move the logo farther to the left.

.responsive #top .logo .subtext {
    transform: translate(-15%,-50%)!important;
    width: 235px!important;
}

And to adjust the size of the magnifying glass, please add this css code.

.responsive #top #wrap_all .menu-item-search-dropdown>a {
font-size: 42px;
}

Best regards,
Ismael

Hi,

No problem. Glad we could be of help. Please do not hesitate to open another thread when you have more questions about the theme.

Have a nice day.

Best regards,
Ismael