crayonix/giovani.lol
Archived
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed nav options overlapping on medium sized screens

Browse Source
This commit is contained in:
Giovani
2019-04-18 17:40:14 -04:00
parent d844e459d4
commit 422e0013d6
4 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/App.css
View File

@@ -11,7 +11,7 @@ html {
height: 5rem; height: 5rem;
} }
@media (max-width: 575.98px) { /* sm */ @media (max-width: 575.98px) { /* xs */
.content-width { .content-width {
width: 90%; width: 90%;
} }

2
src/components/introduction/introduction.css
View File

@@ -6,7 +6,7 @@
width: 500px; width: 500px;
} }
@media (max-width: 575.98px) { /* sm */ @media (max-width: 575.98px) { /* xs */
.line-one-type-size { .line-one-type-size {
font-size: 2rem; font-size: 2rem;
} }

2
src/components/navigation/navigation.css
View File

@@ -19,7 +19,7 @@
display: none; display: none;
} }
@media (max-width: 575.98px) { /* sm */ @media (max-width: 767.98px) { /* sm */
.desktop-nav { .desktop-nav {
display: none; display: none;
} }

4
src/components/navigation/navigation.js
View File

@@ -37,10 +37,10 @@ class NavigationBar extends Component {
return ( return (
<div> <div>
<div className="container-fluid desktop-nav fixed-top"> <div className="container-fluid desktop-nav fixed-top">
<div className="row justify-content-end nav-background-color"> <div className="row justify-content-center justify-content-xl-end nav-background-color">
{this.navigationOptions.map((navigationOption, i) => { {this.navigationOptions.map((navigationOption, i) => {
return ( return (
<a className="col-1 nav-menu-item remove-link-styling" href={navigationOption.href} key={i}> <a className="col-2 col-xl-1 nav-menu-item remove-link-styling" href={navigationOption.href} key={i}>
<div className="text-center pt-2 pb-2"> <div className="text-center pt-2 pb-2">
<h3>{navigationOption.content}</h3> <h3>{navigationOption.content}</h3>
</div> </div>