Bottom Navigation Event Detailpage: how to make font smaller

Site URL: https://www.ipfo.ch/seminars-workshops-keynotes/into-the-wild

Hallo
Has anybody an idea, how I can custo>0>0>0m change the navigation at the bottom of an event detailpage. On mobile an on narrow screens, long titles overlap. Collction Block identifier did not get me an ID. Thx for your help. 

Hall

On 8/8/2021 at 9:29 PM, Imager said:

Site URL: https://www.ipfo.ch/seminars-workshops-keynotes/into-the-wild

Hallo
Has anybody an idea, how I can custo>0>0>0m change the navigation at the bottom of an event detailpage. On mobile an on narrow screens, long titles overlap. Collction Block identifier did not get me an ID. Thx for your help. 

Hall

Add this to Design > Custom CSS

/* Pagination title */
@media screen and (max-width:767px) {
.item-pagination[data-collection-type^="events"] h2.item-pagination-title {
    display: none;
}
.item-pagination[data-collection-type^="events"] .item-pagination-prev-next {
    display: block !important;
    color: black;
}
}

Hi Tuan

Thanks a lot. With your code, the title disappeared completely. But I added font-size: x-small and now it works: 

 

/* Pagination title */
@media screen and (max-width:767px) {

.item-pagination[data-collection-type^="events"] h2.item-pagination-title {
    font-size: x-small    
}
.item-pagination[data-collection-type^="events"] .item-pagination-prev-next {
    display: block !important;
    color: black;
}
}