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

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

@ -5,8 +5,14 @@
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
*{
padding: 0;
margin: 0;
}
body { body {
background-color: rgb(189, 188, 188); background-color: rgb(189, 188, 188);
margin 0 auto;
} }
#nav-bar { #nav-bar {
@ -85,6 +91,15 @@ body {
padding: 1.5em; 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 */ /* Form Section */
#formsection { #formsection {
@ -96,6 +111,7 @@ body {
} }
#formsection #email { #formsection #email {
margin-top: 1rem;
padding-left: 10px; padding-left: 10px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
@ -123,6 +139,8 @@ body {
.grid { .grid {
display: flex; display: flex;
flex-wrap: nowrap;
flex-grow: 1;
} }
#games .icon { #games .icon {
@ -137,26 +155,46 @@ body {
#games .details { #games .details {
margin-left: 2rem; margin-left: 2rem;
text-align: left; text-align: left;
height: 125px; height: auto;
width: 50vw; width: 50vw;
padding: 5px; padding: 5px;
} }
/* How To Section */ /* How To Section */
#videos { #videos {
padding: 1em;
text-align: center; text-align: center;
} }
.video {
width: 420px;
height: 315px;
}
.video + .video { .video + .video {
margin-top: 1rem; margin-top: 1rem;
} }
/* Pricing Section */ /* Pricing Section */
#features { #features {
margin: auto; margin-left: auto;
margin-right: auto;
width: 60%; width: 60%;
text-align: center; 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);
}
}