fix: Updated fCC Function Logo on Small Screen (#16460)
* Fixed FCC Logo on Small Screen Changed *.logo-glyph* height to 28px from 30 which makes a nice form-factor on all screen sizes. I also utilized flexbox on the parent anchor tag in *.navbar-brand* in order to assure the logo always stays horizontally and vertically center. * Deleted unneeded class name I deleted the *.nav-logo* class from the FCC Function logo img tag. It was serving no essential purpose, and was only needed for the main FCC logo.
This commit is contained in:
committed by
mrugesh mohapatra
parent
c27250eec1
commit
49a5911fca
@ -199,7 +199,7 @@ export class FCCNav extends React.Component {
|
|||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
alt='learn to code javascript at freeCodeCamp logo'
|
alt='learn to code javascript at freeCodeCamp logo'
|
||||||
className='img-responsive nav-logo logo-glyph'
|
className='img-responsive logo-glyph'
|
||||||
src={ fCCglyph }
|
src={ fCCglyph }
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
@ -32,6 +32,9 @@
|
|||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
padding-top: @navbar-logo-padding;
|
padding-top: @navbar-logo-padding;
|
||||||
padding-bottom: @navbar-logo-padding;
|
padding-bottom: @navbar-logo-padding;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-logo {
|
.nav-logo {
|
||||||
@ -255,7 +258,7 @@ li.nav-avatar {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logo-glyph {
|
.logo-glyph {
|
||||||
height: 30px;
|
height: 28px;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user