tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improvements for mobile sizing. menu still to do

This commit is contained in:
Robert McGovern 2020-10-11 17:01:41 +01:00
parent 208adfe5d0
commit 64647044b0
2 changed files with 46 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html
View File

@ -29,6 +29,7 @@
<input type="email" name="email" id="email" placeholder="person@example.com" required>
</div>
<div class="form-example">
<!-- using class here doesn't work on iOS -->
<input class="btn-link" id="submit" type="submit" value="Subscribe!">
</div>
</form>
@ -75,10 +76,10 @@
</section>
<section id="videos">
<h2>Teasers for games</h2>
<iframe class="video" id="video" width="420" height="315" src="https://www.youtube.com/embed/KipPMgbpKzk?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe class="video" id="video2" width="420" height="315" src="https://www.youtube.com/embed/A4BuL886bJA?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe class="video" id="video3" width="420" height="315" src="https://www.youtube.com/embed/LhFETREAvhc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe class="video" id="video4" width="420" height="315" src="https://www.youtube.com/embed/-PxHfU2Xoac?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe class="video" id="video" src="https://www.youtube.com/embed/KipPMgbpKzk?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe class="video" id="video3" src="https://www.youtube.com/embed/LhFETREAvhc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe class="video" id="video4" src="https://www.youtube.com/embed/-PxHfU2Xoac?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe class="video" id="video2" src="https://www.youtube.com/embed/A4BuL886bJA?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</section>
<section id="features">
<h2 >Features</h2>

44
freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css
View File

@ -5,8 +5,14 @@
font-family: 'Roboto', sans-serif;
}
*{
padding: 0;
margin: 0;
}
body {
background-color: rgb(189, 188, 188);
margin 0 auto;
}
#nav-bar {
@ -85,6 +91,15 @@ body {
padding: 1.5em;
}
section {
margin-top: 0.75rem;
}
/* Put spacing between the section title (first element) and the next element below */
section :nth-child(2) {
margin-top: 0.5rem;
}
/* Form Section */
#formsection {
@ -96,6 +111,7 @@ body {
}
#formsection #email {
margin-top: 1rem;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
@ -123,6 +139,8 @@ body {
.grid {
display: flex;
flex-wrap: nowrap;
flex-grow: 1;
}
#games .icon {
@ -137,26 +155,46 @@ body {
#games .details {
margin-left: 2rem;
text-align: left;
height: 125px;
height: auto;
width: 50vw;
padding: 5px;
}
/* How To Section */
#videos {
padding: 1em;
text-align: center;
}
.video {
width: 420px;
height: 315px;
}
.video + .video {
margin-top: 1rem;
}
/* Pricing Section */
#features {
margin: auto;
margin-left: auto;
margin-right: auto;
width: 60%;
text-align: center;
}
/* start handling at 700 for menu */
@media screen and (max-width: 700px) {
}
/* below video tweak video sizes */
@media screen and (max-width: 500px) {
#formsection #email {
font-size: 20px;
}
.video {
width: 90%;
height: calc((90vw / 4) * 3);
}
}