Reputation: 51
I'm following a tutorial on youtube to create a replica of LinkedIn with CSS + ReactJS. I've been following the tutorial exactly (using it as more of a learning opportunity than anything) yet sometimes when the tutorial adds certain code, it doesn't appear on my environment when I try to add it. I found a work around for one case, but when I try to add a border-bottom to css it just won't show up.
CSS:
.header{
position: sticky;
top: 0;
display: flex;
justify-content: space-evenly;
border-bottom: thin solid lightgray; /*this is a vscode shortcut*/
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
z-index: 999;
}
JS:
function Header() {
return (
<div className ='Header'>
<div className="header__left">
<img src="https://www.flaticon.com/svg/static/icons/svg/174/174857.svg" alt=""/>
<div className="header__search">
<SearchIcon/>
<input type="text"/>
</div>
<div className="header__right">
<HeaderOption Icon= {HomeIcon} title="Home"/>
<HeaderOption Icon={SupervisorAccountIcon} title="My Network"/>
</div>
</div>
</div>
);
}
*HeaderOption is an imported JS function I created. It isn't conflicting with the CSS I believe because I have removed it and the border still won't appear.
Thank you in advance.
Upvotes: 1
Views: 1350
Reputation: 71
First off, you might wanna check your classNames' spelling for case-sensitivity.
If that's not the issue, your divs are probably collapsing with each other, so it renders the pixels through approximation. This is usually the case if you try zooming in your page and the missing border magically appears.
I suggest setting a height
for your header where the borders don't collapse with the other divs' borders. Also, I prefer setting a fixed measurement unit rather like px
,rem
,%
, etc. rathen than using thin
.
Upvotes: 0
Reputation: 884
CSS is case insensitive.
But in HTML the class and ID are case sensitive
change
<div className ='Header'>
to
<div className ='header'>
Upvotes: 1