Адаптивность не получается, кто знает, где ошибка?

Question

[Marninmam]

всем привет. только начал делать отзывчивость на первом пункте, как сразу же столкнулся с проблемой:
справа тупо на полную страницу идёт нередатируемая часть пустого столбца.

Подскажите, где я не прав? Менял цифры, но ничего не выходит..

/*Responsiv*/

/* 992px - 1200px*/
 @media screen and (max-width: 1200px) {
 	.container {
		width: 960px;
	}
 }

 /*768px - 992px*/
 @media screen and (max-width: 992px) {
 	.container {
	width: 720px;
	}
 }

 /*576px - 768px*/
 @media screen and (max-width: 768px) {
 	.container {
	width: 540px;
	}
 }

 /*0px - 576px*/
 @media screen and (max-width: 576px) {
 	.container {
	width: 90%;
	}
 }

Answer 1

[ArtJH]

Закинь в песочницу или ссылку на сайт

Comments

[Marninmam]

artempt8.beget.tech
сайт

[ArtJH]

добавь это

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

[Marninmam]

ArtJH, уже есть, не помогает(

[ArtJH]

img.desktop {
    max-width: 100%;
    opacity: 0.3;
    position: absolute;
    right: 0;
}

.offer {
    position: relative;
    z-index: 1;
}

[ArtJH]

Marninmam, ты с картинкой ничего не делаешь, добавь мой код

[ArtJH]

@media screen and (max-width: 768px) {
.skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.skill {
    margin: 1em 0;
}
.desktop {
    max-width: 100%;
    opacity: 0.3;
    position: absolute;
    right: 0;
}

.offer {
    position: relative;
    z-index: 1;
}
}

[Marninmam]

ArtJH, посидел поигрался, получилось прийти к решению, спасибо тебе, друг!

[Marninmam]

ArtJH, слушай, а если мне в других размерах уже не нужно использовать затемненный вариант картинки, её размер там. а просто нужно, чтобы она не действовала по законам, который ты написал. например на второй секции, как мне отменить это правило на нижние скрины? если я ничего не прописываю к .desktop . то у меня остаётся замтемнённая картинка и все эти правила соотвественно

[ArtJH]

Marninmam, мой код работает на разрешениях экранах от 768px и ниже. Не понял ваш вопрос

[Marninmam]

ArtJH, да. чтобы те разрешения, что ниже. Допустим:
.desktop {
max-width: 100%;
opacity: 0.3;
position: absolute;
right: 0;
это мне было необходимо только на @ media screen and (max-width: 992px) {
а на последующие не нужно, как сделать так, чтобы это не распространялось на нижние варианты? Постоянно везде менять .desktop на какой то другой ,выходит?

[ArtJH]

Marninmam, меняешь условия медиа запроса. Чтоб от какого-то px до такого-то px. Например твоем случае это

media screen and (max-width: 992px) and (min-width: 768px ){
}

Либо на нужной точке, меняешь сво-ва

media screen and (max-width: 768px ){
.desktop {
max-width: 100%;
opacity: 1;
}
}