CODEWITHSUNDEEP
javascriptjqueryhtmlcss
PESfcs
PESfcs

Reputation: 115

Css - Is it possible to make an element move when screen being resized in order to make it fit the screen

This is the link for the code - link to jsfiddle

and here's the code -

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>


    <style>
        .can_con {
            border: 1px solid #b6ff00;
            position: absolute;
            top: 25px;
            left: 600px;

        }

        li {
            font-size: 60px;

        }         

    </style>
</head>
<body>

    <ul>
        <li>Some Text 1</li>
        <li>Some Text 2</li>
        <li>Some Text 3</li>
    </ul>

    <div class="can_con">
        <canvas id="#myCan" width="600" height="200" style="border:1px solid #f00;"></canvas>
    </div>


</body>
</html>

Now what I would like to know is if there's a way to make the canvas element not disappear when the screen been zoomed in.

I mean that the current state is that the canvas element going to the right side of the screen and I would like to avoid this.

So thanks for any kind of help

Upvotes: 0

Views: 74

Answers (3)

bladespinner
bladespinner

Reputation: 56

You can make your canvas be moved bellow the <ul> if you put both of them in a container which is floated left if there is not enough space for both of them.

HTML:

 <div class='col'>    
        <ul>
            ...
        </ul>
    </div>
    <div class='col'>
        <div class="can_con">
            <canvas ...></canvas>
        </div>
    </div>

CSS:

.col{
    float:left;
}
.col:last-of-type:after{
    content:"";
    display:table;
    clear:both;
}

Fiddle: http://jsfiddle.net/7pt6uw53/5/

Upvotes: 0

llernestal
llernestal

Reputation: 566

You can use float and box-sizing

.can_con {
    width:50%;
    float:right;
    box-sizing: border-box;
}
.can_con canvas{
    width:100%;
    display:block
}
ul {
    width:50%;
    float:left;
    box-sizing: border-box;
}
li {
    font-size: 60px;  
}

and remove width and height from the <canvas>tag

<canvas id="#myCan" style="border:1px solid #f00;"></canvas>

Updated fiddle: http://jsfiddle.net/7pt6uw53/4/

Upvotes: 1

Pawan Dubey
Pawan Dubey

Reputation: 11

Instead of using px use em or % to make your layout responsive.

Upvotes: 0

Related Questions