How can I prevent iOS Safari from prioritizing landscape CSS over portrait CSS?

Having an issue with two media queries:

<link rel="stylesheet" media="only screen and (orientation: landscape)" href="/stylesheet/landscape.css" />
<link rel="stylesheet" media="only screen and (orientation: portrait)" href="/stylesheet/portrait.css" />

In the first media query, a class has a property that is not present in the second query:

/* Landscape view style */
.myClass { position: relative; border-right: 1em solid red; }


/* Portrait view style */
.myClass { position: relative; }

Despite loading the page in portrait view, a right border is still showing! I can override this by adding the border property in portrait view, but is there a way to prevent Safari from applying the landscape CSS when it's in portrait mode?

ioscssmedia-queriesmobile-safari

Answer №1

Just a small addition to consider in portrait view:

.myClass { position: relative; border-right: 0; }

Edit: To clarify, the reason for this behavior is that both files are being loaded and all properties are being applied within the same class. The 'position' property is being overridden by the second file's class with the same name, but there is no overriding of the 'border-right' property.

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

Retrieve a value by using the getBoundingClientRect method

While experimenting with code from W3Schools, I attempted to modify it in order to assign the resulting LEFT value to another element (DIV). Here is an example of getBoundingClientRect Despite correctly retrieving the left value of 8, nothing seems to be ...

javascriptcssgetboundingclientrect

Ensure that the checkbox remains constant and visible at all times when using Bootstrap

Introducing the latest checkbox design in Bootstrap4 : Check out the Bootstrap4 checkbox: <label class="c-input c-checkbox"> <input type="checkbox"> <span class="c-indicator"></span> Click here </label> The stan ...

twitter-bootstrapcsstwitter-bootstrap-4bootstrap-4

When importing data from a jQuery AJAX load, the system inadvertently generates duplicate div tags

Currently, I am utilizing a script that fetches data from another page and imports it into the current page by using the .load() ajax function. Here is the important line of code: $('#content').load(toLoad,'',showNewContent()) The issu ...

javascriptjqueryhtmlcssajax

Using flex and align properties to position two elements on the right and one on the left is a common layout challenge

I'm facing an issue with element positioning and text alignment. The navigation container consists of three elements: logo, title, and nav-list. You can find the code on CodePen. /**{ margin: 0; padding: 0; box-sizing: ...

htmlcsscss-positiontext-alignment

Combining two CSS classes to create an "alias"

Currently, I’m utilizing bootstrap for table styling. For instance: <table class="table table-striped main"> However, the table I want to style is dynamically generated by a separate tool that I have no control over, and it already has its own ta ...

htmlcss

Ways to turn off the adaptive transient feature

Is there a way to turn off the responsive features and grid layout of Bootstrap? While creating a website for a company, I ensured that it was responsive for mobile devices. However, the company now wants a different design specifically for mobile, with t ...

htmlcssbootstrap-4

Margin Snow Stripe

Having trouble troubleshooting a margin error that won't go away? I've attempted adjusting the margin and padding values to 0, but the line persists. Should I consider resizing the video? I placed the background video within a div tag. Is the vi ...

htmlcss

Adding an Icon in p-autoComplete with PrimeNG in Angular 10

Is there a way to insert an icon within the primeng p-autoComplete component? <div class="p-mr-2 p-input"> <p-autoComplete styleClass="p-autocomplete-list-item" [(ngModel)]="location" [suggestions]="resul ...

htmlcssangularprimeng

What are the elevated sections in bootstrap?

Having come from Semantic-UI and starting to learn Bootstrap, I must say that despite its widespread popularity, I find Bootstrap a bit lacking compared to what Semantic-UI has to offer in terms of basic stylings. Currently, I am on the lookout for the Bo ...

htmlcssbootstrap-4semantic-ui

Ensuring the scroll bar is consistently positioned at the bottom

I'm currently working on a chat application using Vue.js and I'm facing an issue with the scroll bar. Despite using overflow: auto; and customizing the scroll bar, it doesn't automatically scroll to the bottom whenever a new message is sent. ...

cssvue.jsvuetify.js

class=btn btn-danger align-horizontal

I need help aligning my 3 buttons horizontally side by side. The current setup doesn't look good to me. class= btn btn-danger Can someone guide me on how to write the CSS for this? This is my code: <div class="row"> <div class="co ...

css

Understanding the connection between Provisioning Profiles, Certificates, Application IDs, and Keys

Currently, I am focused on testing my app on my phone and not planning to release it on any app store. How do all of these components connect with each other? If I'm not aiming to publish the app, can I disregard some of them? I am enrolled in the U ...

iphoneiosxcodeauthenticationxcode4

The Material UI text field on mobile devices causes the screen to zoom in, cutting off the top content and displaying the bottom of the page

Whenever I click on the Material UI text Field during login, the screen gets pushed down and cuts off content at the top of the page. View image description here -I have examined my CSS to see if setting the container height to 100vh is causing this issue ...

cssmaterial-uifrontendtextfieldresponsiveness

Folding animation using CSS3 and vertex manipulation

Looking to create a folding animation on a squared div with vertex? While there are examples online using Flash, I'm seeking guidance on how to achieve a similar effect using CSS3 and HTML5. Any tips or resources would be greatly appreciated. Thank y ...

htmlcssanimationcss-animations

Child's transformation leads to strange overflow scroll appearance?

What causes the vertical scrollbar to increase in size in this situation while the horizontal scrollbar remains unaffected? <div style="width:200px; height: 200px; overflow:scroll"> <div style="width: 400px; height: 400px; background-color:or ...

htmlcssoverflowcss-transforms

The particles-js effect only partially fills the page

I've encountered some issues with particles-js. Firstly, it fails to cover the entire page. Additionally, I seem to be unable to interact with the particles for reasons unknown. Here is the HTML code snippet: <script type="text/javascript" src="j ...

javascripthtmlcssparticles.js

Error: An unregistered adapter is causing an issue in reading data. Unknown typeId encountered: 34. Check if you have registered all adapters properly. (Flutter)

Having trouble with app restarting after saving data using hive on disk. I keep getting the error mentioned above and the app fails to open. ...

androidiosflutterhiveadapter

The secret item concealed beneath the Map [React]

Currently, I am facing an issue with google-map-react where the dropMenu element is being hidden under the map in my application. Does anyone have any suggestions on how to resolve this? Screenshots: https://i.sstatic.net/Z3Zp7.png https://i.sstatic.net/J ...

cssreactjs

difficulties switching content between different screen sizes

Having trouble with hidden-xs and visible-xs-* classes not working as expected. Even a simple code snippet like the following doesn't hide the content: <div class="hidden-xs"> test test test </div> Even when scaling down my window to ...

htmlcsstwitter-bootstrap

What is the proper way to use UINavigationController.pushViewController to push a new viewController on top of a presented

Initialized UINavigationController - nc with VC0 as the starting point Currently in VC0 In VC0, attempting to present "VC1" in a bottom-to-top manner Within VC0, executing [self.nc presentViewController:VC1] Now navigating to VC1 In VC1, aiming to transiti ...

iosobjective-c