The mobile CSS fails to adjust properly when I rotate the screen to landscape mode

In my code, I have styled the style.css file for mobile devices. The code works perfectly for mobile portrait size, but when I rotate the device to landscape mode, it calls the default CSS. How can I resolve this issue?

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    }

In addition to this, the code includes:

@media (min-width: 481px) {}

This is targeting all sizes like tablets, PCs, etc.

I tested this in the web developer tools in Google Chrome.

css

Answer №1

One issue arises when the device is rotated, causing the screen size to be greater than 480 px

@media screen and (orientation:portrait) {
    ...Custom CSS Code
}
@media screen and (orientation:landscape) {
     ...Custom CSS Code
}

Implementing this solution can resolve the problem

Alternatively, you may determine the landscape resolution in order to target the appropriate media query.

In the case of iPhone 5, your media query should resemble the following:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLING HERE */}

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

Other options for positioning background in SVG or using CSS within SVG could include center center alignment settings

I am currently developing a website where I have a div covered by an SVG. When I use this SVG as a background image and apply background-position: center center, it functions as expected. However, my issue arises when I try to add additional CSS in this ma ...

javascripthtmlcsssvg

What is the solution to fixing a flashing div?

I've been using a jQuery method to make my div blink. Check it out: JSFIDDLE <div class="blink">blinking text</div>non-blinking <div class="blink">more blinking text</div> function blink(selector){ $(selector).fadeOut(& ...

javascriptjquerycsshtml

Can CSS be used to generate these shadows?

Check out this image I made showcasing a board with an elongated shadow cast behind it. The intention is to emulate the look of the board leaning against a wall, resulting in a triangular shadow on either side. I'm curious if it's achievable to ...

css

How do I position a div right below a button using CSS and Jquery?

I have a button that, when hovered over, reveals a hidden div element. Is there a way to position this div directly beneath the button once it is revealed? <script type="text/javascript> $(document).ready(function(){ $(".plans").hover(function() ...

jquerycss

Next.js in combination with Tailwind CSS

While attempting to customize the styling for my Next.js 13 app, I encountered an error message that states: Syntax error: C:\Users\User\Documents\webdev\TicketingApp\ticketing-app\app\globals.css The text-default- ...

cssnext.jstailwind-css

What is the proper method for implementing a scrollable effect to the <v-bottom-sheet> element within the Vuetify framework?

Within my Vue.js project, I am utilizing the v-bottom-sheet component from Vuetify framework (version 2.1.12). Upon reviewing my code, you can observe that the v-card is enclosed within the v-bottom-sheet. The issue arises with the scrollable parameter of ...

javascriptcssvue.jsvuejs2vuetify.js

The menu mysteriously vanished into the depths of the darkness

My menu has mysteriously disappeared in Desktop mode, but it shows up correctly in phone mode. I'm quite puzzled and can't seem to figure out what the issue might be. I've checked to see if the "capture" box is covering the menu box, but I&a ...

htmlcss

Adjusting the width of the final card in the deck grid

Currently, I am utilizing angular-deckgrid for image display purposes. Within a container, there are two columns in which images are displayed with the column-1-2 class according to the documentation. However, in certain scenarios where only one image is p ...

angularjscssangularjs-ng-repeat

Tips for enlarging an image by tapping on it in handlebars

I currently have the handlebars template engine integrated with node.js, and I'm facing an issue where thumbnail images from the database are displaying at a fixed width and height of 70. Is there a way to enable users to click on these images in orde ...

javascriptjquerycssnode.jshandlebars.js

Stop the link height from changing when hovered over

Incorporating Angular, Angular Material, and Angular Flex-Layout, I have designed a collection of links that resemble cards or tiles. The links initially display an icon and title but transition to show informational text upon hovering. However, for links ...

cssangularjsflexboxangular-materialangular-flex-layout

What is the best way to postpone the rendering of a table?

My table is bogged down by an excessive number of rows, causing a sluggish rendering process. I'm curious about the best method to address this issue. Are there any existing libraries specifically designed for this purpose? ...

javascripthtmlcssangularjs

Displaying a division when a button is pressed

Despite my best efforts, I can't seem to get the chosen div to show and hide when the button is pressed. <button id="showButton" type="button">Show More</button> <div id="container"> <div id="fourthArticle"> <i ...

javascriptjqueryhtmlcss

What are the best ways to ensure text stays center aligned and prevent position absolute elements from overlapping?

I'm currently working on a project that involves center-aligning the page title within the parent div. However, I have run into an issue with an overlapping back button when the page title is too long due to its absolute positioning. Can anyone provid ...

htmlcss

What is the best way to make my background image adapt to different screen sizes

I am currently working on updating my webpage and facing a few challenges that I would appreciate some assistance with: One issue is that the images on my page do not adjust to the size of the browser window. As a result, when I resize the window, the i ...

csshtmlresponsive

Is there a way to modify the scroll ion-content's color scheme?

Is there a way to change the scroll color in Ionic to green, specifically for ion-content? Any suggestions on how I can achieve this? Below is my HTML code: <ion-header> <ion-toolbar> <ion-buttons slot="start"> ...

htmlcsstypescriptionic-framework

Utilizing Bootstrap, Jquery, and Node.js for web development

I am seeking clarification on the process for running these two commands: npm install jquery npm install boostrap After adding the dependencies to my package.json file, I then include them in my app.js file using the code: var $ = require('jquery&a ...

javascriptjquerycssnode.jstwitter-bootstrap

Having Trouble with Your CSS Styles?

After working with HTML and CSS for over 5 years, I find myself stumped by this particular issue. At the provided URL, there is a single div in that container with an ID of Clarity. The CSS rules I have implemented are as follows: #clarity { text-align: ...

htmlcss

Creating uniform width children with Bootstrap's flexbox

Within my flex box container, the children are all displayed in a flex-row. I'm utilizing bootstrap to try and make sure that all the children have the same width and height. HTML <div class="d-flex flex-row flex-grow"> <div class="backgroun ...

htmlcssbootstrap-4flexbox

Differences in sub column heights within Bootstrap grid system

I am facing an issue with maintaining consistent heights for all my columns. I typically use Bootstrap to adjust their sizes, but the problem arises when using sub divs. Click here to view a DEMO showcasing the issue The first "table" is borrowed from an ...

htmlcsstwitter-bootstrap

Creating a smooth transition effect on text length using Javascript and CSS: Fading the text as it

I have been searching everywhere for a solution to my issue, but I haven't found it yet. I keep coming across methods to fade text on and off on load, which is not what I need. My goal is to fade some text on the same line, and I have created a mockup ...

javascriptcss