You can do this:
Give max with and then subtract 10% (5% each side), then center square with margin auto.
CSS
.square {
background-color: blue;
width: calc(100vw - 10%);
height: 100vh;
margin: 0 auto;
}
Solution 1 :
Solution 2 :
Since you said you are new to HTML & CSS, let me give you a breif description on how to adjest widht of an element based on the viewport.
Viewport
The viewport is the area of your browser where the actual content is displayed – in other words your web browser without its toolbars and buttons. The units are vw, vh, vmin and vmax. They all represent a percentage of the browser (viewport) dimensions and scale accordingly on window resize.
Lets say we have a viewport of 1000px (width) by 800px (height):
- vw – Represents 1% of the viewport’s width. In our case 50vw = 500px.
- vh – A percentage of the window’s height. 50vh = 400px.
- vmin – A percentage of the minimum of the two.
In our example 50vmin = 400px
since we are in landscape mode. vmax – A percentage of the bigger
dimension. 50vmax = 500px.
You can use these units anywhere that you can specify a value in pixels, like in width, height, margin, font-size and more. They will be recalculated by the browser on window resize or device rotation.
case 1
Now considering your issue, I don’t see any change in width on either side, because if you see your inspector->layout->margin I can see both sides showing 64 on the screenshot you provided.
case 2
If you really do see the change in your system again. Try removing the external CSS you have mentioned to see if that’s causing any issue and then put margin:0px for html and body.
Hope this help’s you out…
Problem :
I am learning CSS, I am new to this field. Please excuse me if my questions is naive.
I have a simple HTML containing 1 div.
.square {
background-color: blue;
width: 90vw;
height: 90vh;
margin-left: 5vw;
margin-right: 5vw;
}<!doctype html>
<head>
<link href="viewport-cord.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='square'></div>
</body>I am expecting a margin of 5% of viewport width on both sides of the div. However, it seems that we have broader gap in the left side of div compared to right. I am not sure where these extra margin is coming from.
Comments
Comment posted by Rob
Note: the
Comment posted by virusrocks
I want to understand why there is more gap on left side compared to right.
Comment posted by Luís P. A.
Because you have default margin in the body, html. Just do this
Comment posted by virusrocks
Yes, I think we are getting a margin of 8px from User Agent style sheet. 8px margin is on both sides. However, still (if I don’t reset the margin of body and html to 0) left gap is around 69 pixel and right gap is 53 pixel. I measured it using taking a screenshot and using preview app on mac.
Comment posted by Luís P. A.
Certainly, if you are using only viewport measure you will get sizes from view port. From left to right you will get 5vw + (Browser default margin) and then it will ignore the right margin because is not right in mathematic (margin 10vw + 90vw + browser margins). If you set your margin, use like my answer in percentage. this will make a better adjustments and good mathematic (viewport and in the fact the margins of the elements).
Comment posted by virusrocks
That was what I also suspected but I was not sure that browser will drop its user agent styles in these cases.