Devices are not displaying media queries as expected

@media screen (max-width: 750px) or (screen and (max-width: 750px) (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)) {  
        div.body, div.body div.links, div.body div.links div, div.footer, div.footer div {      
            display: block !important;      
            overflow: hidden !important;
}

changed version

@media screen and (max-width: 750px) {  
        div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
            display: block !important;      
            overflow: hidden !important;
        }

Hello everyone,

The media queries provided above are meant for a code intended for a newsletter. However, it seems that they are not having any effect when viewed on a mobile device. Could there be something missing in the media queries? I have tested this on an iPhone XR.

Your assistance is greatly appreciated!

Best, Dom

cssmedia-queriesmedia

Answer №1

Could you please remove the !important and add a closing curly brace? Additionally, make sure to use @media all in the following way:

@media all and (max-width: 750px) {  
    div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
        display: block;      
        overflow: hidden;
    } 
}

Have you tested it yet?

Answer №2

It appears that you have forgotten to include a } in both of your queries.

@media screen (max-width: 750px) or (screen and (max-width: 750px) (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)) {  
  div.body, div.body div.links, div.body div.links div, div.footer, div.footer div {      
     display: block !important;      
     overflow: hidden !important;
  }
}


@media screen and (max-width: 750px) {  
   div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
      display: block !important;      
      overflow: hidden !important;
   }
}

Answer №3

Remember to include this code and verify:

@media only screen and (max-width: 751px) {
   div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
        display: block !important;      
        overflow: hidden !important;
    } 
}

Also make sure to check your HTML header. Verify if the meta tag is included. If not, please add it within the head section.

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

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

Deleting a tag from a Flask document

Styling my form has been a challenge with Flask, particularly in regards to the picture field. I'm struggling to remove the "No file chosen" text and style the upload button using CSS, despite incorporating Bootstrap into my file. When hovering over ...

htmlcssflask

The functionality of the Bootstrap dropdown list button is not functioning properly on mobile devices

Currently, I am in the process of developing a website and testing its mobile view on my iPhone. The website is still using bootstrap 3, but I have encountered some issues. When I tap on the navigation button on my iPhone, nothing happens - no dropdown lis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with nested tabs functionality within a pill tab panel in Bootstrap not functioning as expected

I'm facing a challenge with integrating tabs into a vertical pill tab panel in Bootstrap 4. Below is a brief code snippet: <html> <head> <link href="bootstrap.min.css" rel="stylesheet"> </head> <body> <script ...

htmlcsstabsbootstrap-4nav-pills

Updating Icons in HTML Using Local Storage and Implementing a Dark Mode Feature Using JavaScript

My latest project involved creating a dark mode button along with a custom dark theme. The theme is stored in Local Storage to ensure consistency. However, I have encountered an issue where, upon page reload, the site remains in dark mode but the button ic ...

javascripthtmlcssiconslocal-storage

Display a div using Jquery when hovering over it with several classes

I want to create a hover effect where div2 fades in slowly when hovering over div1 within the same container. However, my jQuery code doesn't seem to be working as expected... $(".div").hover(function() { $(this).find(".div2").animate({ opac ...

javascriptjqueryhtmlcss

How can you switch between CSS styles using JQuery?

Is there a way to change CSS properties every time I click using jQuery? I couldn't find any information on this specific topic. Can someone guide me on how to achieve this with jQuery? I want the background color to change each time it is clicked. W ...

javascripthtmljquerycss

Unable to view Bootstrap Icons in Gulp 4

I recently integrated the new bootstrap icons npm package into my project using Gulp 4, the latest version. Everything was installed successfully and was working smoothly. However, I encountered an issue when trying to declare the icon in my index.html fi ...

javascriptcsssassgulpfont-awesome

Issue with Bootstrap 5: Mobile Menu Failure to Expand

I’ve been struggling with this issue for days now. I’ve searched everywhere for a solution, but to no avail. That’s why I’m turning to the experts here for help :-) The problem I’m facing is that my mobile menu won’t open. Nothing happens when ...

javascripthtmlcssbootstrap-5

Concealing just the portion of an element that moves underneath a fixed see-through navigation bar

After extensive searching for a solution, I have encountered multiple similar issues but none have provided a resolution that works for my specific case. It seems I may be overlooking something obvious. The problem at hand involves a fixed transparent nav ...

jqueryhtmlcssnavalpha-transparency

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

It took me a while to figure this out, but I still feel like my implementation is not ideal. I'm confused as to why things break when I remove the checkedActivities.has(activity) ? "checked" : "unchecked", because I thought TypeScr ...

htmlcsstypescriptsvelte

D3.js: Difficulty fitting the chart within my bootstrap div

Currently, I'm encountering a problem where the "card" component from Bootstrap is not adjusting responsively with my d3.chart. The screenshot below displays the outcome: https://i.sstatic.net/2MhBx.png Chart Code const sample = [ { languag ...

javascripthtmlcssd3.jsbootstrap-4

What is the best method for implementing a "night mode" feature using CSS?

I have a vision for a website that offers both a 'day' and 'night mode', providing users with a light and dark version of the site. However, I'm struggling to find the best way to achieve this. Initially, I attempted creating two ...

phphtmlcssdarkmode

Tips for implementing SVG in background images on Internet Explorer

Having a similar issue to the one discussed in this thread. My background images are functioning properly on all browsers except for versions lower than IE10. After reading through that post, I created a background image in SVG format specifically for IE10 ...

htmlcssinternet-explorersvg

Trouble triggering hidden radio button in Angular 9 when clicked

I have implemented radio buttons within a div with the following CSS styles (to enable selection by clicking on the div): .plans-list { display: flex; justify-content: center; margin: 2rem 0; .plan { display: flex; margin: 0 0.5rem; p ...

javascriptcssangular

Scrolling up with CSS3 news headlines auto feature

It has come to my attention that the marquee tag is deprecated in html5. I am trying to create a news headline display that scrolls automatically, starting from the top news and slowly moving upwards. Once the last news item disappears, the first one shoul ...

javascripthtmlcss

Mastering the use of Quasar variables in your scss styles is crucial for optimizing your

I recently set up a project using Vue3 and Quasar by running vue add quasar. However, I am struggling to figure out how to utilize Quasar sass/scss variables. According to the documentation, I should use the following syntax: <style lang="scss&quo ...

cssvue.jssassquasar-framework

What could be causing my page to appear differently in medium resolutions with Bootstrap 4?

When viewing my basic Bootstrap 4 webpage on a medium screen size, there appears to be a blank space on the right side. https://i.sstatic.net/ohV20.jpg Visit the page Thank you very much. ...

htmlcssbootstrap-4

Creating a dual style name within a single component using Styled Components

Need assistance with implementing this code using styled components or CSS for transitions. The code from style.css: .slide { opacity: 0; transition-duration: 1s ease; } .slide.active { opacity: 1; transition-duration: 1s; transform: scale(1.08 ...

cssreactjstypescriptnext.jsstyled-components

Creating stylish grid-based tables in Bootstrap 4

I'm currently updating the front-end of an application by utilizing bootstrap 4. I've encountered tables in certain sections of the application that I want to replace, so I'm converting them into a .row/.col grid system. While bootstrap prov ...

htmlcsstwitter-bootstrapbootstrap-4

Avoid cascading of the 'display' property in JavaScript styling to prevent inheritance

Is there a way in Javascript to toggle the visibility of a larger portion of HTML without affecting inner display properties with display: <value>? Despite setting an outer display property using Javascript, the inner display properties are also alt ...

javascripthtmlcss