Reputation: 83
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
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