Skip to content

Commit

Permalink
CSS: Center logo and brand name on narrow screens (RefugeRestrooms#611)
Browse files Browse the repository at this point in the history
* _mobile.scss: Lower logo/brand on narrow screens

Adjust the CSS "top" property to set the logo and "brand name"
("Refuge Restrooms") slightly lower within the navbar on narrow
screens.

This is to adjust for the navbar being responsively taller
on narrower screens. "767px screen width" happens to be the responsive
threshold for that height change for the navbar.

* _mobile.scss: Move 342px rules, adjust whitespace

Moved the "max 342px" rules to the bottom, so all screen-width-related
style rules are in descending order of the sizes that they apply to.
(For consistency).

Adjusted the use of newlines in this stylesheet to be more consitent.
  • Loading branch information
DeeDeeG authored Jan 28, 2020
1 parent 61e5df4 commit dd5441e
Showing 1 changed file with 15 additions and 10 deletions.
25 changes: 15 additions & 10 deletions app/assets/stylesheets/_mobile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,9 @@

// Screen Width-Related Rules

@media only screen and (max-width: 342px), only screen and (max-device-width: 344px) {

button.splash-add-restroom-btn > i.fa-plus-square-o {
margin-left: 2%;
}

.nav-column {
padding-left: 0;
padding-right: 0;
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
.navbar-default .toiletLogo {
top: 8px;
}
}

Expand Down Expand Up @@ -54,9 +48,9 @@
}
.showPageContent {
padding: 10px;

}
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.container {
width: 100%;
Expand Down Expand Up @@ -90,6 +84,17 @@
font-size: 15px;
}
}

@media only screen and (max-width: 342px), only screen and (max-device-width: 344px) {
button.splash-add-restroom-btn > i.fa-plus-square-o {
margin-left: 2%;
}
.nav-column {
padding-left: 0;
padding-right: 0;
}
}

a.iconLink:hover {
text-decoration: none;
}

0 comments on commit dd5441e

Please sign in to comment.