When I adjust the size of my browser, the elements on my HTML page shift around

I'm facing an issue where all my elements move when I resize my browser, and I cannot figure out why.

How can I ensure that they stay in their respective positions even when the browser is resized? Is there a CSS solution for this?

Thank you!


body {
    background-color: #c3ced4;
}

.select_dev {
    width: 380px;
    height: 850px;
    background-color: #142431;
    position: absolute;
    left: 0;
    top: 0;
}

.excel_preview {
    position: absolute;
    top: 70px;
    right: 40px;
    min-width: 1450px;
    min-height: 720px;
    background-color: white;
    border-radius: 8px;
}
<!DOCTYPE html>
htmlcss

Answer №1

Utilizing percentages for height or width in your CSS makes them responsive to fluctuations in window size, adjusting based on the container's dimensions.

If you prefer these values to remain static regardless of window size changes, specifying a fixed size in pixels (px) is recommended.

To adapt sizes for specific devices like mobile phones, consider implementing media queries which can be found here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

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

Utilize CSS to vertically align buttons

One of my current projects involves creating a panel with buttons organized in columns side by side, similar to the layout shown below: However, I am struggling to achieve this desired arrangement. Below is the code I have been working on: <style&g ...

javascripthtmlcssforms

Using Reactjs Material UI Table component results in grid expansion

I'm facing an issue with my Table component nested inside a Grid component. Whenever the Table component is rendered, it causes the Grid component to expand in width. I want the Grid component to maintain its original width when the Table component is ...

htmlreactjsmaterial-ui

Styling triangles within a CSS triangle

I'm attempting to design a webpage with a fixed triangle navigation element. The issue I am encountering is that I am unable to position smaller triangles inside the larger one, as shown in the image below. https://i.stack.imgur.com/1bTj8.png As th ...

javascripthtmlcsscss-shapes

Struggling with Getting My Animation to Function Correctly

I am trying to create a JQuery Animation that will move a div covering a text box up into the border when clicked. Despite multiple attempts, I can't seem to get the animation to work properly. Any suggestions? JavaScript function moveup(title,text ...

javascripthtmlcssanimation

Problem with Jquery Ajax, failing to recognize option values

Hello everyone, please review the code snippet below... $.fn.myajax = function (options) { var defaults = { my_event: "", my_url: "", my_data: "", } var o = {}; var mydata = options.my_data; $.extend(o, default ...

javascriptphpjqueryhtmlajax

The nested ThemeProvider takes priority over the theme's style definitions

Is there a way to render a component and then apply additional rendering using useEffects in React? The issue I am facing is that when I have a component with a specific theme, each useEffect call ends up overriding the style of the original component wit ...

cssreactjsmaterial-uithemeprovider

Tips for aligning two objects side by side in HTML

Apologies for the basic question, forgive my ignorance but I am struggling with keeping two objects in the same line within the same division. Please take a look at the code below: <html> <head> <style> .search-input { width: ...

javascripthtml

Dynamically loading audio references in a foreach loop using C# MVC

One approach I am exploring involves utilizing a foreach loop to play an audio file by first storing a reference to the sound. The method in place successfully achieves this using <audio controls> <source src="~/Sounds/@item.Irish_Tr" id="@ ...

c#htmlasp.net-mvc

Is there a way to prevent Bootstrap 4's grid system from splitting column content when resizing the browser window?

Just delving into Bootstrap's grid system for the first time here, so bear with me if this sounds silly. My goal is to create a 3 column page that is responsive, featuring an image and a Spotify player in each column. Everything looks good on a full ...

htmlcssbootstrap-4

It seems that FireFox does not fully support IFrame Data URIs

Whenever I attempt to load a PDF Data URI into an iframe (for example, src="data:application/pdf;base64,...") in FireFox (version 18.0.2 [latest release], on OSX), it ends up triggering a download window instead. Just take a look at the website JSPDF.com ...

htmlfirefoxiframe

I am unable to load any HTML files in my VueJS iframe, except for the index.html located in the public

Within the template of my vue component, I am utilizing the following code: <iframe width="1000vw" height="600vh" src="../../public/myHtmlFile.html"></iframe> Unfortunately, the file specified in the src attribut ...

javascripthtmlvue.jsiframe

Retrieve all text within a <div> element excluding the content within an <h5> tag using XPath

I have been researching and experimenting with different solutions for the issue at hand, but unfortunately, none of them have proven successful so far. Here is the HTML code that I am working with: <div class="detalhes_colunadados"> <div clas ...

htmlxpathsiblings

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The current date picker does not meet ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to display and conceal menu depending on initial view and scrolling

On my website, I have implemented two menus - one to be displayed when the page loads and another to show up when a scroll occurs. You can view my page here. The goal is to have the white part visible when the position is at the top, and switch to the blu ...

javascriptjqueryhtmlcss

What is the method for extracting JavaScript code as data from a script tag?

I have a file external (let's say bar.js) function qux() {} Then in my webpage, I include it using the script tag: <script type="text/javascript" src="bar.js"></script> I am looking for a way to retrieve the JavaScript code from within ...

javascriptjqueryhtml

Is there a way to retrieve the ID from a span and convert it into a string format?

let wordSpan = '<span class="we w_o_r_d_s" id="we" contenteditable="false">we</span>' console.log(wordSpan.id); console.log(wordSpan.attr('id')); console.log(wordSpan.getAttribute('id')); let newDiv = document.c ...

javascriptjqueryhtml

Text spilling out of a floated division

I'm currently working on a fluid layout design, but I've encountered an issue with the left menu text overflowing. I can't seem to get overflow:hidden to work properly. You'll notice that in the blue area, I have highlighted the text t ...

csshtmloverflow

Retrieving InnerHTML of a Rendered DOM Element in AngularJS

Can I retrieve the innerHTML code of a rendered element that contains an ng-repeat loop? Here is an example: <div id="container"> <div ng-repeat="e in ctrl.elements>{{e.name}}</div> </div> ...

javascripthtmlangularjsdomrender

The initial value set for the innerHTML property of a div element

I have a requirement in my application where I need to confirm if the container div is empty before adding specific text elements to it. The innerHTML of this div is frequently created and removed within the app, so it's crucial to validate its emptin ...

javascripthtml

Ways to stop click propagation in the case of a parent anchor link containing a button among its children

Every time I click on the Link parent, it triggers a click event on the button as well. I want these events to be independent. <Link className="product-item__link" to={`/products/${product.category}/${product.id}`} > <div className ...

javascripthtmlcssreactjs