Media queries in CSS for the Lotus Notes client

Our XPage application runs smoothly on all web browsers, including the internal notes browser. To cater to our diverse audience of both desktop and mobile users, we created a responsive layout using CSS media queries. However, we recently discovered that when it is accessed as a notes application, it does not respond to the media queries. The layout behaves as if there are no media queries in place (for example, displaying mobile-specific items on desktop). Do you have any suggestions on how to resolve this issue without resorting to removing the media queries entirely? Any help would be greatly appreciated. Thank you!

Answer №1

It seems that the issue stems from your Notes browser being rendered as IE. Unfortunately, IE does not support media queries up to version 8.

Consider changing the internal browser to Firefox, which is a viable alternative. You can find instructions on how to do this by visiting the following link:

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

Adding a CSS class to an ASP.NET page from the code-behind: A step-by-step

I have been searching through numerous sites and feel frustrated: Within my <asp:table id="questionsTable" runat="server">, I am dynamically adding rows and columns. My goal is to assign a predefined Cssclass to these newly created rows and columns, ...

What is the best way to display a file using HTML?

Hey there, I'm facing a bit of a challenge. I'm working on creating tutorials and I'd like to use Github to store all the files, with the website displaying code directly from those raw files. The files could be in HTML, CSS, Javascript, Py ...

The React Bootstrap Open Iconic library is displaying a peculiar 'T' symbol instead of the intended icon

I have recently installed Bootstrap and the package react-open-iconic, but I am having trouble getting it to work properly. Within the code, the following snippet is being used: if (sortColumn.order === "asc") return <TextIcon className="oi sort-as ...

How to align an image at the center of an HTML button

I am facing an issue with aligning a button with an image on it properly. Here is the code I am using: <button type="button" style="width: 23px; height: 23px; padding:0"> <img src="Icon_304.png" /> </button> Although the button look ...

Seeking a window-adjustable table with stationary headers

I have been searching high and low for a solution to my issue but have come up empty-handed. My goal is to create a table with fixed headers that remain visible while scrolling through the rest of the table. The catch is, I also need it to align properly w ...

Is there a glitch in Safari's CSS involving max-height?

Currently, I am in the process of developing a popup for a registration form. The CSS rules have been configured accordingly and after testing on various browsers, it has come to my attention that Safari is displaying an additional white space between elem ...

Does the Bootstrap 4 flex system allow for arranging self-row items within a parent column?

Displayed below is the navbar code snippet: <div class="d-flex flex-column flex-lg-row"> ...... </div> As shown in the example: .bd-highlight { background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.15); } < ...

Opening external stylesheets in a separate window

Objective: Create a new window, add elements to it, and then apply CSS styles to the elements in the new window using an external style sheet. Issue: While I am able to add elements to the new window and link it to an external style sheet in the head sect ...

The right side alignment is malfunctioning

I need assistance with creating a section on a webpage that resembles a piece of paper, where there is content displayed on white background against a grey background. Here's what my CSS currently looks like: body { background:grey; } .page { ...

Create dynamic CSS pseudo content for before/after in Angularjs automatically

I have a question regarding applying pseudo elements dynamically using Angular. I have a div element where I need to push data to the content attribute in CSS dynamically from my scope. How can I achieve this with Angular? Here is a sample CSS: .bar:befo ...

Center or left-align the divs

Can anyone offer assistance with this section of code? HTML: <div id="holder"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </div> ...

Implementing a tooltip popup inside the header cell of the ordering table

Apologies in advance for my lack of experience with coding more complex website features. I'm attempting to incorporate a tooltip popup into one of the header cells to provide additional information to users. While I have all the necessary component ...

What is the best way to update the CSS of a DIV that has been populated with external content in JQuery Mobile?

After reading through all the comments, none of the suggested solutions seem to do the trick for me. My issue involves a piece of Jquery code that retrieves content from an external PHP script and updates a div in my application. However, once the new data ...

Unable to locate external CSS files in Firefox using the absolute file path

On my website, I have included the following line in the <head> section: <link type="text/css" href="C:/myApps/app1/images/css/12.02/main.css" rel="stylesheet" /> Upon viewing the page in Firefox 11.0, it appears that the main.css file is not ...

Issue with CSS and JavaScript: content is not properly centered after animation

Hey everyone, I'm doing my best to figure out the correct animation for this project. It seems like the issue might be in the JavaScript code, but I'm not entirely sure. https://i.sstatic.net/4FPd2.jpg The movie poster should load up in the cen ...

Expanding a modest background image with CSS styling

I'm struggling to grasp the correct CSS syntax for scaling or expanding an image. Despite trying multiple approaches, I can't seem to get it to function properly. The current code in use is: background:url(../images/body_bg1.jpg) fixed repeat- ...

How to shift a DIV along with all of its contents using CSS

I need to rotate a div by 90 degrees along with all its content (images and text). Is there a way to achieve this? I attempted using the following CSS but it did not work: div.ccw { transform: rotate(-90deg) translateX(540px); -webki ...

What is the best way to create rounded corners on a WordPress login page?

I recently implemented the Custom Login Page Customizer plugin on my WordPress website and it has created a beautiful login page. While I was able to round the corners of my logo using CSS, I'm struggling to achieve the same effect on the login form. ...

I am struggling to make the horizontal scroll and fixed column features work in dataTables. The rendering seems to be inconsistent across different platforms. Can anyone help me figure out what I am doing incorrectly?

I've dedicated countless hours to unraveling this conundrum. I'm in urgent need of creating a table that mirrors the layout displayed on this webpage: https://datatables.net/extensions/fixedcolumns/ The desired functionality involves both verti ...

What is the best way to incorporate background colors into menu items?

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 fl logo"> <a href="#"><img src="images/main-logo.png" alt="logo" /> </a> ...