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

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 комментарий

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

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

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

PHP

+2 ещё

Простой
Зачем login повторяется в phpmyadmin?
- 1 подписчик
- 23 минуты назад
- 8 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 8 часов назад
- 40 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 16 часов назад
- 74 просмотра
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 19 часов назад
- 85 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 81 просмотр
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 71 просмотр
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- вчера
- 93 просмотра
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 71 просмотр
2

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Поправить сайт (мобильная версия) на WordPress

24 нояб. 2024, в 04:16

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

Необходимо поменять пароль в WINDOWS

24 нояб. 2024, в 03:11

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

Требуется консультация по UX-дизайну казино

24 нояб. 2024, в 01:35

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

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

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

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

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

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

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

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

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