Эй, ребята, я давно не занимался веб-разработкой. Я сделал свой сайт, как я думал, с помощью flexbox.
Также впервые публикуется здесь. Пожалуйста, дайте мне знать, каковы обычные способы получения помощи, если это поток информации.
У меня всего две страницы. Домашняя страница и галерея, показывающая все мои работы.
Некоторые HTML элементы (видео) имеют библиотеку, прикрепленную к семантике, чтобы избавиться от javascript. В этом случае я использую AOS (анимация при прокрутке).
В любом случае, я сделал первую страницу (Домашнюю) отзывчивой на iphoneX, но не могу заставить страницу галереи реагировать каким-либо образом, в той или иной форме, и это сводит меня с ума.
Я знать, что, вероятно, есть много ошибок и более простой способ сделать что-то.
Помимо отзывчивости страницы галереи - поделитесь советами о том, как я могу изменить некоторые вещи.
Если вы не понимаете, о чем я спрашиваю. Просто помогите ПОЖАЛУЙСТА с отзывчивостью страницы галереи для iPhone X и iPad.
Спасибо!
HTML РАЗДЕЛ ГАЛЕРЕИ
<div class="gallery-section">
<h1>GALLERY</h1>
<h2>Harlem Globetrotters</h2>
<div class="feature-story">
<div class="main-story">
<video src="./resources/videos/Harlem Globetrotters - Rube Goldberg Daily Planet.mp4" controls
poster="./resources/images/globtrottersRubegoldberg.png"></video>
</div>
</div>
<!--MOVIE 1-->
<div class="feature-stories">
<div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
<video src="./resources/videos/John Farnworth - Mt. Everest - Daily Planet.mp4" controls
poster="./resources/images/John-Farnworth.jpg"></video>
<div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
<div class="movie-text-header">Mt.Everest</div>
TEXT ---
</div>
</div>
</div>
<!--MOVIE2-->
<div class="feature-stories">
<div class="movie-2" data-aos="fade-left" data-aos-duration="3000">
<div class="movie1-text" data-aos="fade-right" data-aos-duration="3000">
<div class="movie-text-header">Manits wears 3D-Glasses</div>
TEXT ---
</div>
<video src="./resources/videos/Praying Mantis Stereovision - Daily Planet.mp4" controls
poster="./resources/images/mantis3d.jpg"></video>
</div>
</div>
<!--MOVIE3-->
<div class="feature-stories">
<div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
<video src="./resources/videos/Dyson Orchestra - Daily Planet.mp4" controls
poster="./resources/images/dysonorchestra.jpg"></video>
<div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
<div class="movie-text-header">Dyson Orchestra</div>
TEXT---
</div>
</div>
</div>
<!--MOVIE4-->
<div class="feature-stories">
<div class="movie-2" data-aos="fade-left" data-aos-duration="3000">
<div class="movie1-text" data-aos="fade-right" data-aos-duration="3000">
<div class="movie-text-header">Twilight zone discovered</div>
TEXT ---
</div>
<video src="./resources/videos/Rariphotic Zone Discovery Smithsonian - Daily Planet.mp4" controls
poster="./resources/images/TwilightZone.jpg"></video>
</div>
</div>
<!--MOVIE5-->
<div class="feature-stories">
<div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
<video src="./resources/videos/Little Tikes - Flite Test - Daily Planet.mp4" controls
poster="./resources/images/littletikes.png"></video>
<div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
<div class="movie-text-header">Little Tikes car flies</div>
TEXT ---
</div>
</div>
</div>
<!--MOVIE6-->
<div class="feature-stories">
<div class="movie-2" data-aos="fade-left" data-aos-duration="3000">
<div class="movie1-text" data-aos="fade-right" data-aos-duration="3000">
<div class="movie-text-header">Stephen Hawking - Life in numbers</div>
TEXT ---
</div>
<video src="./resources/videos/Stephen Hawking Life in Numbers - Daily Planet.mp4" controls
poster="./resources/images/shawking.jpg"></video>
</div>
</div>
<!--MOVIE7-->
<div class="feature-stories">
<div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
<video src="./resources/videos/ESA CLUSTER UFO - Daily Planet.mp4" controls
poster="./resources/images/ESAcluster.jpg"></video>
<div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
<div class="movie-text-header">Was it a UFO?</div>
TEXT--
</div>
</div>
</div>
</div>
<div class="top10">
<div class="top10-header">
<h1>TOP 10's</h1>
</div>
<div class="top10-videos">
<div class="first-two">
<div class="top10-1"><video src="./resources/videos/Top 10 - Things astronauts do in space.mp4" controls
poster="./resources/images/astroSpinner.jpg"></video>
</div>
<div class="top10-1"><video src="./resources/videos/Top 10 - World's Biggest Displays - Daily Planet.mp4"
controls></video></div>
</div>
<div class="second-two">
<div class="top10-1"><video src="./resources/videos/Top 10 - Extreme Adventures - Daily Planet.mp4"
controls></video></div>
<div class="top10-1"><video src="./resources/videos/Top 10 - Holograms - Daily Planet.mp4" controls></video>
</div>
</div>
<div class="third-two">
<div class="top10-1"><video src="./resources/videos/Top 10 - High Tech Sneakers - Daily Planet.mp4"
controls></video></div>
<div class="top10-1"><video src="./resources/videos/Top 10 - Robots that play sports - Daily Planet.mp4"
controls></video></div>
</div>
</div>
</div>
ЗАПРОС МЕДИА CSS
@media only screen and (min-width: 375px) and (max-width: 812px) {
html {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.nav-wrapper {
display: flex;
justify-content: center;
}
.nav-wrapper > .left-side > div > a {
padding: 100px;
text-decoration: none;
border: none;
}
.container .right-side {
display: none;
}
header .content {
height: 10%;
}
.section-2 {
padding: 40px;
height: 45rem;
overflow: hidden;
}
.section-2 .headline {
font-size: 4rem;
padding-bottom: 0px;
margin-bottom: 0px;
}
.section-2-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 1450px;
margin-left: -170px;
padding: 0px 150px;
}
.section-2-content img {
display: none;
}
.links {
margin-bottom: 220px;
flex: 1;
}
.links a {
margin: -30px;
}
.footer-bottom {
display: none;
}
.about {
display: none;
}
.footer .footer-content {
display: flex;
flex-direction: column;
}
#contactForm {
margin-top: 25px;
}
.gallery-section h1 {
margin-left: -100px;
}
.gallery-section h2 {
font-size: 2rem;
margin-right: 1rem;
}
.gallery-section .feature-story {
height: 30vh;
margin-right: 70px;
}
.gallery-section {
width: 375px;
display: flex;
flex-direction: column;
margin: auto;
}
.gallery-section video {
padding: 0rem;
margin-top: 0rem;
width: 100%;
}
.movie-1 {
margin-left: -100px;
}
.movie1-text {
display: none;
}
.movie2-text {
display: none;
}
.top10 {
display: none;
}
.alert {
display: none;
}
}