Hey guys I haven't done web dev in a while. I have made my site what I thought to be responsive using flexbox.
Also first time posting here. Please let me know what the conventional ways of getting help is if this is an influx of information.
I have two pages in total. A home page and a gallery showing all my work.
Some HTML elements(videos) have a library attached to the semantics to get rid of javascript. In this case I'm using AOS (Animate on scroll).
Anyways, I made the first page (Home) responsive to iphoneX but I cannot get the gallery page responsive in any way, shape or form and it is driving me crazy.
I'm aware that there are probably LOTS of errors and easier way to do things.
Aside from the responsiveness of the gallery page - please share tips on how I can change some things.
If you're confused as for what I'm asking. Just help PLEASE with the responsiveness of the gallery page for and iPhone X and iPad.
Thanks!
HTML GALLERY SECTION
<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>
@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;
}
}