VeraVostro

Заранее прошу прощения если этот вопрос уже задавался, но, несмотря на обширное кол-во информации по теме, найти ответа на свой вопрос я не смогла. Суть в следующем: Например, у меня есть два отдельных scss файла - header.scss и footer.scss. Стили футера почти полностью совпадают со стилями хедера, за исключением пары свойств. Но если я прописываю в файле footer.scss @extend header - стили хедера не могут использоваться, т.к. это другой файл. Подскажите, как идеологически вернее делать в данной ситуации? Чтобы новый класс/элемент получал стили существующего класса из другого файла + добавлял свои или менял некоторые стили на свои.

Александр, спасибо! Ссылку поправила, должна работать. А как это реализовать с помощью бутстрап? так же адаптив будет удобнее делать... И верстка с помощью float - вроде бы ж уже не самый современный и удобный вариант?.....

Прошу прощения за мой дилетантский вопрос: Есть макет сайта вот такого плана (картинка во вложении). Все блоки на сайте размещены сеткой, у каждого блока высота равна или x, или 2x, или 3x, ширина тоже - y, или 2y. Пробую сделать на Bootstrap, но, из-за высоты, бутстрап размещает 4-й блок не под 2-м, а под первым, с новой строки. Пример: https://www.codeply.com/go/dwyEv5gprw Подскажите, как решить данный вопрос? Заранее спасибо!

Проблема решена. За пределы контента выпирало .head .left:before

Помогите, пожалуйста, очень нужен взгляд со стороны. Проблема следующая - страница нормально отображается в десктопной версии, при ресайзе окна - тоже все ок. Но в режиме эмуляции моб. устройств ширина экрана больше чем ширина содержимого страницы. При этом проблема только в chrome firefox отображает нормально в любом режиме. Ниже скрин (режим моб. устройств). Код можно посмотреть здесь.

Спасибо, я тоже уже заметила и исправила.... Меня изначально дезинформировало то, что в папке с файлами, скачанной на оф. сайте Masonry нужный для подключения файл с js лежал не в папке js, а рядом с файлом index

При настройке Masonry возникает проблема: ширина блоков регулируется отлично (и в %, и в px), но, когда возникла необходимость сделать один из блоков в 2 раза выше остальных блоков - низкие блоки не занимают пустое место рядом с высоким блоком и получается то что на картинке ниже. Перепробовала, как мне кажется, все: в инициализации указывала ширину колонки в пикселях, в процентах, добавляла в код grid-sizer, убирала grid-sizer........... Методом тыка поняла что если увеличить у меня в css ширину блока .grid-item - то колонок становится две - и в таком случае Masonry красиво все располагает. Код здесь (постаралась оставить только суть).

Правило height: 100%; так не работает. Картинку, выравненную таким образом, будет сложно расположить, как требуется. Тем более, для данной ситуации лучше всего подходит фон (изображение выполняет декоративную функцию). При помощи функции calc() и при известной ширине контейнера можно рассчитать точное значение отступов контейнера, либо требуемую ширину картинки и ::before элемента. Но, не думаю, что использование псевдоэлементов является хорошим решением. Что касается решения вопроса с помощью псевдоэлементов - это первый вариант, который мне на "Тостере" посоветовали. На данный момент - единственный вариант, который справляется со своей задачей. На мой взгляд, вариант с пседоэлементами - немного "костыли", но, повторюсь, единственный и с задачей пока справляется... Я его уже применила, кому интересно - вот тут можно посмотреть файлы (пока без адаптива). С удовольствием выслушаю комментарии/критику/замечания/мнения.... Я теперь с замиранием сердца жду момента когда все это буду переносить на WP и боюсь что там все это поломается.

Alanreid, большое спасибо за такой обстоятельный ответ и помощь )) Прикрепляю полный макет (к сожалению, в прошлый раз при отправке обрезался почему-то). Но там основная проблема, которую я не знаю как решить - это чтобы при уменьшении размера окна на экране оставалась только средняя часть с контентом, а боковые поля (без текста) постепенно уменьшались бы и потом вообще пропадали на небольшом экране.

Предположение что нужно обернуть весь контент во #wrapper? Я считаю что это имеет смысл, чтобы по бокам wrapper остались поля, которые будут уменьшаться, а потом и пропадут в процессе уменьшения экрана. Вы считаете что это не нужно? Как нужно сделать по-вашему? Я с удовольствием узнаю все мнения и предложения по своему вопросу.

Добрый день! Подскажите, как расположить блоки таким образом как на картинке. Текстовые блоки, я думаю, можно разместить с помощью Masonry. И напрашивается обернуть эти блоки во #wrapper, разместить его посредине...... Но как быть с моментом что в таком случае фон блоков выходит за пределы #wrapper? Тут же уже не получится задать background для body и размещать весь контент внутри wrapper?....