Юзай styled-components.
Создавай лейаут-компоненты для оборачивания страниц.
Делай универсальные переиспользуемые компоненты для контейнеров.
Пиши в стайлед компонентах медиазапросы для изменения на брекпойнтах.
Верстай mobile-first (по дефолту стиль для мобилы, потом вкладываешь медиазапрос в стиль с описанием вида после брекпойнта (правило min-width...).
Не важно что ты используешь - если умеешь верстать адаптивно, какая разница на чем?
И это - инлайн стили это зло.
вот прямо поиграю в вангу - строчка подключения локальных путей случайно не выглядит так "с:\имя пользователя\рабочий стол" вместо относительного пути?
Уважаемый, несколько вопросов
- а зачем вы ссылку в ссылку вкладываете?
- зачем стили писать через такие неудобные селекторы, когда значительно выгоднее писать классы? Это не только удобнее, моднее и красивше, но даже браузер быстрее будет обрабатывать (хоть сейчас это и не важно по быстродействию)
з.ы. в примере я так и не понял что требуется сделать и какая связь с вашим вопросом.
Вообще говоря практика управления состоянием сложилась такая, что у элемента нужно менять стили комбинацией классов. Случаями необходимости нужно управлять меняя набор классов.
Т.е. заранее определены в стилях несколько классов, в разметке они появляются только при необходимости (менять набор классов с помощью js, или понимать что только в этом конкретном случае нужно на постоянно основе прописывать несколько классов на тег).
an, было бы понятнее, если бы вы приложили эскиз страницы и указали где какая прокрутка нужна. Вполне вероятно можно это решить не прокруткой страницы а прокруткой контейнера контента например. В этом случае можно обойтись версткой на флексах и футер будет всегда внизу на экране (если хотите)
Вообще это очень известная и популярная боль на андроиде. Отказывайтесь от фикса для элементов в футере.
Не видя дизайна не могу ничего посоветовать конкретного, но как вариант - футер прибить к низу используя флекс, скролл контента делать внутри контент-блока через overflow: auto.
Стоит еще стили проверить. Для карусели, если память не изменяет, могли на обертку доп стили докидывать в примере. Это если скрипты правильно работают.
Но в начале - проверить что подключены скрипты от материалайза (и если нужен jquery), ну и проверить что оба способа не применяете для карусели.
sciencefront, понятно что плавающий, но нужно все равно вводить коррекцию и для него. Возможно включить постоянное отображение скролла, к примеру, либо подключить кастомный скролл, который уберет зависимость от системного скроллбара. Суть не меняется. Причина такого поведения - добавление отступа в стиле модал опен
Ну, в песочнице скрипт вообще сломан. В консоли полно ошибок.
Я локально файлы вытягивал, запускал в браузере, добавление атрибута помогало на рабочем скрипте.
Ну, как бы сааамое очевидное - нельзя копипастить элементы с id :)
Соответственно решив эту проблему удастся найти решение и остальному.
Я бы первым делом коробочным кнопкам стили подправил а не монтировал внешние.
Либо циклом всё это добавлял и инициализировал кнопки для каждого слайдера со своими ид
тут как бы да - надо следить за размерами фиксированного элемента, вырванного из потока. Если он всегда определен - прописать отступ при его поведении просто стилями, если он растягивается - писать на js слушатель размеров этого контейнера. одним css этого никогда не добиться
Так не бывает.
Если трудности с пониманием поведения атрибутов - опишите прямо необходимое поведение.
Одновременно два значения у position не работает и если стоит что-то аналогичное absolute - подразумевается что объект вырван из потока и родитель не будет знать о его свойствах. Максимум - у родителя стоит position: relative и вложенный объект сможет позиционироваться относительно родителя.
Никогда не используйте индусский код. Если работодатель к нему будет склонять - или переубедить или менять работодателя. Индусский код в портфолио - можно забыть о хороших контрактах.
Почитайте про БЭМ, кстати говоря.
Так же имейте в виду - макет может оказаться адаптивным. Если дизайнер хорош, он всё это учтет, если нет - вам придется разгребать последствия. Сразу спрашивайте, как себя ведет макет на ключевых размерах окна, в мобильном виде, как элементы начинают менять положение в промежуточных состояниях, при переполнении, при произвольном наполнении блоков (много текста, мало, картинки не по формату и т.п.).
Хорошая верстка должна учитывать все вышеперечисленные моменты, быть семантичной и кроссбраузерной.
Для портфолио стоит постараться, вылизать код (возможно снабдить комментариями по коду), проверить поведение на разных разрешениях, в разных браузерах, убедиться в идентичности и тогда выставлять на обозрение.
Чем больше нюансов учтено - тем дороже будет стоить ваша работа.
OGuman, добавлю немного пояснений - дизайн должен быть универсально применяемым. Он должен давать алгоритм использования стилей в типовых ситуациях. Если это не выполняется, о пиксель перфекте можно забыть и ориентироваться на дизайн более поверхностно.
Либо придется верстать в стиле индусского кода, каждую ссылку заворачивать в уникальный класс и его описывать. И о гибкости и универсальном переиспользовании компонентов забыть.
imko, то что можно знак * опустить вовсе не значит что алгоритм поменяется.
Цитата из документации "Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа." , что идентично записи *:hover. В css таких допущений можно встретить и в других случаях.
imko, думаю его надо рассматривать как фильтр к основному селектору, т.к. это тоже уточнение. *:nth-child так же будет работать. Если я не ошибаюсь, сейчас не помню точно, но скорее всего такие модификаторы будут работать после применения основного селектора.
Создавай лейаут-компоненты для оборачивания страниц.
Делай универсальные переиспользуемые компоненты для контейнеров.
Пиши в стайлед компонентах медиазапросы для изменения на брекпойнтах.
Верстай mobile-first (по дефолту стиль для мобилы, потом вкладываешь медиазапрос в стиль с описанием вида после брекпойнта (правило min-width...).
Не важно что ты используешь - если умеешь верстать адаптивно, какая разница на чем?
И это - инлайн стили это зло.