Div element remains fixed in width while zooming in

I'm encountering an issue with a centered div, where the width is set to 50% and the max-width is set to 100%. When I zoom in, the width remains constant but the height increases. Despite setting the max-width to 100%, why does this occur? And most importantly, how can I rectify it? Thank you.

#outer {
border-radius: 10px;
background-color: #F5F5F5;
border: 1px dotted black;
width: 50%;
max-width: 100%;
margin: auto;
margin-top: 1%;
}

<div id='outer"></div>

P.S: I prefer using percentages instead of pixels.

htmlcss

Answer №1

It seems like I've grasped the concept of what you're looking for. The issue lies in the placement of your <div>.

As you may be aware, a percentage is a relative measurement. Specifically, when using width: 50%, it's relative to the width of its parent.

Situation 1

If the parent's width is set at 100%, then your div's width will always be 50% of that, translating to 50% of the screen, regardless of zoom level.

Situation 2

When the parent div has a fixed width (such as 500px), your div's width will equate to 50% of 500px, which amounts to 250px. This value will shift with changes in zoom level.

You can view examples of both scenarios in this jsfiddle link for better understanding: https://jsfiddle.net/jormaechea/om91sody/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adapting the colors of various elements throughout the entire webpage

My goal is to incorporate color-switch buttons on my webpage. When these buttons are clicked, I want the existing colors to change to different shades. However, my challenge lies in the fact that these colors are used for various elements such as backgro ...

javascriptjqueryhtmlcsscolors

creating folding effect using javascript and css with divs

I've been searching high and low on the internet for a solution like this, but so far I haven't had any luck. It seems like there might be a JavaScript script out there that dynamically changes the css -webkit-transform: rotateY(deg) property. ...

javascriptjquerycsscarousel

How to reduce the text input field size in Django Bootstrap for a sleeker design

I have a form with various elements like textfields, radio buttons, and text areas. The textfield size is currently too small and does not look good: I'm wondering how I can make the textfields slightly larger and why the height of the text area is s ...

htmlcssdjangotwitter-bootstrap

The level of transparency linked with text in a blockquote

I've spent hours on this and I'm completely lost. Even though I believe my code is correct, it keeps telling me it's wrong. I don't know where to go from here. The task requires adding a style rule for the blockquote element that chan ...

csshtmlblockquote

What are the specifications for the opacity, width, and height of the background image in Bootstrap's

My current project has specific requirements that I need assistance with: I need the background image of the jumbotron to fit the width of the page and have its height scaled proportionally. The opacity of the jumbotron's background image should be ...

htmlcsstwitter-bootstrap

Stop the form submission from redirecting or refreshing by utilizing JavaScript

I'm facing an issue with a page on my website that includes textboxes generated from php, along with two buttons - GetData and SaveData. My goal is to enable users to press the enter key while editing a textbox and trigger the same action as clicking ...

htmlformssubmit

Can we set a restriction on the maximum number of children a particular div can contain?

I'm trying to find a way to restrict the number of children in a div. The concept is that there is a selected commands div where you can drag and drop available commands (essentially buttons) from another div called available commands. However, I wan ...

javascriptjquerycssdrag-and-drop

Using Vue.js to pass an image URL as a prop for CSS animation by converting it to a CSS variable

Need help with a component that features a hover animation displaying 4 rotating images: animation: changeImg-1 2.5s linear infinite; @keyframes changeImg-1 { 0%, 100% { background-image: url('images/wel1.png'); } 25% { background-image: ur ...

cssvue.js

The utilization of media within the meta in Next.js is not allowed

Recently, I came across an interesting article about PWAs on web.dev. The article discusses color schemes and at one point, they talk about it in detail, I'm currently working with Next.js and decided to try implementing the following code snippet: & ...

htmlnext.jsmeta-tags

Why can't the keyboard access the close button in Autocomplete's Free Solo feature?

While exploring the Material UI Autocomplete Free Solo feature, I observed that the "Clear input" button can be clicked on but cannot be accessed via keyboard. https://i.stack.imgur.com/NdVD9.png In my quest to understand why this design choice was made, ...

htmlmaterial-uiaccessibilitytabindex

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

javascripthtml

The styles within a media query are not being successfully implemented

update: issue resolved. I discovered that there was a lingering media query in the css file that was meant to be removed. Also, I corrected some errors in the code. Thank you all for your help – it's now working perfectly. I have a set of html and ...

htmlcssmedia-queries

Strategies for quickly landing in top Google search results

I run a website for classified ads... Whenever users post a new ad, it gets automatically included in our dynamic sitemap (xml). Our sitemaps were submitted to Google via Webmaster Tools about two months ago. While some of the ads are indexed, it is tak ...

phphtmlxmlsearchseo

Applying CSS blur filter to container without affecting its content

I'm trying to create a hover effect where an image within a parent div transitions into a blurred state. However, I've run into an issue where if the image is set to 100% width/height of the parent div, there is a visible bezel of the parent&apos ...

htmlcssfiltercss-transitionsblur

Emphasizing sections using a specific class for paragraph highlighting

Is it possible to dynamically change the style of paragraphs based on certain classes? Let's say we have a text with a list of p elements and we want to modify the styles of paragraphs that come after specific classes, such as 'alert' or &ap ...

javascripthtmlcss

The components are not anchored to the window

In the header, I require: The logo to be positioned on the left side of the banner (without space) Both the banner and logo to always be centered on the page regardless of screen size Four images that should always be at the top right corner of the windo ...

csstwitter-bootstraptwitter-bootstrap-3

How can I consistently position a dialog box (tooltip) on top of a JQuery UI modal Dialog?

Utilizing CSS and Javascript to display tooltips upon mouseover for various inputs has been effective in most cases, however I am encountering an issue with inputs within a Jquery UI Dialog modal. The tooltips appear correctly in front of the dialog when i ...

jquerycssjquery-ui

Dropdown menu remains unable to open

One of the dropdown menus on my website is not retracting back properly, but only on the contact page where a Google map is displayed. The issue looks like this: I've tried tweaking the CSS code without success. What could I be missing? Should I prov ...

htmlcssdrop-down-menu

Transform HTML into PNG with Canvas2image, followed by the conversion of PNG into BMP

Is there a direct way to convert HTML to BMP? After searching online, it seems that there isn't a straightforward method. So, I decided to convert HTML to PNG using canvas JS and then use PHP to convert the file from PNG to BMP. I have a question abou ...

javascriptphphtmlcanvas

An image appears fractured when placed within a table cell, yet displays perfectly when positioned outside of the table

I am currently facing an issue with loading image files in table cells using jQuery. Here is the code snippet from my View: <table id="personDataTable" border="1"> <tr style="font-size:large; height:auto"> <th width="10 ...

jqueryhtmlimagemodel-view-controller