Make Cyberchimps Responsive Theme responsive: font size / featured content

Hi,

I have created a child theme from the Responsive Theme (free version) to use on my site vinyalisa.at.

Despite the theme’s name, the responsiveness still has to improved. I was trying to find the answer in the Cyberchimps forum but all I get there are 404s. 🙁

I am quite happy with the look on my desktop, so I do not want to change anything there. However, the issues I am facing on mobile are:

* On the start page (Home), the featured text displays in a really narrow column on the left and the featured image is rather small and sits on the right. Ideally, on mobile I would like to display the content parts below each other in the following order: featured header – featured subheader – featured image (full width) – featured text (full width) – call to action. Is this possible without changing the way things look on desktop and how? I have tried with float:none for the featured content but that only moved the featured image below the call to action on both desktop and mobile without widening the column on mobile.

* In the footer, I would like the font size of the headers to adapat to the column size on mobile. Currently, there are crazy line breaks all over. I would prefer to display each header in one line (again, without changing how things look on desktop). I have tried with vm/vh but this broke the design on desktop (fonts too small).

I am just getting started with CSS so please explain for a beginner to understand 🙂

Thank you very much in advance for your help,

Sabrina