htmlcssflexbox

Why is CSS flex not working when deployed?

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

local - the way I want it to look Once deployed

.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 */
}
<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>

browser inspection

I've tried adding !important to the container flex. There are no external css styles that might override the stylesheet.

Solution

  • You could try adding

    flex-direction: row;

    in your .container class,

    tho I don't now why it doesn't work. maybe you're looking at a different file (a copy of the old state perhaps or cached version), or maybe the browser takes some percent of the space of the website and the 50% for the second div just isn't there.