How to create a twitter like 3-column responsive UI? - css

Question

I'm building twitter clone and it's UI have a 3 column layout.
Working Implementation
When access it from desktop, it shows like this:
-------------------------------------------
| Navbar| Feed | Follow |
-------------------------------------------
When access it from tablet or mid size device, it shows like this:
-------------------------------------------
| Navbar| Feed |
-------------------------------------------
When access it from mobile or small size device, it shows like this(Navbar should be at bottom):
--------------------------------------------------
| Feed |
| Nav-item-1| Nav-item-2 | Nav-item-3| Nav-item-4|
--------------------------------------------------
I'm successful in making layout responsive for tablet and desktop but for mobile I'm having issues.
This is what I have tried:
#media (max-width: 480px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
align-items: flex-start;
flex-direction: row !important;
}
}
Full Code:
import "./styles.css";
export default function App() {
return (
<div className="wrapper">
<div className="row">
<nav className="bootomTab d-none d-sm-flex col-sm-2 col-lg-3">
<div>
<div className="logo">
<a href="/home">
<img src="/twitter.png" alt="logo" />
</a>
</div>
<a href="/home">
<i className="fas fa-home"></i>
</a>
<a href="/search">
<i className="fas fa-search"></i>
</a>
<a href="/notifications">
<i className="fas fa-bell"></i>
</a>
<a href="/messages">
<i className="fas fa-envelope"></i>
</a>
<a href="/profile">
<i className="fas fa-user"></i>
</a>
<a href="/signout">
<i className="fas fa-sign-out-alt"></i>
</a>
</div>
</nav>
<div className="mainSectionContainers col-12 col-sm-8 col-lg-5 ml-2">
<div className="titleContainer">
<h1>Home</h1>
</div>
Feed
</div>
<div className="d-none d-lg-flex col-md-2 col-lg-4 mt-5">
{/* Follow suggestions */}
<aside className="followSuggestion">
<div className="followSuggestionHeader">
<h2>Who to follow</h2>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
CSS Code:
div .logo {
width: 50px;
height: 50px;
}
div .logo img {
width: 100%;
}
nav {
display: flex;
flex-direction: column;
align-items: flex-end;
height: 100%;
}
nav a {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 30px;
width: 55px;
height: 55px;
text-decoration: none;
color: #212529;
}
nav a:hover {
background-color: var(--buttonHoverBg);
color: var(--primary-blue);
border-radius: 50%;
}
.mainSectionContainers {
padding: 0;
margin: 0 -10px 0 10px;
border-left: 1px solid #e6ecf0;
border-right: 1px solid #e6ecf0;
}
.titleContainer {
height: 53px;
padding: 0 15px;
display: flex;
align-items: center;
border-bottom: 1px solid #e6ecf0;
flex-shrink: 0;
}
.followSuggestion {
background-color: rgb(247, 249, 249);
border-radius: 16px;
padding: 15px;
margin: 0px 20px 20px 20px;
}
.followSuggestionHeader {
border-bottom: 1px solid #e6ecf0;
}
.followSuggestionHeader h2 {
font-size: 20px;
font-weight: 800;
}
.followUsernameContainer {
flex: 1;
display: flex;
padding: 12px 0;
border-bottom: 1px solid #e6ecf0;
}
.midFollowContainer {
padding: 0 15px;
}
.userImageContainer {
width: 50px;
height: 50px;
}
.userImageContainer img {
width: 100%;
border-radius: 50%;
background-color: white;
}
#submitPostButton {
background-color: #1fa2f1;
color: white;
border: none;
border-radius: 40px;
padding: 7px 15px;
}
#media (max-width: 480px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
align-items: flex-start;
flex-direction: row !important;
}
.logo {
display: none;
}
}

Answer 1

Finally, I managed to make it fully responsive.
The issue is because of the wrong breakpoint(480px) I have set and extra div present outside nav-items which override parent class property.
Changes I have made in css:
#media (max-width: 576px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
flex-direction: row !important;
}
.bootomTab a {
flex-grow: 1;
}
.logo {
display: none;
}
.mobileHide{
display: none;
}
}
On desktop, it shows like this:
On tablet, it shows like this:
On mobile, it shows like this: