When zooming in, the content exceeds the boundaries of the screen, creating a cropped effect. Conversely, when zooming out,

Question

When zooming in, the content exceeds the boundaries of the screen, creating a cropped effect. Conversely, when zooming out,

I'm working on a layout that includes a sidebar and a flexbox container with 3 boxes, where the middle one is scrollable.

My issue arises when I zoom in, causing content to go beyond the visible screen. On the other hand, zooming out leaves a white blank space on the right side.

To provide more context and seek assistance, I've included a video link and code snippet:

Watch the video here

* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
}

.sidebar {
  width: 12%;
  height: -webkit-fill-available;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  overflow-y: scroll;
}

.container {
  position: fixed;
  left: 12%;
  height: 100%;
  width: 100%;
}

.navbar {
  background-color: grey;
}

...

... (continued)

...

The provided CSS and HTML markup showcases how the layout is structured with each element's styling. Any suggestions or guidance would be highly appreciated!

html css flexbox

Answer 1

Answer №1

Through the implementation of relative values instead of fixed ones, I successfully resolved the issue. The modifications made include:

Adjusted width of .container class from 88% to 100% to allow it to expand freely.
Given that the sidebar occupied 12% of the total space, the remaining space was divided equally between both containers by changing the width of the .box class from 100% to 44% ((100%-12%)/2=44%).
The width of the .item class was set to 32.3%, totaling approximately 97%, with the excess 1% allocated as margin instead of a fixed 15px margin (An additional 1% padding was included for stability).

Note: Utilizing relative values is an effective solution in such scenarios. It's advisable to rely on relative values when developing websites.

Below is the revised code snippet:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 12%;
  height: -webkit-fill-available;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  overflow-y: scroll;
}

.container {
  position: fixed;
  left: 12%;
  height: 100%;
  width: 100%;
}

.navbar {
  background-color: grey;
}

.navbar h2 {
  text-align: center;
}

.fluid-container {
  background-color: rgb(193, 224, 236);
  height: 100%;
  display: flex;
  width: 100%;
}

.box {
  width:44%;
  background-color: black;
  border: 1px solid red;
}

.item {
  width: 32.3%;
  height: 100%;
  padding:1%;
  border: 1px solid green;
  margin:1%;
  background-color: sandybrown;
}

#item1 {
  height: calc(100vh - 100px);
}

#item2 {
  overflow-y: scroll;
  height: calc(100vh - 100px);
}

#item3 {
  height: calc(100vh - 100px);
}

.items-container {
  display: flex;
}

<div class="sidebar">
  <h2>Title 1</h2>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
    consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
    fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
    perspiciatis assumenda corrupti.</p>

... [Remaining HTML code omitted for brevity] ... 

</div>

Answer 2

Through the implementation of relative values instead of fixed ones, I successfully resolved the issue. The modifications made include:

Adjusted width of .container class from 88% to 100% to allow it to expand freely.
Given that the sidebar occupied 12% of the total space, the remaining space was divided equally between both containers by changing the width of the .box class from 100% to 44% ((100%-12%)/2=44%).
The width of the .item class was set to 32.3%, totaling approximately 97%, with the excess 1% allocated as margin instead of a fixed 15px margin (An additional 1% padding was included for stability).

Note: Utilizing relative values is an effective solution in such scenarios. It's advisable to rely on relative values when developing websites.

Below is the revised code snippet:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 12%;
  height: -webkit-fill-available;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  overflow-y: scroll;
}

.container {
  position: fixed;
  left: 12%;
  height: 100%;
  width: 100%;
}

.navbar {
  background-color: grey;
}

.navbar h2 {
  text-align: center;
}

.fluid-container {
  background-color: rgb(193, 224, 236);
  height: 100%;
  display: flex;
  width: 100%;
}

.box {
  width:44%;
  background-color: black;
  border: 1px solid red;
}

.item {
  width: 32.3%;
  height: 100%;
  padding:1%;
  border: 1px solid green;
  margin:1%;
  background-color: sandybrown;
}

#item1 {
  height: calc(100vh - 100px);
}

#item2 {
  overflow-y: scroll;
  height: calc(100vh - 100px);
}

#item3 {
  height: calc(100vh - 100px);
}

.items-container {
  display: flex;
}

<div class="sidebar">
  <h2>Title 1</h2>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
    consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
    fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
    perspiciatis assumenda corrupti.</p>

... [Remaining HTML code omitted for brevity] ... 

</div>

Answer 3

Answer №2

To ensure your layout works correctly, make sure to include height: 100%; and width: 100%; in the CSS for both the HTML and body elements. Additionally, set width: 88%; on your container class, as your sidebar is occupying 12% of the width, resulting in a total of 100%.

It's crucial to note that setting a fixed width like 220px on each item will prevent them from resizing responsively. Instead, use width: 100%; for better adaptability when zooming in or out.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 12%;
  height: -webkit-fill-available;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  overflow-y: scroll;
}

.container {
  position: fixed;
  left: 12%;
  height: 100%;
  width: 88%;
}

