Думаю что лучше воспользоваться плагином craft(он как для scetch так и для photoshop)будешь делать макеты и сохранять в psd.Я вот вообще делаю макет в photoshop и норм
@media(min-width: 768px) у тебя минимальная ширина 768px под нее у тебя задана ширина элемента в %(т.е твоего слайдера),а когда ты делаешь ширину меньше,то там уже уже media не работает(т.к. работает оно при минимальной ширине 768px)и у тебя происходит выпадение элемента из - за того что он больше чем размер (ширина) твоего окна.Поэтому тебе надо найти строки где у тебя прописаны media и создать новый медиазапрос под 480px и 320px.Ты можешь сделать так прописать первый от твоего 768 до 480 media only screen and (min-device-width : 480px) and (max-device-width : 768px)или @media(min-width : 480px) and (max-width : 768px) и под него прописать css тех селекторов,которые криво отображаются и тоже самое сделать от 480 до 320 @media(min-width : 320px) and (max-width : 480px)и под него прописать css тех селекторов,которые криво отображаются.Ну или пойти по кривому пути не полного решения всей проблемы,но по крайней мере поймешь о чем я говорю,просто возьми и найди строку в css @media(min-width: 768px) и поменяй 768 на 320 --->@media(min-width: 320px) и увидешь,что слайдер будет на месте и он будет норм отображаться,а шрифты перепрыгнут,так как не будут помещаться в блоках,поэтому то и нужно прописать в тех запросах о которых я сказал ранее им размеры меньше,ну кароч адаптировать с помощью css под эти размеры все что порассыпалось.