Div disappears when resizing window

Question

I am a newbie in html/css. I am trying to do an A/B test with Google Optimize, changing the HTML and CSS of the page, and my main section disappears when I resize the window.

I have looked at other similar topics but couldn't find any solution.

Here's the HTML code of the section that disappears:

    <div id="lp_fullwidth_banner" data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid mobile-hide vc_custom_1526308007661 vc_row-no-padding vc_row-o-content-middle vc_row-flex" style="position: relative; box-sizing: border-box; width: 1730px; left: -295px; height: 452.2px !important;"><div class="wpb_column vc_column_container vc_col-sm-12 vc_hidden-xs" style=""><div class="vc_column-inner " style=""><div class="wpb_wrapper" style="">
    <div class="wpb_raw_code wpb_content_element wpb_raw_html" style="">
        <div class="wpb_wrapper" style="">
            <div class="banner-title" style="">
<h1 style="">
Bien acheter à <span id="lp_ville" style="">Paris</span>, c'est vraiment simple !<br>
<span style="">Expert de votre marché local et s’appuyant sur les meilleures technologies, <strong>Mon&nbsp;Chasseur&nbsp;Immo</strong> cherche et trouve pour vous le bien idéal.</span>
</h1>
</div><div style="">
  <span style="">Nos chasseurs immobiliers cherchent et négocient pour vous le meilleur bien au meilleur prix</span>

  <div class="vc_empty_space" style="height: 32px;"><span class="vc_empty_space_inner"></span></div>

            <ul class="fa-ul">
  <li style=""><span class="fa-li" style=""><i class="fa fa-check-square-o"></i></span> Un chasseur immobilier dédié, rémunéré au succès</li>
  <li style=""><span class="fa-li"><i class="fa fa-clock-o"></i></span> Divisez par 10 votre temps de recherche</li>
  <li style=""><span class="fa-li"><i class="fa fa-eur"></i></span> 6% d'économie en moyenne sur votre budget</li>
</ul>
</div>
        </div>
    </div>
</div></div></div></div>

And here's the CSS of the page:

div.page-special > div > div:nth-of-type(2) {
  left : -250px !important;
}

div.page-special > div > div:nth-of-type(3) {
  width : 40% !important;
  float : right !important;
}

div.banner-title > h1 {
  width : 683px;
}

div.wpb_raw_code > div > div:nth-of-type(1) {
  width : 683px;
}

div.wpb_raw_code > div > div:nth-of-type(2) {
  background-color : rgba(0, 0, 0, 0.55);
  color : rgb(255, 255, 255);
}

div.page-special > div > div:nth-of-type(8) {
  display : none;
}

div.page-special > div > div:nth-of-type(9) > div > div > div {
  display : none;
}

div.vc_custom_1513333530435 {
  display : none;
}

div.page-special > div > div:nth-of-type(7) > div > div > div > div > div:nth-of-type(2) {
  display : none;
}

div.vc_custom_1513270690175 > div > div:nth-of-type(2) > div > p {
  display : none;
}

div.page-special > div > div:nth-of-type(11) {
  display : none;
}

div.page-special > div > div:nth-of-type(13) {
  display : none;
}

div.vc_custom_1526384528576 > div {
  background-color : rgb(255, 255, 255);
  text-align : center;
}

div.vc_custom_1526384528576 > div > div > div:nth-of-type(1) > h2, div.vc_custom_1526384528576 > div > div > div:nth-of-type(1) {
  text-align : center !important;
}

div.vc_custom_1526384424755 {
  background-color : rgba(229, 229, 229, 0.34) !important;
}

div.page-special > div > div:nth-of-type(19) {
  display : none;
}

div.page-special > div > div:nth-of-type(20) > div > div > div {
  display : none;
}

div.wpb_raw_code > div > div:nth-of-type(2) {
  font-size : 18px;
  padding : 20px;
  margin : 20px;
}

div.page-special > div > div:nth-of-type(3) > div > div:nth-of-type(1) {
  background-color : rgb(242, 242, 242);
}

