CODEWITHSUNDEEP
htmlcssreactjsborder
hoshii_tomato
hoshii_tomato

Reputation: 51

CSS - How to fix border-bottom won't appear?

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

Answers (2)

Patorikku
Patorikku

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

Ahmad
Ahmad

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

Related Questions