CODEWITHSUNDEEP
htmlcssresponsive-design
Louis93
Louis93

Reputation: 3923

How do I deal with the issue of my divs being distorted greatly when zoomed in?

There are two issues in the code I've written that I'm unsure how to resolve:

How the page looks on Google Chrome

Google Chrome

That my two columns of divs do not scale together as I zoom in and out.

Image

If I zoom in past a certain amount, the divs bust out their containers and distort the webpage completely.

enter image description here

Here's the fiddle with the relevant HTML and CSS code for anyone who'd like to look at it.

I would like for the divs to be scaled up or down in position when the user zooms in or out.

EDIT: Up to line #130 are the relevant CSS tags describing the elements that I coded for this page, the rest of the CSS is from Bootstrap and is irrelevant (to this problem)

Upvotes: 2

Views: 2903

Answers (5)

DACrosby
DACrosby

Reputation: 11440

You're looking for a responsive design.

Basically, make it two columns instead of 3 positioned blocks. get rid of all of the explicit widths, and lose the absolute positioning. Then set display:inline-block (or as @ShannonHochkins said you could use float:left. I just prefer inline-blocks) and %-based widths.

Here ya go: http://jsfiddle.net/daCrosby/Dtcrn/1/

I removed a lot of extra code (<head>, <script>, etc) - it's not extra on your site, it just makes the jsFiddle cleaner.

Here's a bare-bones example of how to mae the 2 columns:

HTML

    <div id="nav_bar">
        [ ... ]
    </div>

    <div id="about_block">
        [ ... ]
    </div>

CSS

#nav_bar,
#about_block{
    display:inline-block;
    vertical-align:top;
    margin-left:-4px;
    width:25%;
}
#about_block{
    width:75%;
}

Upvotes: 0

Arun lama
Arun lama

Reputation: 46

you have to design the liquid page . Make the pages responsive and your above problem will simply disappear. Also for the responsive design page better to use bootstrap. Bootstrap will make you easy for responsive design. Here is the link to download the bootstrap all the instruction to use it... http://twitter.github.io/bootstrap/

Upvotes: 0

Daniel Forbes
Daniel Forbes

Reputation: 624

to do that you have to assign a value to the width or container width of the div. like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
body{
        font-size:36px;
        font-family:Arial, Helvetica, sans-serif;
        }
.mega_cont{
    margin:0 auto;
    padding-top:10%;
    width:710px;
    }
.super_cont_lhs{
    float:left;
    width:300px;
    margin-right:5px;
    }

.cont1{
    width:100%;
    float:left;
    height:auto;
    background-color:#000;
    margin-bottom:10px;
    color:#CCC;
    }
.cont2{
    width:100%;
    float:left;
    height:auto;
    background-color:#000;
    color:#CCC;
    }
.super_cont_rhs{
    width:400px;
    float:left;
    height:auto;
    background-color:#F60;
    }
</style>
</head>

<body>

<div class="mega_cont">
<div class="super_cont_lhs">
    <div class="cont1">P - S P E C T R A</div>
    <div class="cont2">B E G I N</div>
</div>
<div class="super_cont_rhs">
P-Spectra enables practicing engineers to design seismic retrofit solutions with supplemental dampers using performance based design. 
</div>
</div>
</body>
</html>

Upvotes: 1

vals
vals

Reputation: 64164

The bad news is that it is not the zoom that breaks your design, it's the browser change in dimensions.

Try setting the zoom to 50%, and then changing the browser window to half the size. Your display is again correct, isn't it ?

Now keep the zoom at 100%, and just change the browser dimensions. It breaks anyway, doesn't it ?

When you mix pixels and % in the dimensions, your layout is highly dependent on the size of the browser. To avoid that, you can use only pixels, or only %, but not mixed. (Or mixed controlling very well where you mix them !)

When you zoom in, and don't change your browser size, it's like you make the browser size smaller (according to the new zoom factor)

Upvotes: 1

Shannon Hochkins
Shannon Hochkins

Reputation: 12175

What's your desired effect? When they zoom in, it's as if the whole page is scaled? or you want the background etc to remain static and only zoom in the foreground content?

Short of that, you can disable the scale, so that these types of distortions can never happen:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Upvotes: 2

Related Questions