Mobile responsiveness

[Petrosdevri]

I would like to ask how to configure the template so that it can adjust within mobile devices. While it generally fits well regarding elements, some texts appear in a wrong position. Here is an example:

const fontSizes = {
        title: '1.25rem',
        cardTitle: '1.25rem',
        cardSubtitle: '1rem',
        cardText: '0.95rem',
}

const items = [{
        title: 'TEXT_HERE',
        cardTitle: 'TEXT_HERE',
        cardSubtitle: 'TEXT_HERE',
        cardDetailedText: 'TEXT_HERE',
}, {
        title: '2022-present',
        cardTitle: 'TEXT_HERE',
        cardSubtitle: 'TEXT_HERE',
        cardDetailedText: 'TEXT_HERE',
}];

return (
  <Chrono items={items} mode='VERTICAL_ALTERNATING' hideControls fontSizes={fontSizes} theme={theme} /> 
);

In my case, cardSubtitle is featured above cardDetailedText. Any help would be appreciated.