Fix mobile hr on front page

This commit is contained in:
Tyler Hallada 2015-01-11 18:01:15 -05:00
parent 0bf8d2847d
commit 80b4703b82
3 changed files with 10 additions and 6 deletions

View File

@ -158,13 +158,17 @@ img { width: auto; max-width: 100%; height: auto; }
.hide-mobile {
display: none;
}
.hide-desktop {
display: initial;
.hide-desktop-inline-block {
display: inline-block;
}
.hide-desktop-block {
display: block;
}
@media (min-width: 40rem) {
.hide-desktop { display: none }
.hide-mobile { display: initial }
.hide-mobile-inline-block { display: inline-block }
.hide-mobile-block { display: block }
}
/*****************************************************************************/

View File

@ -20,7 +20,7 @@ title: Tyler Hallada
<div class="profile-card-portrait">
<img src="profile_icon_128x128.png" alt="profile image">
</div>
<hr class="hide-desktop">
<hr class="hide-desktop hide-desktop-block">
</div>
<div class="column three-fourths">
<div class="profile-card-content">

View File

@ -56,8 +56,8 @@ title: Tyler Hallada
<div class="controls">
<button id="play-pause"><i class="icon ion-pause"></i></button>
<button id="clear"><i class="icon ion-refresh"></i></button>
<button id="hide-show-mobile" class="hide-desktop"><i class="icon ion-chevron-up"></i></button>
<button id="hide-show-desktop" class="hide-mobile"><i class="icon ion-chevron-down"></i></button>
<button id="hide-show-mobile" class="hide-desktop hide-desktop-inline-block"><i class="icon ion-chevron-up"></i></button>
<button id="hide-show-desktop" class="hide-mobile hide-mobile-inline-block"><i class="icon ion-chevron-down"></i></button>
</div>
</div>
<div id="options" class="container-full hide-mobile">