div.page-special > div > div:nth-of-type(3) > div > div:nth-of-type(1) > div {
  font-size : 17px;
  color : rgb(0, 56, 94);
  width : 339px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(1) > div {
  font-size : 18px;
  color : rgb(255, 255, 255);
  height : 60px;
  background-color : rgba(0, 0, 0, 0.61);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(1) {
  width : 564px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(2) {
  width : 564px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(1) > div {
  padding : 15px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(2) > div {
  padding : 15px;
  height : 60px;
  font-size : 18px;
  color : rgb(255, 255, 255);
  background-color : rgba(0, 0, 0, 0.61);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(1) {
  height : 380px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(1) > div {
  height : 60px;
  font-size : 18px;
  color : rgb(255, 255, 255);
  padding : 15px;
  background-color : rgba(0, 0, 0, 0.61);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(2) > div {
  padding : 15px;
  height : 60px;
  font-size : 18px;
  background-color : rgba(0, 0, 0, 0.61);
  color : rgb(255, 255, 255);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(1) {
  border-top-width : 10px;
  border-right-width : 10px;
  border-bottom-width : 10px;
  border-left-width : 10px;
  border-top-color : rgb(255, 255, 255);
  border-right-color : rgb(255, 255, 255);
  border-bottom-color : rgb(255, 255, 255);
  border-left-color : rgb(255, 255, 255);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(2) {
  border-top-width : 10px;
  border-right-width : 10px;
  border-bottom-width : 10px;
  border-left-width : 10px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(2) {
  border-top-width : 10px;
  border-right-width : 10px;
  border-bottom-width : 10px;
  border-left-width : 10px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(1) {
  border-top-width : 10px;
  border-right-width : 10px;
  border-bottom-width : 10px;
  border-left-width : 10px;
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(1) > td:nth-of-type(2) {
  border-top-color : rgb(255, 255, 255);
  border-right-color : rgb(255, 255, 255);
  border-bottom-color : rgb(255, 255, 255);
  border-left-color : rgb(255, 255, 255);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(2) {
  border-top-color : rgb(255, 255, 255);
  border-right-color : rgb(255, 255, 255);
  border-bottom-color : rgb(255, 255, 255);
  border-left-color : rgb(255, 255, 255);
}

div.vc_custom_1513270690175 > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(1) {
  border-top-color : rgb(255, 255, 255);
  border-right-color : rgb(255, 255, 255);
  border-bottom-color : rgb(255, 255, 255);
  border-left-color : rgb(255, 255, 255);
}

#lp_fullwidth_banner {
  float : left;
  height : 452.2px;
  background-size : cover;
  width : 60% !important;
  left : 0px !important;
}

div.page-special > div > div:nth-of-type(2) {
  background-repeat : no-repeat no-repeat !important;
}

div.header-menu-inner > div:nth-of-type(2) > p > span {
  font-size : 24px;
}

div.header-top {
  display : none;
}

div.header-menu-inner > div:nth-of-type(2) > p {
  text-align : center;
}

div.page-special > div > div:nth-of-type(3) {
  background-color : rgb(242, 242, 242);
}

Any idea why this div disappears when resizing the window?

Thanks very much for your help

Answer 1

You defined a hard width value in pixels for your container so it will always stay that way. If you want the size linked to the size of the window you can use percent. Check and run next code snippet, i commented out some css properties that do not help or has no effect you provided:

  div.page-special>div>div:nth-of-type(2) { left: -250px !important; } div.page-special>div>div:nth-of-type(3) { width: 40% !important; float: right !important; } /* div.banner-title { width: 683px; } */ div.wpb_raw_code { /* width: 683px; */ width: 50%; } div.wpb_raw_code>div>div:nth-of-type(2) { background-color: rgba(0, 0, 0, 0.55); color: rgb(255, 255, 255); } div.page-special>div>div:nth-of-type(8) { display: none; } div.page-special>div>div:nth-of-type(9)>div>div>div { display: none; } div.vc_custom_1513333530435 { display: none; } 

  <div id="lp_fullwidth_banner" data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid mobile-hide vc_custom_1526308007661 vc_row-no-padding vc_row-o-content-middle vc_row-flex" > <div class="wpb_column vc_column_container vc_col-sm-12 vc_hidden-xs" style=""> <div class="vc_column-inner " style=""> <div class="wpb_wrapper" style=""> <div class="wpb_raw_code wpb_content_element wpb_raw_html" style=""> <div class="wpb_wrapper" style=""> <div class="banner-title" style=""> <h1 style=""> Bien acheter à <span id="lp_ville" style="">Paris</span>, c'est vraiment simple !<br> <span style="">Expert de votre marché local et s'appuyant sur les meilleures technologies, <strong>Mon&nbsp;Chasseur&nbsp;Immo</strong> cherche et trouve pour vous le bien idéal.</span> </h1> </div> <div style=""> <span style="">Nos chasseurs immobiliers cherchent et négocient pour vous le meilleur bien au meilleur prix</span> <div class="vc_empty_space" style="height: 32px;"><span class="vc_empty_space_inner"></span></div> <ul class="fa-ul"> <li style=""><span class="fa-li" style=""><i class="fa fa-check-square-o"></i></span> Un chasseur immobilier dédié, rémunéré au succès</li> <li style=""><span class="fa-li"><i class="fa fa-clock-o"></i></span> Divisez par 10 votre temps de recherche</li> <li style=""><span class="fa-li"><i class="fa fa-eur"></i></span> 6% d'économie en moyenne sur votre budget</li> </ul> </div> </div> </div> </div> </div> </div> </div>