Media queries in CSS not functioning as intended

Trying to scale media requests with an image (logo) for various mobile devices like iPhone 5, 6, 6+, iPads, and large screens. Need to specify styles for portrait and landscape orientation as well.

The code seems to be functioning only for iPhone 6, iPads, and large screens over 1600px. Does not work for small screens (320x480) and iPhone 6+ (please check in Chrome).

If the media query applied to iPhone 6+ is similar to that of iPhone 5, then what could be wrong in my CSS?

Please assist me in identifying any errors. Thanks a lot!

Here's the CSS:

@media only screen and (max-width: 320px) and (max-width : 480px) {
.logo-mobile img {
    width: 150px;
    transform: translateY(-7px); 
}
}

@media only screen and (min-width: 321px) and (max-width : 480px) {
.logo-mobile img {
    width: 150px;
    transform: translateY(-7px); 
}
}

@media only screen and (min-width: 320px) and (max-height: 568px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
    width: 144px;
    transform: translateY(-7px);
}
}

@media only screen and (min-width: 320px) and (max-height: 568px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
    width: 144px;
    transform: translateY(-7px);
}
}

@media only screen and (min-width: 375px) and (max-height: 667px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
    width: 144px;
    transform: translateY(-8px);
}
}

@media only screen and (min-width: 375px) and (max-height: 667px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
    width: 100%;
    transform: translateY(-11px);
}
}

@media only screen and (min-width: 414px) and (max-height: 736px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
    width: 144px;
    transform: translateY(-8px);
}
}

@media only screen and (min-width: 414px) and (max-height: 736px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
    width: 144px;
    transform: translateY(-8px);
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2) { 
.logo-mobile img {
    width: 100%;
    transform: translateY(-8px);
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.logo-mobile img {
     width: 100%;
    transform: translateY(5px);
}

@media only screen and (min-width: 1600px) {
.logo-mobile img {
    width: 100%;
}
}

Answer №1

One way to improve your website is by making sure you have included the meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Another suggestion is to add appropriate prefixes to your CSS3 selectors such as...

-webkit-transform: translateY(8px)//Chrome
-o-transform: translateY(8px) //Opera

and more. For a comprehensive list of css3 prefixes, you can refer to resources like w3schools. I hope this information proves helpful...

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

Mastering VueTify: Customizing CSS like a Pro

Is there a way to modify the CSS of a child vuetify component? .filterOPV > div > div { min-height: 30px !important; } .filterOPV > div > div > div { background: #f5f5f5 !important; } <v-flex md2 class="filterOPV&quo ...

The process of inserting a CSS file into a CodeIgniter project

Hey there, I'm struggling to load a CSS file in Codeigniter. Can someone please guide me on how to do it? Below is an overview of the Codeigniter sample Directory Structure: views models controllers assets a) stylesheets b) javascript c) images Conf ...

"Troubleshooting WordPress website: issues with CSS and images not

I recently developed a custom WordPress theme and everything was working perfectly on my local machine. However, when I moved the theme to the server, the CSS and images are not displaying properly. Strangely enough, when I checked the 'view source&ap ...

The toggling feature seems to be malfunctioning as the div section fails to display

I'm facing an issue with my Django project while working on a template. I want to toggle the visibility of a div element between hiding and showing, but the function I used isn't working for some reason. I borrowed the function from a different t ...

Utilizing Bootstrap to display side by side images at full height

Can someone help me achieve the layout shown in the image below? I want a container that spans full width and height with 2 images and other elements inside. The images should be full-height within the container, but also automatically adjust their width t ...

Designing a Scrollable tbody Element while Preserving the Integrity of the tbody Columns

Currently, I am attempting to implement a scrollable tbody in order to run a React package smoothly. The challenge lies in achieving a scrollable tbody without having to resort to using display: block on the tbody element. Unfortunately, this solution dis ...

Is it possible to change the background color using jQuery?

Can you assist me with this: I have a website and I am looking to modify the bg-coler when hovering over the menu (similar to how it works on the rhcp-website). I attempted using jquery for this, but unfortunately, it did not yield the desired result.. ( ...

The issue I am facing with this self-closing TITLE tag causing disruption to my webpage

I am encountering a problem with my basic webpage. <html> <head> <title/> </head> <body> <h1>hello</h1> </body> </html> When viewed in both Chrome and Firefox, the webpage ...

Images are not displayed when utilizing font-awesome on a MVC 5 website

I'm having an issue where adding font-awesome to the style bundle is causing images not to display correctly. Instead of showing the right icon, I am getting a transparent box. My style bundle configuration looks like this: bundles.Add(new StyleBund ...

Foundation: the importance of source order (without using flex grid)

I have a 3-column grid, with content and a sidebar. On small and medium devices each takes up 12 columns. Take a look at the example here: cdpn.io/anon/pen/bqENqG. I am looking to have the sidebar appear after the articles on small and medium devices like ...

Nested Divs in CSS

I'm really struggling to get a div to display under another div in the way they usually do. Currently, I am using MaterializeCSS for my layout setup: <div class="container valign-wrapper"> <div class="customClass"></div> &l ...

Finding an element based on its styling attribute, such as its position on the left or right side

One particular block that caught my eye is the slider element: <div id="sliderDispo" class="slider slider-dispo" data-slider-init="" data-slider-color="#0077b5 #EC6E31 #E40B0B" data-slider-step="33" > <div class="slider__interval" ...

The Google Map is unable to expand to fill the entire width of the column

I have exhausted all my efforts trying to troubleshoot this issue on my project's contact page. Currently, I have a layout with 3 rows containing columns within a Bootstrap 4 grid. The third row is supposed to display a Google Map within a column set ...

What causes these images to stack on top of one another rather than align in rows? [HTML][CSS][Bootstrap]

I've implemented Bootstrap's grid system to showcase two rows, each containing two images. Here is the code: <section class="container"> <div class="row"> <figure class="column-sm-6"> <p>floor pl ...

What does "cascading" refer to in the context of Cascading Style Sheets?

Similar Query: Explaining the concept of "cascading" in CSS Can you clarify the term "cascading" within Cascading Style Sheets? ...

What is the reason behind lightbox not disabling scrolling?

While using the default lightbox2 CSS and JavaScript, everything is functioning correctly except for an issue on Safari mobile. When I click an image and the lightbox opens, swiping to the left reveals blank white space despite having overflow-x set to hid ...

Divide the space evenly with minimal gaps

I've been trying to use examples from the web, but I just can't seem to get it right. Who better to ask than you guys? I want to evenly distribute id="klip". I have set their widths to 18% so that each space is 2%. Here's how it looks now: ...

"Positioned at the top of the page is the alert box, with the

I'm looking to add an alert at the top of my webpage containing a form for visitors to enter their phone number. Currently, I have a "alert alert-info" div with the form inside it placed at the top of my body tag, which works perfectly. However, when ...

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend

I'm struggling to add a legend to my map using Angular 5 and typescript. I need help with setting CSS styles for the values (grades) that are displayed on the legend. Can someone guide me on where to put the styles? TS: createLegend() { let lege ...

What is the proper way to utilize CSS animation delays in order to design a collapsible HTML container?

I'm trying to implement responsive CSS animation delay to create an accordion effect when a user clicks on an arrow associated with a table, all without using JavaScript and only utilizing HTML/CSS. Check out the mobile view in action here: https://w ...