При создании кругового меню столкнулся с проблемой того что контейнер для меню со свойством position: relative; при уменьшении экрана выходит за границы области для него предназначенной(находится все это в системе сеток bootstrap3).Т.е. существует три колонки, меню расположено по середине и при уменьшении экрана центральный блок с меню просто наезжает на правую колонку. Подскажите пожалуйста, как это предотвратить?
ширина и высота заданы в vmin так как требуется соблюсти пропорции квадрата.
пример кода:codepen.io/Fess/pen/adOgRN
Задание с построением кругового меню, но само задание сделал, просто хотел поэкспериментировать и сделать его адаптивным под размеры экрана, смог сделать все кроме основной области где position:absolute;
Задание вот это https://htmlacademy.ru/courses/71/run/31
Если знаете подскажите пожалуйста
Нужно, чтобы у блока-контейнера соотношение сторон было постоянное 1 к 1, то есть контейнер должен быть квадратом. Если задавать ширину и высоту в процентах, то квадратом он не станет, т.к. разрешени мониторов и дисплеев неквадратное =)
Попробуйте воспользовать единицей измерения vw или vh, чтобы задавать ширину и высоту только относительно ширины или высоты экрана.
Использовал ‘vmin’ так корректней соблюдаются размеры.
Но столкнулся с еще одной проблемой, само меню распологается в центральной колонке (система сеток bootstrap 3 ), но у контейнера сейчас position:relative; и когда происходит уменьшение области просмотра содержимое центральной области(круговое меню) заезжает на колонку распологающуюся справа. Подскажите пожалуйста, как можно прописать что бы избежать этого, дабы содержимое центральной колонки располагалось только в центральной колонке
Имеете в виду что бы исправить искажение точки по середине? Если да спасибо за наблюдение, это да надо исправить, но основная проблема все же в том что когда уменьшается область просмотра, но не доходя до col-xs расстояние отступа между колонками становится разным, а если монитор “квадратный” грубо говоря, то происходит наезд центральной части (дива в котором лежит меню) на правую колонку
Понял теперь
если это вам подходит, можно попробовать ограничить ширину max-width и max-height, больше которой блок расширяться не будет (тоже в относительных единицах измерения).
