При уменьшении ширины экрана задний фон скатываться в левый край как исправить?

Question

Zhenya Tureysky @Hrust67

HTML
CSS

При уменьшении ширины экрана задний фон скатываться в левый край как исправить?

При уменьшении ширины экрана задний фон скатываться в левый край как исправить ?

<!-- about my -->
	<div  class="about_my_bg" id="about_us">
		<div class="about_my_container">
			<div class="about_my_wrapper">
				<div class="about_my_title">
					<h1>About me</h1>
				</div>
				<div class="about_my_sub_title">
					<p>Hi, I'm Denis – UX/UI designer from Minsk. <br> I'm interested in design and everything connected with it. <br><br><br> I'm studying at courses "Web and mobile design <br> interfaces" in IT-Academy. <br><br><br> Ready to implement excellent projects <br> with wonderful people.</p>
				</div>
			</div>
		</div>
	</div>

/* about my */
.about_my_bg {
	background: #F6F6F6;
	width: 100%;
}
.about_my_container {
	margin: 0 auto;
	max-width: 943px;
	padding-right: 10px;
	padding-left: 10px;
}
.about_my_wrapper {
	text-align: center;
	padding-top: 120px;
	padding-bottom: 107px;
}
.about_my_title h1 {
	font-size: 34px;
	color: #070707;
	margin-bottom: 17px;
}
.about_my_sub_title p {
	color: #070707;
	font-size: 18px;
}

Знаю что вопрос наверное очень простой но все же буду рад если кто то укажет на мою ошибку

Вопрос задан более года назад
59 просмотров

2 комментария

Подписаться 1 Средний 2 комментария

Semantic.Moscow @SemanticMoscow

нет, вроде не скатывается.
может дело в окружающем контексте?

и не многовато ли обёрток для заголовка и одного параграфа?
упростите разметку - жить станет легче ;)

Написано более года назад

Zhenya Tureysky @Hrust67 Автор вопроса

SemanticMoscow,

spoiler

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, user-scalable=no">
 	

	<title>Denis Novik</title>
	<link rel="stylesheet" href="css/style.css">
	<!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
