My project looks good on desktop or laptop ..
Site is here: https://obscure-crag-61417.herokuapp.com/
When the site becomes smaller, the search box is overlowing the navbar and under the header:
I know about media-queries-(albeit not quite an expert) but just trying to figure out if there is a better way to do what I'm doing.
This is what my code for this page looks like. I was trying to replicate the grid from the container portion of the page in the navbar. Not sure if this is where my issue may lie?
<div className="App">
<nav class="navbar" style={{backgroundColor: "#000000"}}>
<div class="col-md-2 brand">CoinStars</div>
<div class="col-md-7" style={{padding:"0px"}}><TestSearch onSearch={this.getData}/>
</div>
<div class="col-md-2 brandRight">1-800-COINSTARS</div>
</nav>
<div class="row">
<div class="col-md-2 pl-4">
<span class="bigMovers">Biggest Movers</span>
<Popular onSearch={this.getData}/>
</div>
<div class="col-md-7">
<Stats value={this.state.value}/>
<Graph value={this.state.value} />
<div style={{width:"90%"}}>
<h4>The Latest Tweets About {this.state.value} </h4>
{this.state.tweets.map(tweet =>
<div key={tweet.id}>
<div className="media mb-4"><img src={(tweet.user.profile_image_url)} className="mr-3 circle"></img>
<div className="media-body">
<div className="mt-0 mb-1">
<span className="twitUserName">{tweet.user.name}</span>
<span className="twitScreen">@{tweet.user.screen_name}</span>
<span>{moment(tweet.created_at).fromNow()} </span>
</div>
<a href={`https://twitter.com/${tweet.user.id}/status/${tweet.id_str}`} target="_blank">{tweet.text}</a>
</div>
</div>
</div>
)}
</div>
</div>
<div class="col-md-2">
<span class="sponsors">Our Sponsors</span>
<div>
<img width="200" style={{padding:"10px 0 0 0"}} src="https://i.pinimg.com/736x/46/ed/81/46ed8183154d88646fbf96303660b126--learn-web-design-learn-coding.jpg"/>
</div>
</div>
