В чем проблема то? Ты сам на свой вопрос в вопросе и ответил. Адаптивно сверстать. В стилях начинаешь писать под маштабирование media (max-width: 600px) media (max-width: 800px) и так далее. Изменяя для каждого размеры div который вы превратили в круг.
i++;
{
Не правильная же запись где скобки для выполнения while?