Доброго времени суток!
История из жизни разбора чужого кода.
Надеюсь что Вы попали на данную статью чисто из интереса. Так как если у Вас сложности с каким то блоком сайта - то несколько часов своей жизни уже потратили, как пить дать!
Погнали. Суть статьи в том, что когда мы читаем чужой код находим кучу ошибок. И чаще всего это происходит из-за внесения правок, изменения структуры или внешнего вида.
В моем случае все было не просто.
Получил я задачу растянуть footer на сайте по всей ширине экрана.
Казалось бы - легко!
НО
Сайт на OpenCart3.0 и файлов с кодом сотни.
Я быстро нашел через "Панель разработчика" нужный мне класс внутри футера - определил через Total Comander где копать (благо проект есть локально) и полез менять код в ISP Panel.
Какого же было мое удивление, что команды CSS:
max-width: 100%;
width: 100%; или 2000px; не давали результата.
После я пробовал играть с размером контейнера внутри footer и применять различные padding и margin.
Тоже безрезультатно!
Через час мучений и разбора интернета по свойствам CSS с элементами и похожим проблемам, я полез в код HTML.
НО
Так как это OpenCart все файлы в основном с расширением twig (бывш. tpi) я уж молчу что функционал на php и если не шаришь, то сначала голова кругом от всех этих объявлений и вызовов функций, да методов.
В HTML а точнее в файле contacts.twig код был кривой до жути. В прямом смысле этого слова. Никакого порядка открывающих тегов и закрывающих, с намеком на вложенность и рядом не было.
Я даже и не думал что разработчик, написавший данный код может допустить какие-то ошибки. Так как сайт уже много лет работал, приносил прибыль и всех более менее устраивал.
В итоге после еще 30 минут поиска решений. Использования валидаторов, проверок кода на ошибки я решил передвинуть footer прям в "панели разработчика" в самый низ.
И какого же было мое удивление что он сразу растягивается по ширине как мне нужно!
И конечно, после данной находки я иду в код и добавляю еще один закрывающий </div> перед <footer> и вуаля! Все стало работать ровно!
Какой же вывод:
1. Не доверяйте коду и людям его разрабатывающем, всегда пробуйте продебажить хоть как-то. Ищите решение проблемы поэтапно.
2. Учитесь пользоваться "Панелью разработчика" - это действительно супер насыщенная и удобная штука. Для поиска решений!
3. Оказывается браузер не найдя закрывающий тег дива, обернул все что было в общий container. Именно поэтому изменения в CSS не давали нужных результатов.