Матвей Томилов

i.imgur.com/Alghm42.png

Один для чанков, вызываемых в качестве шаблона, другой для вывода на самой странице.
В вашем случае нужен [[*id]], а не то, что вы там понаписали.

По умолчанию выборка ограничена текущим родителем.

https://docs.modx.pro/components/ms2gallery/snippe...

Т.е. можно не указывать параметр parents.

https://docs.modx.com/extras/revo/gallery
Есть разбиение на галереи. Есть пакетная загрузка перетаскиванием.

> В CSS нигде margin и padding не указан
Отступ создает margin для элемента nav.



Убираем margin, отступ исчезает.

Используйте только сетки от бутстрапа, потом сделаете свой фреймворк!

В больших проектах, такие вопросы не возникают:)

Как вариант есть еще другие.
Foundation, Skeleton и тд.

Если вы хотите быстро верстать и вам не нравяться такие фреймворки, скачайте 4 приведенных выше (бутстрапа 3 и 4) посмотрите как устроено и сделайте свой.

Но по началу не забивайте голову, с таким успехом можна задаваться вопросом а стоит ли использовать библиотеки?:)

Попробуйте в head вставить это:

<meta name="viewport" content="width=device-width, initial-scale=1">

дать якорь самой строке <tr id="anchor">...</tr>

раньше когда то
shoelace.io

Пробел перед псевдоклассом

.block:hover {
  border: 1px solid;
  border-color: #333333;
  padding: 1.73vw;
}

// удаление тегов <span> и </span>
$text = preg_replace (
	[
		'#\<span\>#',
		'#\<\/span\>#',
	], 

	[
		'',
		''
	], 

	$text
);

Результат:

<h3>Популярные бренды и чем они отличаются</h3>
<p>Adalya </p>
<p>Adalya – это классический среднем цена одной упаковки Adalya  составляетй. Самые популярные вкусы производителя:</p>
<p>Молоко;</p>
<p>Пирог с лимоном;</p>
<p>Кактус;</p>
<p>Манго-танго;</p>
<p>Лав 66. </p>

Просто указываете начертание.

body {
font-family: 'Roboto', sans-serif;
}

.class {
font-weight: bold;
font-style: italic;
}

.class2 {
font-weight: 300;
}

и т.д

1.
2.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700i" rel="stylesheet">

3. https://fonts.googleapis.com/css?family=Roboto:400...

Пример:
Roboto 700 bold italic

font-family: 'Roboto';
font-style: italic;
font-weight: 700;

Таким способом вы подключите только regular шрифт. На сайте google fonts при добавлении шрифта, есть ещё пункт customize где вы можите настроить начертания и т.д.
Вот пример:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext" rel="stylesheet">

В CSS используйте font-weight и font-style

font-family: 'Roboto', sans-serif;
font-weight: bold;
font-style: italic;

и т.д.

Чтобы пробелы не переносились можно использовать т. н. неразрывний пробел  .
Можно использовать CSS-правило на запрет переноса любых пробелов white-space: nowrap;. Точно такого же эффекта можно добиться используя HTML-тег nobr.
Чтобы текст красиво адаптировался можно использовать CSS-правило text-overflow: ellipsis;. Если его использовать вместе с white-space: nowrap;, то в конце будет добавлено троеточие.

В Css white-space: nowrap;

https://jsfiddle.net/qLp6d2pp/1/