Tips for choosing certain viewports using media queries

I am attempting to target a specific range between 767px and 1024px.

This should be applicable to the screen, as well as iPad portrait mode, but NOT for iPad in landscape mode.

I have experimented with various queries, but none of them have yielded the desired outcome.

@media only screen and (max-device-width: 1024px) and (orientation: portrait),
screen and (min-width: 767px) and (max-width: 1024px) { ... }

The issue arises because the iPad landscape mode falls within the range of 767px to 1024px. I am unsure how to exclude this particular viewport configuration.

ipadcssmedia-queries

Answer №1

what if we tried this:

<link rel="stylesheet" media="screen (max-device-width: 1024px) and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="screen (max-device-width: 1024px) and (orientation:landscape)" href="landscape.css" />

and then add this: so <style @media screen (max-device-width: 1024px) and (orientation:portrait){ /** portrait / } @media screen (max-device-width: 1024px) and (orientation:landscape){ / landscape **/ } </style>

i'm not exactly sure what you're getting at...those achieve the desired effect. However, here's an alternative approach to exclude iPad Landscape /* iPads (landscape) ----------- / @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { / Styles */ }

/* iPads (portrait) ----------- / @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { / Styles */ }

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

For Flexbox front end design, the left side should be contained within a container while the right side should seamlessly stretch across the

https://i.sstatic.net/3RYY6.png I'm facing a challenge in designing a website with a unique layout that has left me puzzled. I've created a codepen example to showcase what I'm trying to achieve. Specifically, I need to implement a Hero Ba ...

htmlcssflexbox

Hexagonal border with embedded image

I'm striving to achieve the image below: https://i.sstatic.net/iZIex.png I've managed to create a hexagon border and text, but I'm unsure how to incorporate the hexagon image and create a grid of 3 hexagons. Any assistance would be greatl ...

cssclip-path

"Unable to get the 'sticky' position to function correctly in tailwindcss

I've been experimenting with Tailwind CSS and trying to implement two sticky elements - a sticky header and a sticky sidebar. My sticky header seems to be working perfectly: <body> <header class="sticky z-50 top-0 hidden"> < ...

htmlcsstailwind-css

The white-spaces in Quill JS do not retain their original formatting

I recently integrated Quill JS editor into my website. During testing, I noticed that any text inputted after a white space gets emitted when alerting the content. Below is the HTML code snippet: <div id="postCommentEditor" class="postCo ...

javascripthtmlcssquill

JQuery and CSS Techniques for Changing the Size of a Div

I'm currently experimenting with JQuery and CSS to create a user-friendly navigation experience for users as they browse through a grid of variously-sized images. Essentially, my goal is to have the images expand when hovered over (which is functioni ...

jquerycsshtmlexpand

The range slider initiates with the first alphabet

I have created a range slider with values from 0 to 4, displaying as 0, 1, 2, 3, 4. Currently, the minimum value is set as 0 and the maximum value is set as 4. Now, I am looking to replace 0 with 'F'. For example: F, 1, 2, 3, 4. Is it possible t ...

jqueryhtmltwitter-bootstrapcss

When working with the <picture> element, only the first <source> is being utilized while the others are being disreg

When it comes to the img tag and the source tags, it simply switches between the first source tag based on the parameters provided. <picture> <source media="(min-width: 800px)" srcset="https://via.placeholder.com/800x700"> ...

htmlcss

The navigation bar vanishes as soon as I click the Modal button

I am experiencing an issue where the Navbar disappears when I open a modal while using Bootstrap. Navbar before opening Modal https://i.stack.imgur.com/Oo9qb.png Navbar after opening Modal https://i.stack.imgur.com/dlK1V.png <script src="https:// ...

htmlcssnavbarbootstrap-5bootstrap5-modal

Is it possible to create dynamic animations with SVG files?

I am currently in the process of coding my website, and I came up with an exciting idea to animate my navigation bar within an SVG container. With its naturally wavy design, I aim to achieve a sweeping wave effect similar to the intro animation on Discord. ...

javascriptjqueryhtmlcsssvg

Locate a specific class inside a div and switch the CSS style to hide one element and reveal another

I have two divs, each containing a span. By default, the display of each span class is set to none. My goal is to toggle the display property of the span within the clicked div. If the span is already visible, I want to hide it; if it's hidden, I want ...

javascriptjqueryhtmlcss

Tips for creating a floating navbar with separated lists using Bootstrap 4

Struggling to position my navbar to the right and separate the list within the navbar. Despite multiple attempts, I can't seem to get it right. Here is a snippet of the code I've been working on: here is what I'm trying to achieve $def with ...

javascriptpythoncssbootstrap-4web.py

The span is unresponsive

When focusing on an input or checking its validity, the span should move up but it's not responding to any styles. <div class="login"> <span class="logtxt">Username or email</span> <input type=& ...

htmlcss

Is there a way to incorporate a delete button for each li element that is included in my list?

I have successfully implemented a to-do list where clicking on an item strikes a line through it and there is a delete button that works. However, I am looking for assistance on how to create a delete button for each newly added li item. var button = do ...

javascripthtmlcss

What is the best method to "deactivate" a radio button while ensuring that a screen reader can still read the text and notify the user that it is inactive?

My current situation involves needing to deactivate certain radio buttons, while still having the option to reactivate them later. When I use the disabled attribute, screen readers will overlook this field and miss key information. I am seeking an accessi ...

javascripthtmlcssaccessibility

Altering the dimensions of Bootstrap's default navbar for a more compact look

Currently, I am attempting to modify the size of Twitter Bootstrap's standard navbar to a smaller dimension. My goal is to have the Brand/logo on the left side, menu options in the center, and social media icons on the right side within the navbar. U ...

htmlcsstwitter-bootstrap

A customizable and adaptable Tetris-inspired CSS design perfect for any screen size

If we imagine having a block like this: <div class="block"></div> There are different sizes of the block: <div class="block b1x1"></div> <div class="block b2x1"></div> <div class="block b1x2"></div> For i ...

javascriptjqueryhtmlcssresponsive-design

Having Trouble Adjusting Width of Inline List Items in Internet Explorer?

I am encountering an issue with an unordered list where the list items are displaying inline, and the layout is quite complex. To better explain, here is the Fiddle: Fullscreen: http://jsfiddle.net/spryno724/F5CFD/embedded/result/ Code: http://jsfiddle.n ...

htmlcssinternet-explorerinternet-explorer-8html-lists

Ways to establish the gradient

Here is the code snippet I am currently working with. .imgcol1 { background-image: url(https://picsum.photos/200/300); background-repeat: no-repeat; background-size: cover; height: 190px; width: 520px; } .col1 { margin: 75px; } .grad { b ...

cssbootstrap-4bootstrap-5linear-gradients

Font Awesome icon does not appear in IE compatibility view mode

I have incorporated a Font Awesome icon into my project. The HTML page is generated from an XSL Template in the following manner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <meta content="text/html; charset=utf-8 ...

htmlcssinternet-explorerfontsfont-awesome

How to dynamically change the color of an AngularJS element based on a condition?

As someone who is new to AngularJS, I am currently working on changing the color of a table element to yellow if the user has voted on a specific choice. <div ng-show="poll.userVoted"> <table class="result-table"> <t ...

cssangularjsconditional-statements