Positioning and resizing elements based on varying screen sizes and levels of zoom

Question

Positioning and resizing elements based on varying screen sizes and levels of zoom

I recently designed a basic webpage using HTML with two main elements - a chat window for user interaction and a chart.js plot. Here is a snippet of the HTML code:

<!DOCTYPE html>
<html lang="en">
    
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible">
  <link rel="shortcut icon" href="#" />
  <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  ...
</head>

<body>
  <section class="msger">
    <header class="msger-header">
       <div class="msger-header-title">
         <!-- Buttons here -->
       </div>
    </header>
    <main class="msger-chat">
        <div class="container" id="start-btn">
          <button class="start-btn" type="button" onClick="start()">
            Start Conversation
          </button>
        </div>
        <div class="msg left-msg">
        </div>
    </main>

    <form class="msger-inputarea" id="msger-input">
       <input type="text" class="msger-input" id="textInput" placeholder="Enter your message..." style="display:none">
       <button type="submit" class="msger-send-btn" style="display:none" id="sendInput">Send</button>
     </form>

  </section>

  <div style="height: 50vh; width: 50%;">
        <canvas id="myChart"></canvas>
  </div>
</body>

</html>

Below is a snippet of the accompanying CSS styling:

:root {
    /* Variables */
}

/* Styles go here */

Currently, I'm encountering three challenges with this setup:

The placement of the chart.js plot alongside the chat window appears fine on larger screens but becomes problematic on smaller devices like mobile phones. Is it feasible to adjust the positioning so that on larger screens, the plot is on the right of the chat window, and on smaller screens, it appears below?
The chart.js plot seems excessively wide in relation to the chat window. Is there a way to modify the widths so that the chat window occupies 60% of the screen width while the plot takes up 40%, adjusting its height accordingly?
When zooming out the webpage, the chat window shrinks while the chart.js plot expands. Is there a solution to maintain consistent widths for both elements when zooming in or out?

html css

Answer 1

Answer №1

To tackle the three issues you mentioned:

If you want to place the chart.js plot below the chat window on smaller screens, one way is to utilize media queries in CSS. You can specify different styles based on screen sizes. Here's an example of how you can adjust your CSS:

@media screen and (max-width: 768px) {
  .msger {
    flex-direction: column;
  }

  .msger-chat {
    order: 2;
  }

  .msger-inputarea {
    order: 3;
  }

  .chart-container {
    order: 1;
    width: 100%;
    height: 50vh;
  }
}

In your HTML code, wrap the chart.js plot <div> with a container element and assign it a class like chart-container.

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

This setup will ensure that the chart.js plot appears beneath the chat window on screens with a maximum width of 768 pixels.

To make the chat window take up 60% of the width and the chart.js plot occupy 40%, adjust the CSS styles for the .msger and .chart-container classes. Update the width property as shown below:

.msger {
  width: 60%;
}

.chart-container {
  width: 40%;
}

These changes allocate 60% of the available space to the chat window and 40% to the chart.js plot.

To maintain consistent widths for the chat window and chart.js plot when zooming, implement the min-width property to set a minimum width for the .msger and .chart-container classes. Add the following CSS rules:

.msger {
  min-width: 500px;
}

.chart-container {
  min-width: 300px;
}

With these adjustments, both the chat window and chart.js plot will have a minimum width even after zooming out.

I hope these suggestions are helpful!

UPDATE:

You could also explore an alternative method using CSS flexbox along with the flex-wrap property.

Here's a revised snippet of CSS code:

@media screen and (max-width: 768px) {
  .msger {
    flex-wrap: wrap;
  }

  .msger-chat {
    order: 2;
    width: 100%;
  }

  .msger-inputarea {
    order: 3;
    width: 100%;
  }

  .chart-container {
    order: 1;
    width: 100%;
    height: 50vh;
  }
}

By setting flex-wrap: wrap on the .msger class, the chat window and input area will wrap if there isn't enough horizontal space.

Ensure your HTML structure resembles the following:

