Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?

Question

[meta941]

Суть проблемы: я абсолютно не умею делать вёрстку, мне ближе бэкенд, но так вышло, что мне пришлось этим заниматься и сейчас я не понимаю: как мне добиться того результата, что я хочу?
А я хочу: блок со слайдером и изображением справа от него, блок с описанием и блок "Купить" - всё это, предположительно, должно быть в одной строчке.
Но на практике я почему-то имею, что блок со слайдером и изображением занимает в 1.5 раза больше места обычной пустотой, блок описания заставляет съезжать блок с изображением, но при этом слайдер остаётся на месте, кучу костылей и полное непонимание как это исправлять.

Итоговый результат должен быть похож вот на это


Код - https://pastebin.com/KgE0LtqW

Comments

[Sergey Semenov]

Может скрин есть, как есть и как должно получится.

[meta941]

Sergey Semenov, сейчас оно вот так



Как должно получиться - показано в вопросе. Именно что блоки должны быть расположены таким образом, должны быть адаптивными и не должны ломаться.

[meta941]

Итак, конечно же, как только я задал вопрос - сразу же сам нашёл решение

Честно слово, это какой-то абсурд. И так каждый раз - я 2 дня не мог решить эту проблему и постоянно откладывал на потом.

И вот, я задаю вопрос - решение находится через десяток минут

Решение:
Проблема была в том что слайдер у меня находился вне колонки бутстрапа (col-md, col-lg и тд)

Когда я его перенёс - слайдер стал ровным, но он теперь съезжал вместе с блоком картинки
Я указал, что див для строки будет следующим:
<div class="row g-2 d-flex align-items-start">
И всё встало на свои места.

[Ankhena]

всё это, предположительно, должно быть в одной строчке.

К черту бэкенд, фронтэнд, давайте вернемся в школу.
Вы пишете, что всё должно быть в одной строке. Смотрим в код: там 4 блока
200px
col-lg-6
col-lg-3
col-lg-3
Каким, по-вашему, образом оно должно поместиться в одну строку?

Едем дальше: блок для выбранного изображения имеет класс col-lg-6, т.е. 50% (забудем на время про бутстрап и его фокусы с gap, когда уже давно не нужны эти извраты). Но внутри лежит картинка с фикс шириной и отсутствием правил для адаптива.
По вашему скрину в вопросе, она должна занимать не половину всего блока, а половину блока со слайдером. Ну тогда надо попасть разметкой одним в другое.

И т.д.
Разбирайтесь кто кому родитель и что там всё таки с шириной.

[meta941]

Ankhena,
Проблему с блоками и тд. я уже решил.

забудем на время про бутстрап и его фокусы с gap, когда уже давно не нужны эти извраты

Вот в этом и проблема - я вообще не понимаю, где люди находят информацию о том, как правильно верстать в нынешнее время.
Если не бутстрап, то какие есть ему аналоги, если хочется пользоваться весьма удобной сеткой? Кроме CSS-Grid.

Судя по вашим сообщениям - всё должно быть предельно просто, я понял вашу затею на все 100%
Но во-первых: я не понимаю как строится адаптив изображений. Пока что нашёл только способ делать object-fit: contain, но это же ведь не панацея?

Указываешь размер в пикселях - всё съезжает и адаптива 0
Указываешь в процентах - оно не работает
Указываешь в единицах размера текста - так текст ведь не уменьшается при изменении размеров.
Как тогда поступать?

Но внутри лежит картинка с фикс шириной и отсутствием правил для адаптива.

О каких правилах идёт речь? Я не представляю этого от слова совсем.

Если не сложно, то могли бы просвятить?