Html Question posted in
Some basic documentation can be found here.

Html – 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

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

browser inspection

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

Tags:

3

Answers


  1. 0

    I’m on Mac running Monterey 12.6.1, and this code works on all my browsers.

    Brave: v 1.70.126
    Chrome: v 125.0.6422.113
    Safari: 15.6.1
    Firefox: 131.0b4

    Maybe listing the specific versions of O.S. and browser you’re using could be helpful in determining what is causing the issue?

    Login or Signup to reply.
  2. 0

    Try to delete your cache. You probably wrote display block first, and flex after. but the first file downloaded still in cache with display block.

    Login or Signup to reply.
  3. 0

    You could try adding

    flex-direction: row;

    in your .container class,

    tho I don’t now why it doesn’t work. maybe you’re using the 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search