Does anyone know of a media query specifically designed for desktops that targets devices in 1366*768 landscape mode only?

I managed to create a design that works perfectly for the iPad Pro in landscape mode with a resolution of 1366x1024. It doesn't affect the viewport of my device with a resolution of 1366x768. Take a look at the code snippet below:

@media only screen 
  and (min-device-width: 1025px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape){
    selector{
      background-size: 100% 75% !important;
      background-position: center top 188px!important;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }  
}

Now, I need another media query that will specifically target the resolution of 1366x768. I tried modifying the existing one but it didn't work as expected. Hopefully, this explanation clarifies what I'm trying to achieve. Can someone please assist me?

htmlcssbootstrap-4media-queriesmpmediaquery

Answer №1

/* ----------- iPad Pro Styles ----------- */
/* Media queries for Portrait and Landscape views on iPad Pro */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Portrait View */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape View */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

You can give this a try. Even though I don't own an iPad Pro, these styles have been effective for me when tested in the Chrome simulator.

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

What is the best way to ensure that this jQuery window has a minimum size?

Recently, I came across a helpful jQuery demo that demonstrated how to create a popup window on my website. For those interested, the demo link can be accessed here: http://jqueryui.com/dialog/#modal-message The design of the window I am aiming to replica ...

javascriptjqueryhtmlcssjquery-ui

Is there a way to display the JavaScript widget exclusively on the homepage or main page

How can I limit the display of a Twitter widget on my blog page to only show on the main page and hide it when visitors navigate to sub-pages or individual blog entries? ...

javascripthtmltwitterblogs

Click the toggle ng-press attribute

I have a section with an on-click="..." action. The event slightly adjusts the section's appearance within the document so that it resembles a button. I am looking to switch between making this section clickable and non-clickable in my program. While ...

htmlangularjs

Div containing span does not properly wrap around it

I am attempting to highlight words in a textarea by placing a div behind the field and transferring the values over. $("div").html($("textarea").text() .replace("bad-word", "<span style='background-color: red'>bad-word</span>")) ...

jqueryhtmlcss

Adjust the height of a CSS div to automatically fit the space between two other divs

I am trying to adjust the height of my table (with class "body") so it automatically fits the remaining space between the header div and the footer div. All three divs are enclosed within a fixed and centered position on the screen. Update: JSFiddle w ...

javascriptjqueryhtmlcssbootstrap-4

Tips for creating a button-like anchor in Bootstrap 4

After using a button in Bootstrap 4, it appears as follows: https://i.sstatic.net/laGLo.png <button type="button" class="btn btn-primary" target="_blank">Download</button> On the other hand, when I substitute an anchor with the same button s ...

htmlcsstwitter-bootstrapbootstrap-4

Altering the value of a selection form element before sending off the data

Having trouble updating the select value upon submission. The system is rejecting special characters like "$" and ",", so I am cleaning up the data. Using jQuery jQuery("#vfb-53").val( jQuery("#vfb-53").val().replace(/\D/g,'') ); jQuery("# ...

javascriptjqueryhtmlforms

Personalize the Bootstrap 4 CDN option

Is there a mistake in my code or am I just missing something when trying to override Bootstrap 4 CSS/SCSS? I tested it on W3Schools and it worked, but it doesn't seem to be working elsewhere. Additionally, I prefer to serve different CSS files to user ...

cssbootstrap-4cdn

Tips for aligning divs side by side with smaller divs stacked below them

I have a collection of dynamically generated divs that act as panels for selecting different options. These divs can be categorized into two types: regular and short. The height of the regular divs is determined using JavaScript to match the height of the ...

csshtml

Achieving Perfect Vertical Alignment in Bootstrap 4 Grid Cells

I am currently working on an admin page that involves querying and reporting on the page weights of key pages on a website, such as landing pages. Bootstrap 4 is in the pipeline, and I have utilized it to design a layout that I am satisfied with. However, ...

htmlcsstwitter-bootstrap-4

Toggle Form Section Visibility

I am working on a table with five rows that have upload buttons. Each time I submit a row, the page refreshes, but I want to hide all but one row at a time. When the first submit button is clicked, it should show the next row and hide the previous ones. Th ...

javascriptphpjqueryhtml

Ensuring that a canvas remains centered and completely visible within its parent element while zooming in React

Currently, I am developing a straightforward PowerPoint creator using React. In this project, I have integrated a zoom feature for a canvas element. The principle is that the canvas should resize based on a scale factor. However, there seems to be an issue ...

javascripthtmlcssreactjscanvas

Height of columns in Bootstrap 4 grid layout using row-cols

I am faced with a challenge while using the bootstrap grid system with the row-col attribute. The issue is that when columns wrap, they do not maintain the height of the tallest columns from the previous rows. Is there a way to ensure that the wrapped colu ...

cssbootstrap-4

Part II: Material-UI - Finding the Right Source for CSS Classes

I have recently started diving into Material UI - Grid and this question is a continuation of my previous query about defining CSS classes for Material UI components, specifically the classes.root Sunny day with a chance of rain I made some changes b ...

cssreactjsgridmaterial-ui

Apply a unique style to a child element of a JavaFX LineChart

Is it possible to utilize 2 objects, each with a single line? https://i.sstatic.net/402Qp.png Currently, I have set the color like this: .chart-series-line {-fx-stroke: #ff0099; }, which changes the color of both lines. However, I need the lines to have d ...

javacssjavafx

Over time, a buildup of code can gradually impair the speed of the

Currently, I am in the process of working on a project for my Web Programming course at University. The homepage is almost complete, but during testing, I noticed that each time the scroll event is triggered, there is a significant slowdown. This particul ...

javascriptjqueryhtmlcssreactjs

JQuery hover effect for dynamically added elements

Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...

javascriptjquerycssajax

How to Customize the Navbar Position in Bootstrap 3 when the Brand/Logo is Collapsed

I am currently in the process of creating my first website and experimenting with the Bootstrap 3 framework. The navbar I have selected is designed to adjust based on screen size, collapsing into a small button for use on tablets and mobile devices. Howe ...

javascriptjqueryhtmlcsstwitter-bootstrap

I am on the hunt for a unique jQuery or CSS selector to resolve a specific problem

I need assistance finding a jQuery or CSS selector for a specific issue. Here is the code snippet: <div class="parent"> <div class="grid1"> <p>grids have also p</p> </div> <div class="grid2"> <p& ...

jquerycssselector

The end of the /if in the small template system fails to correctly detect the desired condition

If I write the following line on its own, he cuts it without any reason. So...: Greetings, I'm in need of assistance regarding an issue that is currently beyond my understanding. I'm facing a challenge with a small TPL-System which requires so ...

phphtmlregex