Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tweak CSS a bit for narrow screens (e.g. mobile phones) #610

Merged
merged 3 commits into from
Jan 5, 2020
Merged

Tweak CSS a bit for narrow screens (e.g. mobile phones) #610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d9d59d0
_mobile.scss: Add some styles for narrow screens
DeeDeeG Dec 24, 2019
330b7e9
CSS: Refactor mobile style rule
DeeDeeG Dec 24, 2019
7c9f015
CSS: No double-padding on nested '.container's
DeeDeeG Dec 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions app/assets/stylesheets/_mobile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,18 @@

// 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: 640px), only screen and (max-device-width: 640px) {
main, main .container {
padding-left: 0;
Expand Down
6 changes: 6 additions & 0 deletions app/assets/stylesheets/framework_and_overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,9 @@ header {
margin-left: auto;
margin-right: auto;
}

// Eliminates double-padding due to nested .container divs
.header > .container > .container {
padding-left: 0;
padding-right: 0;
}
2 changes: 1 addition & 1 deletion app/views/layouts/_navigation.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.container
.row.min-headroom
.col-xs-12
.col-xs-12.nav-column
%nav.nav.navbar-default{:role => "navigation"}
/ Brand and toggle get grouped for better mobile display
.navbar-header
Expand Down