Эти два блока по задумке должны прижиматься к краям.
Тогда будет у правого края небольшой отступ, который не нужен
margin-right: 7.2%;
А если не менять?
Когда я задаю высоту картинке у меня текст при адаптировании выпадает за блок
Если оставить ширину и применить object-fit:cover; ничего не происходит.
Вы предлагаете использовать в процентах размеры?
потому что картинка сама намного больше.
.img__cream { width: 600px; height: 484px; object-fit: fill; }
width: 100%;
height: 100%;
object-fit: cover; /*или contain*/height: 812px;<div><img src="" alt=""></div>Или как добавить class в ссылку на изображение?
<a href=""></a><a class="yourclass" href=""></a>
position: sticky
<?php
$loop = CFS()->get('work_examples');
foreach ($loop as $row){
?>
<a href="<?= $row['work_example_img'] ?>" data-gal="prettyPhoto[2]"><img src="<?= $row['work_example_img'] ?>" alt="Процесс монтажа отопления частного дома - дымоходы" width="200" height="150"></a>
<?php
}
?>
Не очень удобный способ, но если вам так нравится...
Обычно делают контейнер, ограничивают его ширину и центрируют. И потом используют для нужных блоков примесью в разметке или стилях.
Более того, этот общий отступ у вас уже учтен в Products__wrapper. Вот же вы пишете:
Правда, почему-то разный справа и слева...
Но вопроса это уже вообще не касается.
Посмотрев макет, могу добавить то, что вы не могли сформулировать. Размер обеих картинок должен быть одинаковым.
Значит, картинку нужно обернуть в тег figure, задать ему пропорции с помощью aspect-ratio, если позволяет ТЗ или хака с паддингами (легко гуглится).
Картинке задать стили, которые я написала в первом комментарии.