.navbar {
  background-color: grey;
}

.navbar h2 {
  text-align: center;
}

.fluid-container {
  background-color: rgb(193, 224, 236);
  height: 100%;
  display: flex;
  width: 100%;
}

.box {
  width: 100%;
  background-color: black;
  border: 1px solid red;
}

.item {
  width: 100%;
  height: 100%;
  border: 1px solid green;
  margin: 15px;
  background-color: sandybrown;
}

#item1 {
  height: calc(100vh - 100px);
}

#item2 {
  overflow-y: scroll;
  height: calc(100vh - 100px);
}

#item3 {
  height: calc(100vh - 100px);
}

.items-container {
  display: flex;
}

<div class="sidebar">
  <h2>Title 1</h2>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
    consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
    fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
    perspiciatis assumenda corrupti.</p>
</div>
<div class="container">
  <div class="navbar">
    <h2>Header Section</h2>
  </div>
  <div class="fluid-container">
    <div id="box1" class="box">
      <h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
      <div class="items-container">
        <div id="item1" class="item">
          <h2>Title 1</h2>
        </div>
        <div id="item2" class="item">
          <h2>Title 2</h2>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
            quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis...
        </div>
        <div id="item3" class="item">
          <h2>Title 3</h2>
        </div>
      </div>
    </div>
    <div id="box2" class="box">
      <div class="items-container">
        <div id="item1" class="item">
          <h2>Title 1</h2>
        </div>
        <div id="item2" class="item">
          <h2>Title 2</h2>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit...dge

Answer 4

To ensure your layout works correctly, make sure to include height: 100%; and width: 100%; in the CSS for both the HTML and body elements. Additionally, set width: 88%; on your container class, as your sidebar is occupying 12% of the width, resulting in a total of 100%.

It's crucial to note that setting a fixed width like 220px on each item will prevent them from resizing responsively. Instead, use width: 100%; for better adaptability when zooming in or out.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 12%;
  height: -webkit-fill-available;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  overflow-y: scroll;
}

.container {
  position: fixed;
  left: 12%;
  height: 100%;
  width: 88%;
}

.navbar {
  background-color: grey;
}

.navbar h2 {
  text-align: center;
}

.fluid-container {
  background-color: rgb(193, 224, 236);
  height: 100%;
  display: flex;
  width: 100%;
}

.box {
  width: 100%;
  background-color: black;
  border: 1px solid red;
}

.item {
  width: 100%;
  height: 100%;
  border: 1px solid green;
  margin: 15px;
  background-color: sandybrown;
}

#item1 {
  height: calc(100vh - 100px);
}

#item2 {
  overflow-y: scroll;
  height: calc(100vh - 100px);
}

#item3 {
  height: calc(100vh - 100px);
}

.items-container {
  display: flex;
}

<div class="sidebar">
  <h2>Title 1</h2>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
    consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
    fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
    perspiciatis assumenda corrupti.</p>
</div>
<div class="container">
  <div class="navbar">
    <h2>Header Section</h2>
  </div>
  <div class="fluid-container">
    <div id="box1" class="box">
      <h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
      <div class="items-container">
        <div id="item1" class="item">
          <h2>Title 1</h2>
        </div>
        <div id="item2" class="item">
          <h2>Title 2</h2>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
            quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis...
        </div>
        <div id="item3" class="item">
          <h2>Title 3</h2>
        </div>
      </div>
    </div>
    <div id="box2" class="box">
      <div class="items-container">
        <div id="item1" class="item">
          <h2>Title 1</h2>
        </div>
        <div id="item2" class="item">
          <h2>Title 2</h2>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit...dge

Answer 5

Answer №3

Include the following snippet at the beginning of your HTML file, inside the head section

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 6

Include the following snippet at the beginning of your HTML file, inside the head section

<meta name="viewport" content="width=device-width, initial-scale=1.0">

When zooming in, the content exceeds the boundaries of the screen, creating a cropped effect. Conversely, when zooming out,

Answer №1

Answer №2

Answer №3

Similar questions

Problem with modals not triggering within the iDangero.us swiper

Creating a Parent Container to Maintain the Height of the Tallest Offspring

Creating HTML elements using JavaScript

What methods does webpack use to minify CSS links within HTML code?

Is the <ul> tag aligning to the left?

Outline of a transparent right trapezoid shape

How can I make a clickable <div> easily navigable with tab functionality?

How to dynamically style NavLink using a variable in react-router-dom with Emotion?

Storing a database row value into a PHP variable using an SQL query

Email sent upon form submission

How can I determine the specific font used in an image through Google Fonts?

What is the process for capturing a screenshot of a specific DOM element using Intern JS?

Height of Nav-Links in Bootstrap 4

Tips for linking to a page and dynamically adding a class to the body after it has been fully loaded

Ways to trigger the audio tags with keypress and click events

Convert a list into nested JSON items by utilizing the getJSON function

Unusual images emerge following certain elements in this unique gallery

I am curious to see the number of people who have made their selection

No defined parent for 'appendChild' operation

How can we begin to create this dynamic animation?