Element with a width of x VW does not appear to react to window resize

May 19, 2022

I have two divs in a table, each should take up 50% width, adding up to the entire width of the browser window, for that I decided to use VW, specifically 50vw, but when resizing the window, the divs do not respond… how can I fix it?

#market_and_industry_research_section{
    width: 100vw;
    height: 59vw;
    padding: 0;
    margin: 0;
}

market_and_industry_research_section_table{
    width: 100vw;
    height: 59vw;
    margin: 0;
    padding: 0;
}

#market_and_industry_research_section_description{
    width: 50vw;
    height: 59vw;
    background-color: blue;
    margin: 0;
}

#market_and_industry_research_section_files{
    width: 50vw;
    height: 59vw;
    background-color: red;
    margin: 0;
}

<table id="market_and_industry_research_section_table">
       <tr>
           <td id="market_and_industry_research_section_description">
               <div>
                   <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
                   <div></div>
                   <p>Market and industry research</p>
               </div>

           </td>
           <td id="market_and_industry_research_section_files">
               <div>
                   <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
                   <div></div>
                   <p>Market and industry research</p>
               </div>
           </td>
       </tr>
   </table>

PLEASE LOOK AT THIS GIF

https://imgur.com/a/QuKhRgm

>Solution :

This is being caused by your img tags. I’ve added the CSS below targeting all img tags, but feel free to change it to class or ID targets. Basically, the size of the images will not change when you resize, but setting them to max-width: 100%; height: auto; will allow everything to resize.

#market_and_industry_research_section {
  width: 100vw;
  height: 59vw;
  padding: 0;
  margin: 0;
}

market_and_industry_research_section_table {
  width: 100vw;
  height: 59vw;
  margin: 0;
  padding: 0;
}

#market_and_industry_research_section_description {
  width: 50vw;
  height: 59vw;
  background-color: blue;
  margin: 0;
}

#market_and_industry_research_section_files {
  width: 50vw;
  height: 59vw;
  background-color: red;
  margin: 0;
}

/* Added CSS */
img {
 max-width: 100%;
 height: auto;
}

<table id="market_and_industry_research_section_table">
  <tr>
    <td id="market_and_industry_research_section_description">
      <div>
        <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
        <div></div>
        <p>Market and industry research</p>
      </div>

    </td>
    <td id="market_and_industry_research_section_files">
      <div>
        <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
        <div></div>
        <p>Market and industry research</p>
      </div>
    </td>
  </tr>
</table>