</head>
<body>

	<!-- first screen -->
	<div class="first_screen_container" id="home">
		<div class="first_screen">
			<header class="header">
				<nav class="nav">
					<ul class="navbar">
						<li><a href="#home">Home</a></li>
						<li><a href="#about_us">About me</a></li>
						<li><a href="#slills">Skills</a></li>
						<li><a href="#portfolia">Portfolio</a></li>
						<li><a href="#contacts">Contacts</a></li>
					</ul>
				</nav>
			</header>
			<div class="first_screen_title">
				<h1>Denis<br>Novik</h1>
				<h5>UX | UI designer<br>24 years old, Minsk</h5>
				<h3><span>RU</span>| ENG</h3>
			</div>
		</div>

		<!-- Swiper -->
		<div class="swiper_my_wrapper">
		    <div class="swiper mySwiper">
		      <div class="swiper-wrapper">
		        <div class="swiper-slide">
		        	<img src="img/slider_swiper_img_1.jpg" alt="">
		        </div>
		        <div class="swiper-slide">
		        	<img src="img/slider_swiper_img_2.jpg" alt="">
		        </div>
		        <div class="swiper-slide">
		        	<img src="img/slider_swiper_img_3.jpg" alt="">
		        </div>
		        <div class="swiper-slide">
		        	<img src="img/slider_swiper_img_4.jpg" alt="">
		        </div>
		        <div class="swiper-slide">
		        	<img src="img/slider_swiper_img_5.jpg" alt="">
		        </div>
		        <div class="swiper-slide">
		        	<img src="img/slider_swiper_img_6.jpg" alt="">
		        </div>
		      </div>
		    </div>
	    </div>
	</div>

	<!-- about my -->
	<div  class="about_my_bg" id="about_us">
		<div class="about_my_container">
			<div class="about_my_wrapper">
				<div class="about_my_title">
					<h1>About me</h1>
				</div>
				<div class="about_my_sub_title">
					<p>Hi, I'm Denis – UX/UI designer from Minsk. <br> I'm interested in design and everything connected with it. <br><br><br> I'm studying at courses "Web and mobile design <br> interfaces" in IT-Academy. <br><br><br> Ready to implement excellent projects <br> with wonderful people.</p>
				</div>
			</div>
		</div>
	</div>

	<!-- Skills -->
	<div class="skills_container" id="slills">
		<div class="skills_wrapper">
			<div class="skills_title">
				<h1>Skills</h1>
				<p>I work in such programs as</p>
			</div>
			<div class="skills_main_part">
				<div class="skills_colum_1">
					<img src="img/photoshop.png" alt="">
					<p>Adobe<br>Photoshop</p>
					<div class="star">
						<img src="img/black_star.png">
						<img src="img/black_star.png">
						<img src="img/black_star.png">
						<img src="img/black_star.png">
						<img src="img/gray_star.png">
					</div>
				</div>


				<div class="skills_colum_2">
					<img src="img/lIllustrator.png" alt="">
					<p>Adobe<br>Illustrator</p>
					<img src="img/black_star.png">
					<img src="img/black_star.png">
					<img src="img/black_star.png">
					<img src="img/gray_star.png">
					<img src="img/gray_star.png">
				</div>



				<div class="skills_colum_3">
					<img src="img/after_effects.png" alt="">
					<p>Adobe<br>After Effects</p>
					<img src="img/black_star.png">
					<img src="img/black_star.png">
					<img src="img/black_star.png">
					<img src="img/black_star.png">
					<img src="img/gray_star.png">
				</div>



				<div class="skills_colum_4">
					<img src="img/figma.png" alt="">
					<p>Figma</p>
					<img src="img/black_star.png">
					<img src="img/black_star.png">
					<img src="img/black_star.png">
					<img src="img/black_star.png">
					<img src="img/gray_star.png">
				</div>
			</div>
		</div>
	</div>


	<!-- Portfolio -->
	<div class="portfolio_bg" id="portfolia">
		<div class="portfolio_container">
			<div class="portfolio_wrapper">
				<div class="portfolio_title">
					<h1>Portfolio</h1>
				</div>
				<div class="first_job">
					<img src="img/portfolio_first_job.jpg" alt="">
					<a href="#">Online fashion store - Homepage</a>
				</div>

				<div class="second_robot">
					<img src="img/second_robot.jpg" alt="">
					<a href="#">Reebok Store - Concept</a>
				</div>

				<div class="third_work">
					<img src="img/third_work.jpg" alt="">
					<a href="#">Braun Landing Page - Concept</a>
				</div>
			</div>
		</div>
	</div>

	<!-- Contacts -->
	<div class="contacts_container" id="contacts">
		<div class="contacts_wrapper">
			<div class="contacts_title">
				<h1>Contacts</h1>
				<p>Want to know more or just chat?<br>You are welcome!</p>
			</div>
			<div class="contacts_button">
				<a href="#">
					<button>Send message</button>
				</a>
			</div>

			<div class="contacts_icon">
				<img src="img/contacts_in.svg" alt="">
				<img src="img/contacts_insta.svg" alt="">
				<img src="img/contacts_behance.svg" alt="">
				<img src="img/contacts_surface.svg" alt="">
			</div>
			<div class="contacts_sub_title">
				<p>Like me on<br>LinkedIn, Instagram, Behance, Dribble</p>
			</div>
		</div>
	</div>

	<!-- Swiper JS -->
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
	<script src="js/main.js"></script>
	
	<!-- Jquery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script>
		// Плавная прокрутка
		var $page = $('html, body');
		$('a[href*="#"]').click(function() {
		    $page.animate({
		        scrollTop: $($.attr(this, 'href')).offset().top
		    }, 500);
		    return false;
		});
	</script>
</body>
</html>

Написано более года назад

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
Как отсортировать в ХТМЛ по дате рождения от младшего к старшему, а так же, нумерацию их 1,2,3,4. Чтобы можно было потом добавить еще людей?
- 1 подписчик
- 2 часа назад
- 23 просмотра
1

ответ
HTML

+1 ещё

Простой
При загрузке картинки этот блок не имеет размера, как исправить?
- 1 подписчик
- 5 часов назад
- 40 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 6 часов назад
- 149 просмотров
1

ответ
CSS

Простой
Как убрать отступ?
- 1 подписчик
- 9 часов назад
- 90 просмотров
2

ответа
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 11 часов назад
- 39 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 18 часов назад
- 84 просмотра
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 18 часов назад
- 101 просмотр
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- вчера
- 87 просмотров
2

ответа
CSS

+1 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Доработать клиентское приложение для GTA 5 на C#

20 апр. 2024, в 00:51

1000 руб./за проект

Верстка и логика формы выбора билетов в зале для покупки

20 апр. 2024, в 00:43

10000 руб./за проект

Разработать формирование УПД на Java

20 апр. 2024, в 00:28

20000 руб./за проект

нет, вроде не скатывается.
может дело в окружающем контексте?

и не многовато ли обёрток для заголовка и одного параграфа?
упростите разметку - жить станет легче ;)

Answer 1 · 2022-06-30 20:28:52

Я в codepen попробовал: тоже не скатывается. Видимо, дело или в окружающем коде, или в браузере. В любом случае, чтобы найти ошибку, её нужно локализовать. Убирайте разные части кода, пока ошибка не исчезнет. И действительно ли правильно about_my_container внутри about_my_container, или вы случайно продублировали?

При уменьшении ширины экрана задний фон скатываться в левый край как исправить?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт