Troubleshooting problem with media queries in CSS

As a newbie to HTML and CSS, I've been encountering difficulties with media queries. My website seems to only function properly when viewed in a resolution of 1920x1080, so I attempted to implement some media queries in my CSS to cater to other resolutions as well. However, I'm struggling to create a media query for the 1280x1024px resolution. Interestingly, none of my CSS changes seem to take effect when the browser is not in fullscreen mode; they only work correctly in fullscreen.

In addition, I am unable to set a width of 1280 for this particular media query because it will interfere with another one that was designed for the 1280x768 resolution.

If anyone could offer assistance with this issue, it would be greatly appreciated.

@media screen and (height:1024px) {
.white_round_background{
 margin-left: 320px;
 height: 170vh;
 width: 160vw;
 background-color: rgb(197, 183, 183);
 }

.menunav {
left: 38%;
top: 4%;
}

.system_selection {
 margin: 420px 0 0 0px;
 height: 95px;
 }

#logo_sliding_menu {
margin-top: 710px;
}

}
htmlcss

Answer №1

Hmm... my suggestion would be to consider the importance of the order in which you write your CSS code.

It's crucial to arrange your media queries from highest to lowest, like this:

@media only screen and (max-width: 600px) {}

and then follow it up with

@media only screen and (max-width: 500px){}

Moreover, instead of specifying a specific height, try using the max-height property. This way, the styling will apply to devices with resolutions smaller than that particular height. Aiming for an exact height like 1024px might not cover all variations, such as windows with heights below 1023px or above 1025px...

.yourClass {
 /* CSS applied to devices above 1024px height */
}
@media only screen and (max-height: 1024px){
  .yourClass {
     /* CSS targeted at devices under 1024px height */
  }
}
@media only screen and (max-height: 955px){
  .yourClass {
     /* CSS intended for devices under 955px height */
  }
}
@media only screen and (max-height: 500px){
  .yourClass {
     /* CSS specified for devices under 500px height */
  }
}
/* Keep adding more queries as needed */

You can also experiment by combining min-height and max-height in one query:

@media screen and (min-height: 400px) and (max-height: 900px)
{
  .yourClass {
    /* CSS designed for devices between 400px and 900px tall */
  }
}

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

Is it possible to designate a specific font family for italic font style and a different font family for regular font styles in VSCode?

Is it possible to use the "Operator Mono" font only for italic style and another font, such as "Fira Code," for other styles like bold, regular, semibold, etc. in VSCode? I attempted to change the font family to: "editor.fontFamily": "'Operator Mono ...

cssvisual-studio-codefonts

The items in the Bootstrap dropdown are not displaying

I am currently working on a project using Angular 12, and I encountered an issue with my Bootstrap dropdown menu not displaying any items. Below is the HTML code snippet causing the problem: <nav class="navbar navbar-expand navbar-dark"> ...

htmlangularbootstrap-4angular-ui-bootstrap

Troubleshooting a dysfunctional Vue.js component

I am currently facing a challenge in getting components to function properly. Interestingly, without the component, everything seems to be working fine (as per the commented code). Here is my HTML snippet: <strong>Total Price:</strong> <sp ...

javascripthtmllaravelcomponentsvue.js

Tips for refreshing the page upon Geolocation request

I am working on a HTML5 project that requests geolocation from the user. Here is an image of what it looks like: My main query is: Is there a way to refresh the page automatically once the user grants permission to share their location? Are there any Jav ...

javascripthtml

Every time I employ window.location, the Iframe becomes nested