<body>
  <section class="msger">
    <header class="msger-header">
      <!-- Header content -->
    </header>
    <div class="msger-chat">
      <!-- Chat window content -->
    </div>

    <form class="msger-inputarea" id="msger-input">
      <!-- Input area content -->
    </form>
  </section>

  <div class="chart-container">
    <!-- Chart.js plot -->
    <canvas id="myChart"></canvas>
  </div>
</body>

With this update, the plot should be positioned under the chat window on smaller screens while retaining its placement next to the chat window on larger screens such as mobile devices.

Answer 2

To tackle the three issues you mentioned:

If you want to place the chart.js plot below the chat window on smaller screens, one way is to utilize media queries in CSS. You can specify different styles based on screen sizes. Here's an example of how you can adjust your CSS:

@media screen and (max-width: 768px) {
  .msger {
    flex-direction: column;
  }

  .msger-chat {
    order: 2;
  }

  .msger-inputarea {
    order: 3;
  }

  .chart-container {
    order: 1;
    width: 100%;
    height: 50vh;
  }
}

In your HTML code, wrap the chart.js plot <div> with a container element and assign it a class like chart-container.

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

This setup will ensure that the chart.js plot appears beneath the chat window on screens with a maximum width of 768 pixels.

To make the chat window take up 60% of the width and the chart.js plot occupy 40%, adjust the CSS styles for the .msger and .chart-container classes. Update the width property as shown below:

.msger {
  width: 60%;
}

.chart-container {
  width: 40%;
}

These changes allocate 60% of the available space to the chat window and 40% to the chart.js plot.

To maintain consistent widths for the chat window and chart.js plot when zooming, implement the min-width property to set a minimum width for the .msger and .chart-container classes. Add the following CSS rules:

.msger {
  min-width: 500px;
}

.chart-container {
  min-width: 300px;
}

With these adjustments, both the chat window and chart.js plot will have a minimum width even after zooming out.

I hope these suggestions are helpful!

UPDATE:

You could also explore an alternative method using CSS flexbox along with the flex-wrap property.

Here's a revised snippet of CSS code:

@media screen and (max-width: 768px) {
  .msger {
    flex-wrap: wrap;
  }

  .msger-chat {
    order: 2;
    width: 100%;
  }

  .msger-inputarea {
    order: 3;
    width: 100%;
  }

  .chart-container {
    order: 1;
    width: 100%;
    height: 50vh;
  }
}

By setting flex-wrap: wrap on the .msger class, the chat window and input area will wrap if there isn't enough horizontal space.

Ensure your HTML structure resembles the following:

<body>
  <section class="msger">
    <header class="msger-header">
      <!-- Header content -->
    </header>
    <div class="msger-chat">
      <!-- Chat window content -->
    </div>

    <form class="msger-inputarea" id="msger-input">
      <!-- Input area content -->
    </form>
  </section>

  <div class="chart-container">
    <!-- Chart.js plot -->
    <canvas id="myChart"></canvas>
  </div>
</body>

With this update, the plot should be positioned under the chat window on smaller screens while retaining its placement next to the chat window on larger screens such as mobile devices.

Positioning and resizing elements based on varying screen sizes and levels of zoom

Answer №1

Similar questions

Loading Kendo JS on the client side proves to be rather time-consuming

Show full-screen images on click using Ionic framework

What is the best way to include the border-radius CSS property to a dropdown element in Ant Design?

Decoding Labels for Content

Performing JavaScript functions after fetching an XSLT page via AJAX

animation for closing the hamburger menu

Can you target an 'input' field that is within a component conditionally rendered using 'v-if'?

Regular expression for matching a CSS definition that includes a specific name and value

What is the best way to determine the height of a DIV element set to "auto"?

Ensuring the modal is stored in one central location (Bootstrap)

The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

Tips for creating consistent spacing between elements using Tailwind CSS version 3

Tips on implementing CSS to the subpar class in Vuejs

How to obtain the height of the parent screen using an iframe

Utilize jQuery function within an HTML form

What could be the reason for the extra tags being returned by YQL?

Attempting to use jQuery on click to set the background image of a div to a base64 encoded data image

Get rid of the drop-down shadow effect

Is there a common method for generating complex identifiers to be used as the HTML element's id, class, or name attributes

Strange image movement occurs when utilizing jQuery slideDown and slideUp