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

Is there a way to set a higher priority over the "!important" rule on my website?

Obtain date and currency formatting preferences

CSS - Retain z-index until the transition is complete

Display the div element only when the mouse is hovering over the button

I'm curious, are there any html rendering engines that can display text-based content using curl-php?

The Bootstrap grid feature is malfunctioning on both Codeply and devtools. The dimensions of the <div class="col-lg-3 col-md-4 col-sm-6"> element remain constant despite attempts to adjust them

section containing image on the left side and title and text on the right side

Tips for automatically hiding a button when the ion-content is being scrolled and displaying it again once scrolling has stopped

Tips for aligning ticks to the left on a d3 bar chart

The sticky navigation bar allows for the overlapping of additional div elements

jQuery "slide" animation without using <br>

Copying content from one website to another using JavaScript

The SrollToTop function is ineffective when used with a component in Ionic 6/Angular

Using Angular 4 for HTML 5 Drag and Drop functionality

Using @font-face to include several files for different font-weight variations

What is an alternative way to retrieve the page title when the document.title is unavailable?

When the header is given a fixed position, the modal becomes unattainable

The alignment of my Navbar Brand is off in my Navigation Bar and won't align to

Tips on linking a condition-reaction to document.querySelector

Creating a Functional Right Arrow on a Pure CSS Select Menu/Dropdown