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
CodePudding user response:
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>