The ineffectiveness of setting width to 0

When I set 

@media screen and (max-width: 700px)
, aside {width: 0}, it doesn't disappear. Even after resizing the window, it remains as null space with width: 52px. What could be causing this issue and how can I resolve it?

* {
  margin:0;
  padding:0;
}

html, body {
  height: 100%;
}

body {
  background-color: #eee;
}

.wrapper {
  height: 100%;
  display: table;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

header {
  box-sizing: border-box;
  display: table-row;
  height: 50px;
  background-color: #eee;
  border-bottom: 1px solid black;
}

main {
  height: 100%;
  display: table;
  width: 800px;
  margin: 0 auto;
  background-color: #fff;
}

section {
  display: table-cell;
}

aside {
  display: table-cell;
  box-sizing: border-box;
  border-left: 1px solid black;
  width: 300px;

  /*__transition*/
  opacity: 1;
  transition: all .25s;
}

footer {
  box-sizing: border-box;
  border-top: 1px solid black;
  display: table-row;
  height: 50px;
  background-color: #eee;
}

@media screen and (max-width: 800px) {

  main {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {

  section {
    width: 100%;
  }

  aside {
    opacity: 0;
    width: 0;
  }
}
<html>
  <body>
    <div class="wrapper">
      <header>HEADER</header>
      <main>
        <section>SECTION</section>
        <aside>ASIDE</aside>
      </main>
      <footer>FOOTER</footer>
    </div>
  </body>
</html>

javascripthtmlcss

Answer №1

Instead of utilizing display: none, you have the option to include the following code:

@media screen and (max-width: 700px) {
  section {
    opacity: 0;
    width: 0;
    border: none;
    font-size: 0;
  }
}

Answer №2

Because of its property display: table-cell, it behaves like a table.

To change this behavior, simply add display: block to your existing code.

Alternatively, you can replace the code with just display: none.

For a different approach, consider the following unique styling:

* {
  margin:0;
  padding:0;
}

html, body {
  height: 100%;
}

body {
  background-color: #eee;
}

.wrapper {
  height: 100%;
  display: table;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

header {
  box-sizing: border-box;
  display: table-row;
  height: 50px;
  background-color: #eee;
  border-bottom: 1px solid black;
}

main {
  height: 100%;
  display: table;
  width: 800px;
  margin: 0 auto;
  background-color: #fff;
}

section {
  display: table-cell;
}

aside {
  display: table-cell;
  box-sizing: border-box;
  border-left: 1px solid black;
  width: 300px;

  /*__transition*/
  opacity: 1;
  transition: all .25s;
}

footer {
  box-sizing: border-box;
  border-top: 1px solid black;
  display: table-row;
  height: 50px;
  background-color: #eee;
}

@media screen and (max-width: 800px) {

  main {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {

  section {
    width: 100%;
  }

  aside {    
    display: none; 
    
    /* OR */
    
    display: table-cell;
    border: none;
    opacity: 0;
    width: 0;
    font-size: 0;
    
    /* OR */
    
    display: block;
    opacity: 0;
    width: 0;
  }
}
<html>
  <body>
    <div class="wrapper">
      <header>HEADER</header>
      <main>
        <section>SECTION</section>
        <aside>ASIDE</aside>
      </main>
      <footer>FOOTER</footer>
    </div>
  </body>
</html>

Answer №3

The reason for this issue is your reliance on display: table for the layout.

Tables have their own methods for calculating width, so specifying a width may not result in an exact match.

Consider switching to display: none as an alternative solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to have 1 million links on a single webpage?

Would the performance suffer if I were to fetch 1 million link elements and add them to the DOM? I am looking to create a navigation list at the top of my website, similar to what Apple has on their site where you can scroll left or right using your keybo ...

javascriptjqueryhtmlajaxdom

What is the process for including parameters in a javascript/jquery function?

This unique script enables you to click on a specific element without any consequences, but as soon as you click anywhere else, it triggers a fade-out effect on something else. Within the following code snippet, you can interact with elements inside $(&apo ...

javascriptjqueryparametersparam

Combining Vue.js for handling both enter key and blur events simultaneously

I have been working on a solution where pressing the enter key or losing focus on an element will hide it and display a message. However, I am facing an issue where when I press the enter key to hide the element, it also triggers the blur event. I only wan ...

javascriptvue.js

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

The results so far Expected outcome Please advise me on how to incorporate two ng-repeats within one td. When I use a span tag afterwards, the expected result is not achieved. I have used one ng-repeat in the td and the other in a span tag, which is why t ...

javascriptjqueryhtmlangularjs

The oncanplaythrough event is not functioning properly in Internet Explorer

I am facing an issue where the beep sound trigger upon receiving an API response works perfectly in Chrome and Firefox browsers, but unfortunately, it does not work in Internet Explorer. if ($scope.totalQueueList) { var audio = new Audio(); audio.s ...

javascriptangularjs

What are the steps to installing a .deb file offline using Docker?

I am planning to install a .deb file on my Docker container. In my Dockerfile, I execute the following command: RUN apt-get install -y ./fonts/ttf-mscorefonts-installer_3.6_all.deb ROOT Folder |->Dockerfile |->fonts |-> ttf ...

javascriptnode.jsdockercachingdeb

Converting CSS colors from RGBA to hexadecimal format: A step-by-step guide

Within my selenium code, I am faced with the challenge of verifying that the background color code is #192856. However, when obtaining the CSS property of the element, it returns the color in rgba format. How can I retrieve the values in hex format? quick ...

c#cssselenium-webdrivercolors

Is the variable empty outside of the subscribe block after it's been assigned?

Why is a variable assigned inside subscribe empty outside subscribe? I understand that subscribe is asynchronous, but I'm not sure how to use await to render this variable. Can someone please help me and provide an explanation? I am attempting to retr ...

javascriptnode.jsangulartypescriptsubscribe

Is there a way to retrieve the current route on a custom 404 page in Next.JS?

I have set up a custom 404 page for my Next.JS application (404.js). I want to display a message stating The route <strong>/not-a-route</strong> does not exist, but when I use Next.js's useRouter() and router.pathname, it incorrectly ident ...

javascriptreactjsnext.jsnext-router

What steps are involved in launching an outdated Angular project?

Tasked with reviving an old Angular client in my company, I found myself grappling with outdated files and missing configurations. The lack of package.json, package-lock.json, and angular.json added to the confusion, while the presence of node modules in t ...

javascriptangulartypescriptnpm

Guide to dynamically load external JavaScript script in Angular 2 during runtime

Currently, I am integrating Twitter digits for authentication purposes. To implement this feature, a small .js script needs to be downloaded and initialized. The recommended approach is to directly fetch the file from the Twitter server. In order to succe ...

javascriptangularwebpacktwitter-fabrictwitter-digits

Presenting two arrays simultaneously creates angular duplicates

Encountering an issue while trying to display two arrays containing channel information: List of channels List of subscriptions that users have opted for. channels = [ { "id": 1, "name": "arte", "service&q ...

htmlangular

Tips on creating a slow and gradual border animation that unfolds smoothly

I am looking to create an animation effect on a border, gradually revealing it like in this Codepen example. However, my specific requirements are: The previous line should not be removed, but rather shown along with the new border. The border color ...

javascripthtmlcss

Using a Javascript library within an Angular component: A comprehensive guide

I've been working on a Web-Client project that involves visualizing sensor data such as velocity and acceleration within a coordinate system. In order to display this coordinate system, I decided to use the graph.js library from https://github.com/dhu ...

javascriptangulartypescript

Guide on accessing a local image while setting the background image using JavaScript

I am trying to set a background image from a local source on my computer. Below are two lines of code, one that works and one that does not: (the local one fails) _html.style.backgroundImage = 'url("urlsourceblahblahblah")'; _html.style.backgro ...

javascripthtmlcssangularjsimage

When attempting to delete an item from Firebase using React, the re-render results in the item being

I'm currently in the process of developing an app to enhance my React skills, and I've chosen Firebase for data storage. Everything seems to be working fine as all items from Firebase are rendering properly. However, I've encountered an issu ...

javascriptreactjs

Is there a way to modify the background color of ::before when hovering over it?

I have a ul-li list and when i hover last li ::before element looks white and not so good. I want to change it when i hover the last li element. How can I achieve this? Here are my codes: <div className="dropup-content"> <ul> & ...

javascripthtmlcssreactjssass

Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

As a novice in HTML and jQuery, I am currently working on creating a portfolio site for a school project. One of the challenges I have encountered is designing a graphic that includes a text box within a resizable div element. My goal is to prevent excessi ...

htmlcsscss-position

"Optimizing Image Display in Web Browsers

Currently, I am using JavaScript to dynamically size a transparent .gif on my website. The original image size is approximately 200x200 pixels, but it's usually resized to be between 600x600 and 800x800. When viewing the resized image in IE8 and FF3, ...

javascripthtmlimagebrowserrendering

Exploring the Potential of CSS Styling within Vue.js

I am in the process of creating a website and I am looking for a way to manage my styles through Vue. I want to be able to utilize CSS with Vue, as the style of .skill-bar serves as the background of the bar, while .skill-bar-fill represents the green fil ...

javascriptcssvue.jsvuejs2vue-component