Troubleshooting problem with media queries in CSS

Question

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;
}

}

html css

Answer 1

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 */
  }
}

Answer 2

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 */
  }
}

Troubleshooting problem with media queries in CSS

Answer №1

Similar questions

What is the best way to prevent 2 divs from overlapping on a webpage?

display and conceal a division by clicking a hyperlink

Tips for implementing validation in JavaScript

"Want to extend the current date (Y-m-d) by a few days? Here

Certain issues arise when adjusting the padding within the background color of solely the inline text element

Having trouble inserting a hyperlink using the <a> element into a list item (<li>) tag

Align a component vertically in a FlexBox using Material UI

Is it possible that CSS files are not being excluded from content scripts in manifest.json?

I can't figure out why my jQuery isn't recognizing the :nth-child(2) selector

What is the best way to perform an action in the database using JavaScript without needing to refresh the page

The submission button in Bootstrap 3 becomes disabled upon clicking, preventing the data from being successfully transferred to the database

Multiple web pages utilizing Angular app/widget

Random Exclamation Point Appears in Outcome of PHP HTML-Email

background with alternating stripes to decorate the border of a div

Is there a way to increase the total of each row by two when a button is clicked?

Utilizing and incorporating distinct html elements on a separate webpage

Styling JavaFX ChoiceDialog with CSS

Incorporate a website design template into your Visual Studio project

Apply a class to each consecutive element following the current one until reaching a child element with a

I have come across this building error, what do you think is the cause of it?