можно в разметку вписать две одинаковых ссылки, только та что для мобил чтобы была без атрибута href и через медиаквери выводить в нужном разрешении нужную ссылку
псевдоэлементы before и after для меню с border-radius:50%; нужного размера с position:absolute; и зеленым фоном . не забудьте добавить position:relative; самому меню
браузеры неоднозначно относятся к шрифтам.максимум что можно сделать перебрать все свойства текста , как расстояние между буквами, словами, свойства переноса и прочую мелочь. а так не заморачивайтесь так сильно , почти пиксель перфект в той теме ))) как по мне
можно попробовать бы поставить им еще и один общий класс,а потом перебрать элементы с этим классом через джейквери each(), тогда хватит одного скрипта на всех $(".commonclass").each(function() {
зачем задавать высоту. задавайте максимальную ширину, или ширину в процентах. высота будет рассчитываться автоматически . не бывает чтобы на любом экране отображалось одинаково с таким широким макетом
не указывайте размер в высоту совсем. зачем она? если надо чтобы все блоки был одинаковой высоты то надо задать min-height с высотой самого "высокого" блока. тогда все будут этой высоты , сколько бы текста не было
ели есть выбор между js и css, надо выбирать css , однозначно. а css с созданием полноценной адаптивной верстки справляется на 100%. необходимости в js никакой нет