CODEWITHSUNDEEP
htmlcssresponsive-design
Gabriel
Gabriel

Reputation: 83

Make CSS DIV blocks responsive

I have this code which allows me to placed various content into the fixed-placed CSS-defined div blocks which works marvellously - BUT sometimes I would need such page to be responsive - do you think it can be done? I have included the code:

#page_content  {
   min-height: 2000px;
}
    
#rectangle1  {
background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/rectangle1.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: 153px;
    width: 479px;
    z-index: 4;
    top: 48px;
    left: 29px;
    position: absolute;
}

#rectangle2  {
    background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/rectangle2.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: 153px;
    width: 856px;
    z-index: 4;
    top: 48px;
    left: 524px;
    position: absolute;
}

#rectangle3  {
    background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/rectangle3.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: 884px;
    width: 520px;
    z-index: 4;
    top: 48px;
    left: 1403px;
    position: absolute;
}

#rectangle4  {
    background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/rectangle3.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: 701px;
    width: 1351px;
    z-index: 4;
    top: 229px;
    left: 29px;
    position: absolute;
}

#background  {
    background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/background.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: 2000px;
    width: 2000px;
    z-index: 3;
    top: 0px;
    left: 0px;
    position: absolute;
    background-color: rgb(0,0,0);
}

.page_content_bkg  {
   width: 2000px;
   height: 2000px;
   left: 0px;
   top: 0px;
   display: block;
}

.container_div  {
   position: relative;
   width: 2000px;
   margin-bottom: 0px;
   margin-right: auto;
   margin-top: 0px;
   margin-left: auto;
}

.spacing_div  {
   min-height: 0px;
   height: 0px;
}

*:focus  {
   outline-style: none;
}

.full_width  {
   position: relative;
   padding: 0px;
   margin: 0px;
   min-width: 2000px;
}

ains  {
   text-decoration: none;
}

html, body  {
   height: 100%;
   background-color: #FFFFFF;
}

body  {
   -webkit-text-size-adjust: none;
   height: 100%;
   padding-bottom: 0px;
   padding-top: 0px;
   padding-right: 0px;
   padding-left: 0px;
   margin-bottom: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-left: 0px;
}
  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

<!-- (sg_cms) -->
<!--  -->
<!-- (sg_emit "sg_prototype_content/title.xml") -->
</head>
<body>
 <div id="page_div">
  <div class="full_width" id="page_content">
   <div class="container_div">
  <div id="background" class=""></div>
  <div id="rectangle1" class="">
    <iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe>
  </div>
  <div id="rectangle2" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
  <div id="rectangle3" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
  <div id="rectangle4" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
  
    <div id="pagesize_gap" style="height:2000px;"></div>
    <div id="clear_footer"></div>
   </div><!-- /prototype container_div -->
  </div><!-- /page_content:full_width -->
 </div><!-- /page_div -->

<!-- (sg_chau) -->
<!-- (sg_suppress  -->  <!--) -->
</body>
</html>

Upvotes: 1

Views: 3648

Answers (1)

Senthil Kumar
Senthil Kumar

Reputation: 592

Use css media queries to change the screen sizes of particular target. It will matches the screen it will stretches..

@media only screen and (max-width: 500px) {
  #rectangle1  {
    background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/rectangle1.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: inherit;
    width: 50%;
    z-index: 4;
    top: 20%;
    left: 10%;
    position: absolute;
  }
}

By this way you can achieve a responsive stretchable layouts.. Use every pixels as to converted percentage..

For nice results you can use Bootstrap css..

Upvotes: 2

Related Questions