I am experiencing an issue with my HTML structure: <html> <body> This is the container of the iframe <iframe src="/foo.html"> </iframe> </body> </html> (/foo.html) <html> <script type="text/javascript"> $( ...

phpjavascriptjqueryhtmliframe

Creating a variable with the use of @include

Here's a question that I need help with. I have a SASS @include function that dynamically calculates the font size. h2 { @include rfs(2rem); } I use this to adjust the font size based on screen resolution, but I'm facing an issue where a gre ...

csssass

My form does not receive the Bootstrap classes when using the jQuery script

**Why isn't my jQuery script coloring the rows as expected when certain conditions are met (I italicized the specific part of the code)?** Here is the HTML CODE for the POLL: <form id="pollForm" class="mb-4"> <d ...

javascripthtmljquerycssbootstrap-5

Stop the div from expanding because of oversize text in Bootstrap

I have the following HTML source code for a Bootstrap card: <div class="card shadow-none card-fluid mb-3 mb-md-5"> <div class="row"> <div class="col-md-3 col-lg-3 mb-3 mb-sm-0"> <img class="img-fluid rounded" ...

htmlcss

Encountering a problem with ng-repeat when working with a JSON

Having a bit of trouble displaying the keys and values from a JSON object in an HTML table using ng-repeat. The JSON object is coming from the backend, but for some reason, it's not showing up on the frontend. I know there must be a simple mistake som ...

javascripthtmlangularjs

JavaScript function to substitute instead of writing

function replaceHTML(a,b) { var x = document.getElementById("canvas_html").contentDocument; x.innerHTML = b; } Although the current function works fine, I would like to update it to directly replace the existing content instead of writing new con ...

javascripthtml

Whenever I include "border:0" in the styling of my hr element, a significant number of hr elements fail to appear on the screen

I have been experimenting with using hr elements to divide sections of my web page. Here is a snippet of the CSS code I am using: hr{ content: " "; display: block; height: .1px; width: 95%; margin:15px; background-color: #dfdfdf; ...

htmlcsswebfrontend

What sorcery does Facebook use to alter the URL without triggering a page reload?

Similar Question: How can I update window location without a reload and # hack? Facebook and Ajax What method does Facebook use to change the URL without reloading the page? In the past, Facebook utilized the hash (#) symbol to prevent the page f ...

javascriptjqueryhtmlajaxfacebook

Change a div to scroll vertically instead of expanding to accommodate its content

I am facing an issue with the layout I have created. It consists of a scrollable list of items in the center, with additional content above and below it in a column. The challenge is to make the list occupy all available empty space within the column witho ...

htmlcss

Using the method window.open() will launch a new window instead of opening a new tab

When the page loads, I am using JavaScript to call window.open. window.open(url, "Test Page"); Initially, it opens a new Chrome window and displays the page. However, when I use the same JavaScript code after the page has loaded, it opens the page in a n ...

javascripthtml

CSS allows for the creation of fixed bars that remain at the top of the

I am looking to create a fixed bar that is off-center with a scrolling background. The code I have so far either places the bar on the surface but fixes it to the background, or it positions the bar beneath the image and fixes it to the window - neither ...

htmlcsscss-position

Looking to adjust the fill pattern dynamically

I previously implemented this code: Is there a way to modify the fill image on my 3 buttons to display in 3 distinct colors instead? ...

javascripthtmlcanvasfill

How to Align React Material UI Grid with Varying Row Counts in Each Column

Objective My goal is to design a component that showcases details about a device, including an icon and its current status. For instance: Approach I've Taken I am attempting to accomplish this by structuring a MUI Grid in the form of a 2x2 grid la ...

htmlcssreactjsmaterial-ui

Angular JS: Grabbing Text from a Specific div and Copying it to Clipboard

I recently developed a Random Password Generator using Angular JS. Here is how the output appears in the application: <div data-ng-model="password" id="password"> <input class="form-control" data-ng-model="password" id="password" placeholder=" ...

javascriptjqueryhtmlangularjs

Display or conceal DIVs with multiple attribute values according to the selected value in a dropdown menu using the jQuery Filter Method

I am attempting to display or hide multiple services, each with a custom attribute called data-serviceregion, which may have multiple values based on the selected option from the dropdown. <form class="book-now"> <select name="region" id="region" ...

javascriptjqueryhtml

Ajax: The requested resource does not have the 'Access-Control-Allow-Origin' header. As a result, access is not permitted from origin 'null'

I recently started learning about ajax and followed a tutorial. However, I encountered an error when trying to run an HTML file along with a linked JavaScript file. Since browsers cannot make requests to file://, I have set up an http-server on port 8080 ...

javascriptjqueryajaxhtml