Applying a percentage width to any inner element of a page will typically result in that element taking a percentage of its parent container's width.
Is there a way to specify the width of an inner element as a percentage of the overall Body width, rather than the default behavior?
Extra Details: The Body width can vary depending on the device. If the device width is above 1440px, the Body width will be set at 1440px; for smaller devices, the Body width will be set to 100%.
It's not recommended to customize your <body>.
Instead, create a container using a combination of viewport units and max-width.
.container {
width: 100vw;
max-width: 1440px;
height: 100vh;
margin: 0 auto;
background-color: green;
}<div class="container"></div>One way to achieve responsive design is by utilizing viewport units.
<div class="container"> /** Width:900px; **/
<div class="box"> /** 100% of BODY, not of parent div **/
</div>
</div>
<style>
.container {
background-color: blue;
width:30%;
padding: 20px;
}
.box {
background-color: yellow;
width: 100vw;
}
</style>
Alternatively,
You can determine the width of the body using JavaScript and assign a percentage of that width to other elements.
Get body width:
document.body.clientWidth;
Assign width to HTML element:
document.getElementById('element_id').setAttribute("style","width:500px");
To ensure that an element's width always matches the width of the body, you can utilize viewport units.
For example, 1vw corresponds to 1% of the width of the viewport's initial containing block, typically the body itself.
If you aim for something to occupy 20% of the body's width, you simply need to set its width to width: 20vw.
This approach remains consistent regardless of how deeply nested the element is within the DOM, as it adjusts proportionally to the screen size at the time of page load.
For further insights on viewport units, check out: https://css-tricks.com/fun-viewport-units/
Is there a way to achieve a material UI style Select component without using the material UI library in my project? I'm interested in moving the label to the top left corner when the Select is focused. export default function App({...props}) { retu ...
My interest lies in utilizing web templates, such as the one referenced here:- templete However, within its details tab, it specifies that the following software is required:- Adobe Photoshop CS+ Sublime Text2 or later, Notepad++, Dreamweaver CS5.5+(Co ...
Is there a way to use purgeCSS with component level .scss files (filename.module.scss) in order to remove unused CSS? The hashed classnames make it tricky, especially in a next.js app that heavily relies on module.scss files for styling. This thread here ...
In my current project, I am utilizing MUI in conjunction with React. To specifically style the iPad resolution using MUI breakpoints, I have implemented the following code snippet: contentBox:{ width:"10%", paddingLeft:"10p ...
This code snippet is for a web app that tracks the number of losses in a game. The problem arises when trying to retrieve the value, which returns undefined. Every time I reference the username variable, it returns undefined. document.addEventListener(&a ...
Can someone assist me with fetching data from a table where the valid_from date is less than a specified date (excluding the current date)? I have a table that looks like this: view my table here For instance, if my date is 02-04-2015, I would want to re ...
I am working on developing a Login application with a landing page using React Router and Redux. In order to have a Sidebar that is always present in all the components within the application, I have setup the Sidebar component as a route that is constantl ...
When you navigate to an album (for example, Nature because I'm still working on the others) and select one of the images, they all gradually fade out while the selected image appears on the screen. What's actually happening is that the selected i ...
I've been tackling the challenge of creating a style switcher for my website. Through utilizing .append() and if and else statements, I managed to make it work successfully. Take a look at the code below: HTML <select name="active_style" id="lol" ...
I am currently learning how to use material ui. My goal is to customize the loading bar's CSS. I checked the documentation and utilized colorPrimary classes. However, the changes are not appearing as expected. Could you please guide me on how to resol ...
var listLis=document.getElementById('list'); const addbutton=document.querySelector('.fa-plus') const inputBar=document.querySelector('.show') function showInput(e){ inputBar.classList.toggle('show') } addbutt ...
Currently, I am in the process of developing a responsive grid system by using a max-width of 980px to convert my fixed PX widths to percentages. However, I am facing some challenges in updating the heights that are also set in PX to %. Could anyone provid ...
Is there a way to identify overflow on floating elements? It's important to note the difference between setting overflow to visible or hidden. overflow: visible; overflow: hidden; Do all floated elements inherently contain overflow? Why is it chal ...
I have dynamically added a class using AngularJS, but it seems to not be functioning correctly. As I am new to AngularJS, I would appreciate any suggestions to resolve this issue. Below is my HTML code: <div class="col-md-15 col-sm-3" ng-repeat="data i ...
Currently, I am working with ReactJS and ANTD. My modal has been adjusted with paddings to center-align the text, but now I want to enhance the design. Here is the desired look: https://i.stack.imgur.com/qef7n.png This is how it appears at the moment: htt ...
I am currently working on a menu design for a website and encountered an unusual issue while testing it in Firefox. In the provided fiddle link, you can view the menu layout where hovering over the information button should display a submenu directly below ...
I'm currently working on developing a website. All of my pages have a common menu bar that I would like to include from a separate HTML file. Is there a way to include HTML files in order to address this concern? If so, what is the syntax for imple ...
I am currently utilizing Bootstrap 5 and experimenting with setting up a nested flex layout that occupies the entire window. One of the flex items should be filled by a "stretchy" canvas element, ensuring there are no scrollbars present. However, when I a ...
I am currently incorporating Angular Material's cards in a material grid. Here is the code snippet that I am working with: http://codepen.io/anon/pen/YWwwvZ The issue at hand is that the top row of images extends off the screen at the top, and the b ...
I've encountered an issue with the background transparency in the following demo. For some reason, it's not working properly. .figure .caption-mask:hover { background: rgba(0, 0, 0, 0.0); } I'm attempting to remove the opacity f ...