I want my page to be divided in two vertically. This works locally, but not on Chrome when deployed (see screenshots), although it does work on Safari.
Any help appreciated
html
<body>
<div class="container">
<!-- Left Panel: Project Description -->
<div class="left-panel">
<h1>Project Description</h1>
<p>
Welcome to ...
</p>
<p>
The bot’s core functionality...
</p>
</div>
<!-- Right Panel: AlienBot -->
<div class="right-panel">
<h1>Chat with AlienBot</h1>
<div class="chat-container" id="chat">
<!-- Messages will be appended here -->
</div>
<div id="message-input">
<input type="text" id="user_input" placeholder="Say something..." />
<button onclick="sendMessage()">Send</button>
</div>
</div>
</div>
</body>
css
.container {
display: flex !important;
height: 100vh; /* Full viewport height */
}
.left-panel, .right-panel {
width: 50% !important;
padding: 20px;
}
.left-panel {
background-color: #f0f0f0; /* Light background for the description */
box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.1); /* Divider shadow */
}
I’ve tried adding !important to the container flex. There are no external css styles that might override the stylesheet.
You need to sign in to view this answers
Leave feedback about this