CSS styles not detected after device orientation change

I'm encountering an issue with my CSS styling for a layout in landscape mode on mobile devices. The styling works perfectly when the page is loaded in landscape mode, but if I load it in portrait mode and then change the orientation to landscape, the portrait layout remains instead of switching to the landscape layout.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 

        .qv-overlay-container{
            top:0px;
        }
.........

}

Any ideas on how to resolve this problem?

Answer №1

Consider using

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px),
(orientation : landscape) {...}


Description

This code snippet utilizes the 'and' keyword to combine various media features and types within a media query.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : landscape) {...}

The provided media query will be activated if the device type is screen, the viewport width falls between 320px and 667px, and the orientation is landscape.


In media queries, a list separated by commas functions similarly to the logical 'or' operator. If any of the media queries in a comma-separated list are true, the associated styles or style sheets will be applied. Each query in the list is treated independently, so operators used in one query do not affect the others. This allows for targeting different media features, types, and conditions with comma-separated media queries.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px),
(orientation : landscape) {...}

In this example, if the screen device has a viewport width between 320px and 667px, the first part of the media statement, '@media screen and (min-device-width: 320px) and (max-device-width: 667px)', would return true. Even if the device fails the landscape orientation check in the second query, the overall statement would still be true. Similarly, if the device is in landscape mode with a viewport width of 800px, the first query would fail due to the viewport width, but the second query would succeed, resulting in the entire media statement being true.

Source

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

Using the PhoneGap Back Button to gracefully exit the Application

My current project involves developing Mobile Apps using PhoneGap (Cordova 2.2), JQuery, and Javascript. The landing page is the Login Page. However, after successfully logging in and reaching the Dashboard Page, pressing the BACK BUTTON redirects me back ...

The footer refuses to stay positioned at the bottom of the page

Can you help me locate the CSS style for the footer? #footer { background-color: #000; bottom: 0px; color: #fff; clear: both; text-align: center; padding: 5px; } What is the best way to ensure the footer is positioned at the bottom of ...

What is the best way to maintain the current position in a component while interacting with another component?

I have a component that displays a collection of cards with images. There is a button that toggles between showing another component and returning to the original list of cards. The issue I am encountering is that every time I return to the list of cards, ...

Tips for aligning a div within another div using ReactJs

I'm having trouble positioning the children div at the end of the parent div in my code using reactJs, NextJs, and styled-components. Here is the ReactJS code: <a href={links[indexImg]} target="_blank" > <Carousel image ...

What is preventing ShowViaLink() from functioning properly in Firefox and Internet Explorer?

I am facing an issue with my webpage where the navigation does not work on Firefox or IE, but it works perfectly fine on Chrome. I suspect that the problem lies in this code, as when I made changes to it, the navigation stopped working on Firefox & IE: ...

jQuery navigation is experiencing issues due to conflicting buttons

I am currently developing a web application that features two buttons in the header: Share and Options. When a button is clicked, its related content expands and collapses when clicked again. The issue arises when the user clicks on the share button and th ...

Display interactive content according to radio button selection

I have 4 boxes, labeled a,b,c,d. When the user selects box a, specific content should be loaded: If image a is picked, load content 1 If image b is picked, load content 2 If image c is picked, load content 3 If image d is picked, load content 4 I want ...

Utilizing a combination of CSS and JavaScript, the traffic light can be altered to change based on

**I stumbled upon this online code snippet where a timer is controlled in CSS. I'm trying to figure out how to control it with JavaScript, but all my attempts have failed so far. Is there anyone who can help me solve this issue? What I'm attempti ...

Two dropdown menus opening simultaneously

Recently, I encountered an issue while using a dropdown menu within a div. Even though it was functioning properly, I noticed that when I included two dropdown menus on the same page, clicking on the first one would cause both the first and second dropdown ...

I am experiencing difficulties with my custom font not functioning properly

I've experimented with the following code: @font-face { font-family: Jua; src: url('/fonts/jua.ttf'); } @font-face { font-family: Jua; src: url('..../fonts/jua.ttf'); } @font-face { font-family: Jua; src: url('.../fonts/jua.t ...

What is the best way to incorporate parallax scrolling in the center of a webpage?

I am trying to implement a parallax scrolling effect in the middle of my page, but it seems to be causing issues once I reach that section while scrolling. I attempted to use intersection observer, but unfortunately, it did not resolve the problem. const ...

How can you assign a div ID to an image with a backlink included?

I need assistance in centering an image with a back link inside a div id, positioned 850px to the left. Additionally, I require another Div Id containing text centered on the same line within that same 850px space. Below is my CSS: #container3 > div { ...

What is the method for showcasing an h1 heading and an unordered list link side by

Can you help me align my h1 and ul elements on the same line in my header? I want to have my logo and navigation links next to each other (This extra text is just filler) Below is the code snippet: HTML: <div id="header"> <h1>Logo</h1> ...

I am facing issues with applying my CSS styles to my PHP include files correctly

After facing an issue with my previous post due to unclear information and improper code presentation, I realized that the root cause was not related to a duplicate question. So, here is a new post with detailed information. In my project, I have created ...

Encountering a Tailwindcss error while attempting to compile the CSS file

Struggling to grasp Tailwind CSS as I try to compile the CSS but keep encountering errors. Despite following numerous tutorials, this persistent error continues to hinder my progress. This is the specific error message that keeps popping up: $ npm run bui ...

Implement a dynamic card display using Bootstrap to ensure optimal responsiveness

Does anyone know how to create a card view using Bootstrap in HTML and CSS? https://i.sstatic.net/3hIsf.png I've been trying to replicate the image above with no success. Here is the code I have so far: <link href="https://stackpath.bootstrap ...

What is the best way to add animation to my `<div>` elements when my website is first loaded?

I am looking for a way to enhance the appearance of my <div> contents when my website loads. They should gradually appear one after the other as the website loads. Additionally, the background image should load slowly due to being filtered by the wea ...

Modify the color of the matSnackbar

I'm having trouble changing the snackbar color in Angular using Angular Material. I tried using panelClass in the ts file and adding it to the global css, but the color remains unchanged. Any suggestions on how to resolve this? I am still new to this ...

Convert Soundcloud thumbnail into a printable format using the @media print CSS rule

For those wanting to add an embedded Soundcloud player on a blog: <iframe width="500" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/271188615&color=%23ff5500&auto_p ...

A photograph displayed within a container using Bootstrap, positioned on the right-hand side

I'm facing an issue with my container setup that includes row > col > img. I need the image to be positioned close to the page border. So far, I have tried making the site responsive using margin-right: -n px, but it doesn't work on mobil ...