When my screen measures 1700px wide, a width of 100% in CSS appears significantly narrower than a width of 500px

Question

When my screen measures 1700px wide, a width of 100% in CSS appears significantly narrower than a width of 500px

Currently, I am working on designing a responsive layout for a 3D globe. The code snippet that stores the structure is as follows:

<div class="text-center main">
      <canvas id='globe' width='100%' height='100%'></canvas>
</div>

Initially, when setting fixed dimensions of 700px, the globe displays perfectly on my screen. However, to ensure responsiveness on mobile devices, I need it to adjust accordingly without breaking. It's intriguing how specifying a percentage value of 100% resulted in a smaller size compared to 500px. Increasing the percentage further to around 200 or 300% seemed to resolve the issue. Can anyone shed light on why this occurs?

html css

Answer 1

Answer №1

(Check out this code on Codepen: http://jsfiddle.net/hmen49yj/ )

Avoid using percentage values for width and height in the canvas element.

Using css for setting dimensions is not recommended as it will stretch or shrink the canvas. Instead, utilize javascript to dynamically adjust the size of the canvas based on its container:

function resizeCanvas(){
    var canvas = $('#globe');
    canvas.width(canvas.parent().width());
    canvas.height(canvas.parent().height());
}
resizeCanvas();
$("body")[0].onresize = resizeCanvas;

Answer 2

(Check out this code on Codepen: http://jsfiddle.net/hmen49yj/ )

Avoid using percentage values for width and height in the canvas element.

Using css for setting dimensions is not recommended as it will stretch or shrink the canvas. Instead, utilize javascript to dynamically adjust the size of the canvas based on its container:

function resizeCanvas(){
    var canvas = $('#globe');
    canvas.width(canvas.parent().width());
    canvas.height(canvas.parent().height());
}
resizeCanvas();
$("body")[0].onresize = resizeCanvas;

Answer 3

Answer №2

I suggest using this method...

  <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
    *{
        margin:0;
        padding:0
    }
    .main{
        position:absolute;
        width:100%;
        height:100vh;
        background: green;
    }
    #globe{
        position:relative;

        width:70%;
        height:20vh;
        background: red;
    }
    .text-center{
        text-align: center;
    }
</style>
</head>
<body>

<div class="text-center main">
    <canvas id='globe'></canvas>
</div>

</body>
</html>

Answer 4

I suggest using this method...

  <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
    *{
        margin:0;
        padding:0
    }
    .main{
        position:absolute;
        width:100%;
        height:100vh;
        background: green;
    }
    #globe{
        position:relative;

        width:70%;
        height:20vh;
        background: red;
    }
    .text-center{
        text-align: center;
    }
</style>
</head>
<body>

<div class="text-center main">
    <canvas id='globe'></canvas>
</div>

</body>
</html>

When my screen measures 1700px wide, a width of 100% in CSS appears significantly narrower than a width of 500px

Answer №1

Answer №2

Similar questions

How can text be concealed within an input field?

Display the GIF when the mouse hovers over it, but ensure it plays just a single time

Struggling to find a way to showcase API data on a HTML site

Please submit the form to log in with your credentials

CSS for a Div with a Subtle Curve at the Bottom

Is there a way to retrieve the ID by using the autocomplete feature to search for a user's first name and last name in PHP

I can't understand why my body width is so disproportionately larger than usual

The function of style.marginRight differs from that of style.marginLeft

Material UI allows for the creation of numbered lists with ease. This

Move the divs within the overflow container by sliding them, then take out the initial element and append it to the end

Angular does not display a loading indicator in the header

Is it possible to reverse the effects of @media queries for min/max width and height?

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

Guide to retrieving a user's current address in JSON format using Google API Key integrated into a CDN link

Tips for enabling a flexbox item to extend beyond its container

What is the most effective way to extract content values from different divs for calculation using jQuery?

Viewing HTML web pages using Mozilla Firebox

Customizing padding and margin in material-UI styles

Paypal Payment Plans on a Monthly Basis Utilizing the Bootstrap Pricing Slider

What is the best way to arrange div elements in this particular manner using CSS?