While we are familiar with the concept of writing media queries in CSS to adjust properties based on the screen width, I am curious if it is possible to specify a fraction of the current screen width as the width property.
For instance, could setting the width to 0.5 times the current size effectively result in always half of the current screen width being assigned as the element's width?
Is it possible to set the width as a fraction of the current screen width?
Absolutely, you can achieve this by utilizing Viewport Units
1vw equals 1/100th of the width of the viewport.
To specify width, utilize vw with 100vw representing the viewport's width (the browser window width).
For height, use vh with 100vh equivalent to the viewport's height.
If you're looking for a specific width, try using width:50wh.
Check out this resource for more detailed information: viewport units
Experiment using the resize event:
$( window ).resize(function() {
var current_window_width = $(this).width();
var new_window_width = current_width * 0.5;
$( selector ).css('width' , new_width+'%');
});
Have you considered utilizing '%' of the viewport width instead?
.example-selector{
width:75%;
}
However, keep in mind that this approach may not be effective for certain elements with absolute or relative positioning that are nested within one another. In those cases, using 'vw' is recommended as suggested in previous responses.
When dealing with fractional pixels, things can get complicated. However, if your percentage values result in whole pixel values (like 50.5% of 200px in this case), you can expect sensible and predictable behavior.
For example:
<div id="percentage">
<div class="first">50%=100px</div>
<div class="second">50.5%=101px</div>
<div class="third">51%=102px</div>
</div>
<br />
<div id="pixels">
<div class="first">50px</div>
<div class="second">50.5px</div>
<div class="third">50.6px</div>
<div class="fourth">51px</div>
</div>
#percentage
{
width: 200px;
color: white;
}
#percentage .first
{
width: 50%;
height: 20px;
background-color: red;
}
#percentage .second
{
width: 50.5%;
height: 20px;
background-color:green;
}
#percentage .third
{
width: 51%;
height: 20px;
background-color:blue;
}
#pixels
{
color: white;
}
#pixels .first
{
width: 50px;
height: 20px;
background-color: red;
}
#pixels .second
{
width: 50.5px;
height: 20px;
background-color:green;
}
#pixels .third
{
width: 50.6px;
height: 20px;
background-color:blue;
}
#pixels .fourth
{
width: 51px;
height: 20px;
background-color:red;
}
If you want your example to work perfectly, just use the following:
width: 50vw
This will ensure that it always occupies 50% of the current screen size, even if you manually resize the window. If you also want to adjust the div's height when the screen height changes, simply add:
height: 50vh
And if you wish to make the div occupy the entire screen, just include the following CSS code:
{
width: 100vw;
height: 100vh;
}
To learn more about the definitions of vw or vh, visit https://developer.mozilla.org/en/docs/Web/CSS/length
I am trying to retrieve the results of an insert operation from my views.py file in JSON format. The view I have looks like this: added={} if request.method=='POST': #Post method initiated. try: for id in allergies: ...
I recently created a small website using HTML, CSS, Bootstrap, and JavaScript files. The main page is named index.html. However, I encountered an issue when trying to deploy it to my Heroku app (with the Node.js buildpack) as it kept showing an error messa ...
Within my Angular application, I am utilizing mat-checkbox to showcase a collection of items accompanied by checkboxes. The values assigned to these checkboxes are dynamic and are configured through the [value] or [checked] input property within the mat-ch ...
I am currently working on an XMLHttpRequest and I have a specific requirement. If the XHR fails, I would like to perform another action (such as reading a local file), but I want to execute this outside of the XHR function itself. In addition, my project ...
I am facing an issue with creating a list of markers on my Google Maps. I want to make a link that will display the values of each marker on the list, as it is looped through using getJson and <li> is only appended during the loop. Could someone ass ...
Is there a more efficient way to maintain the active state of a secondary menu list item? I have a UserControl with a menu list item: <ul class="nav nav-pills"> <li id="menu-overview">overview</li> <li id="menu-portfolio" clas ...
I've been trying to work on something similar, but I keep running into roadblocks. Essentially, my issue lies within a for loop $(document).ready(function() { var foo = function() { for (var i = 0; i < 10; i++) { $('#event_&a ...
I'm looking to add a drop-down menu similar to an <options> tag within an HTML form. However, I also want users to have the ability to type in their own input if they choose, in addition to selecting from a predefined list of options. Essentiall ...
container.html <div ngIf="externalCondition"> <!--Initially this is false. Later became true --!> <my-component #MyComponentElem > </my-component> <button [disabled]= "!myComponentElemRef.myDetailsF ...
Exploring some basic HTML here. In Google Chrome (v57) and Firefox (v55), the two cells to the right have equal heights, while in Safari (v11) they do not. In Safari, the top cell adjusts to fit its content, leaving the remaining space for the bottom cell. ...
Currently, I have been experimenting with setting up a comet server for my application on an Ngnix server using the following plugin: https://github.com/wandenberg/nginx-push-stream-module Due to the restrictions of GNU/GPL, I am unable to utilize the pro ...
Take a look at the following code snippet: ... <p class="entry-content">{{ entry.content|safe }}</p> ... The issue arises when it is displayed as follows: ... <p class="entry-content"></p> {{ entry.content|safe }} ... Interestin ...
I am trying to modify the height and background color of the <hr> HTML tag. However, even though the height and color are changing, it appears that the background color opacity is decreasing slightly. What could be causing this issue? Here is my cod ...
Currently, I am working on a webpage that includes notifications along with options to mark them as read individually or all at once. However, when attempting to use my loop function to mark all notifications as read, I noticed an issue. let markAllAsRead ...
After attempting to import a web HTML CSS template into my self-made MVC, I encountered an issue. While the template works properly on its own, it fails to connect to the CSS files and display proper styles when accessed through my controller. Instead, onl ...
Modify input value on click event Here is the code snippet: <div class="inputQty"> <span> <small class="up">^</small> <small class="down">V</small> </span> <input type="text" ma ...
Seeking assistance for an issue with canvas flickering in JavaScript. I've successfully cleared the canvas before redrawing my game character, but I'm struggling to prevent screen flickering as the character moves. Any help would be greatly appre ...
I need help to prevent the user from clicking on an un-selected tab before clicking on the button in the current tab. Any assistance would be greatly appreciated. Thank you. <!-- Nav tabs --> <ul class="nav nav-tabs"> ...
Can someone assist me, please? I am having an issue where the carousel displays on the page, but the images are not showing and the buttons do not work. Please refer to the CSS + HTML snippet below: #my-carousel .carousel-inner .item { width: 100%; ...
Here is a link to the working code: http://jsfiddle.net/gR2y4/ Unfortunately, when I attempt to use this code, it doesn't work as expected. $.ajax({ type: "POST", url: "xx.aspx" }).done(function (response) { var resp = response; alert(resp._TypingUs ...