I was using media query and it was working, but now it just stopped working, but if I use the developer tool of the browser the media query works well
Here is my media query code, but I dont think that that is the error
#media only screen and (max-width: 760px) and (max-device-width: 760px) {
.conainerInp {
display: block !important;
}
.contInputs,
.contInputs3 {
flex: 100% !important;
max-width: 100% !important;
margin-bottom: 10px;
width: 100%;
}
.last {
margin-bottom: 60px;
}
.contenido {
display: flex !important;
flex-wrap: wrap !important;
}
.contenedoresGen {
max-width: 100% !important;
width: 100% !important;
}
::ng-deep .mat-horizontal-content-container {
padding: 0 !important;
}
::ng-deep.mat-horizontal-stepper-content {
overflow: auto !important;
}
::ng-deep .mat-tab-label-container {
overflow-x: auto !important;
}
}
the screen was at a measure less thant the indicated in the media query
You need to add the following meta to your HTML in the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I foun out the problem, it was my conditions, it neaded that the sceen be at 760px also the devie at the same time, I already had the meta tag before asking this, the solution was removing
and (max-device-width: 760px)
and it still working on movile because of the meta tag
Related
I was following a tutorial about media queries. When I open the HTML in Chrome/Firefox, I get a blank page, and nothing displays. When I inspect the page though, the code displays normally and I can see how the media queries work. I tried adjusting the min-width and max-width of the media queries but I still get a blank page in any browser I use. I have posted the original HTML below from the tutorial.
<!DOCTYPE html>
<html>
<head>
<title>Beginners CSS - Chapter 8</title>
<style type="text/css">
* {
margin: 0px;
}
main {
margin: 10px auto;
width: 600px;
padding: 30px;
margin-top: 0px;
background-color: olive;
display: block;
}
#media screen and (max-width: 350px) {
main {
background-color: #88a5e0;
}
}
#media screen and (min-width: 600px) {
main {
background-color: red;
}
}
#media screen and (min-width: 800px) {
main {
background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 400px;
}
}
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
</style>
</head>
<body>
<main>
<h1>Media Queries</h1>
<p>Media allows you to make your pages to change to fit any device.</p>
</main>
</body>
</html>
The screen width changes when the developer tool is opened on the right/left dock. So, the elements that you saw perhaps are from the min-width 800px media query.
The page when the minimum width is 1000 pixels is not "blank page and nothing displays". You can read from the code below, you're setting the background-color to white, hiding the h1 & p and removing the background-image when the min-width: 1000px.
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
The page is not blank, according to your code for screens with width more than 1000px you set this styles:
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #FFF;
}
h1, p {display: none;}
}
so the h1 and p1 element will not be displayed and the background will be white,
if you resize the window other media queries happen.
Also by Opening your developer tools you are resizing your window.
Mobile view of site
#media screen and (max-width: 600px) {
.sidebar {
width: 100% !important;
height: auto !important;
}
}
#media screen and (max-width: 600px) {
.content {
width: 100% !important;
margin-top: 20px !important;
}
#media screen and (max-width: 600px) {
.jdzn-footer-text img {
width: 100% !important;
}
}
#media screen and (max-width: 600px) {
.featured-card {
width: 100% !important;
}
}
I have already have the meta viewport tag, can anyone help me resolve this? Thanks.
Not sure what your viewport meta tag look like, but you may try replacing yours with this viewport meta tag in your index file.
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
I'm trying to use media querys, but I have a problem. When I resized my window, it doesn't do anything when I resize the window, I try with different options, for example:
I have this:
#media all and (max-width: 900px) {
#breakdown-search-clear-button {
margin-left: 28% !important;
}
#historico-incidencias{
width: 36.1% !important;
margin-left: 62% !important;
margin-top: -27.8% !important;
}
}
or this
#media screen and (max-width: 900px) {
#breakdown-search-clear-button {
margin-left: 28% !important;
}
#historico-incidencias{
width: 36.1% !important;
margin-left: 62% !important;
margin-top: -27.8% !important;
}
}
at the end of my css file. And it doesn't work. I try first with "#media screen" and then with "#media all", but it doesn't work in both cases when I resize the window.
Then I try to put tag on my .jso file, as you can see on this example:
I write this tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
And, at the end of the tag I write this:
<style>
/* On screens that are 600px wide or less, the background color is olive */
#media screen and (max-width: 900px) {
#breakdown-search-clear-button {
margin-left: 28% !important;
}
#historico-incidencias{
width: 36.1% !important;
margin-left: 62% !important;
margin-top: -27.8% !important;
}
}
</style>
But it doesn't do anything when I resize the window as on the css file.
HTML elements:
<div id="breakdown-search-clear-button" class="roundedButtonMin roundedButtonRight deleteBG" style="margin-left: 24% !important; margin-top: 1% !important;"></div>
<fieldset style="width: 46.1%; margin-left: 52%; margin-top: -23%; display: inline-block; vertical-align: top;" id="historico-incidencias">
<legend>Histórico</legend>
<div id="listHistoricalIncidences"></div>
</fieldset>
Anyone can help me, please?
Thank you!
I just got this theme and tried to import background image like the recommended size in the documentation but It seems something is odd
and these images have CSS problems in theme style.css
here is the link of my website
http://test.doublelift.kr
and here is the demonstration of the actual template
http://www.cssvillain.com/hungry/
the problem is abovious if you resize the window and see the image file shrink slowly instead of changing width based on px.
The image width is based on percentage on the template I've got, so I tried to make it to auto and write the style based on the height just like the original template
but It seems It is reading the style from somewhere else
no success on chrome's developer tool
I appreciate your help
#single-page-header {
height: 1000px !important;
overflow-y: visible !important;
}
.cycle-slideshow {
position: relative !important;
}
#single-pager-header .cycle-slideshow img {
display: block !important;
max-height: 1000px !important;
width: auto !important;
}
#media screen and (max-width: 1370px) and (min-width: 1025px) {
#single-page-header {
height: 720px !important;
}
#single-page-header .cycle-slideshow img {
max-height: 720px !important;
}
}
#media screen and (max-width: 1024px) {
.single-page-header-content {
overflow: hidden !important;
}
.single-page-header-content .cycle-slide-show {
overflow: hidden !important;
}
}
#media screen and (max-width: 1024px) and (min-width: 768px) {
#single-page-header .cycle-slideshow img {
max-height: 1000px;
}
}
#media screen and (max-width: 767px) {
#single-page-header {
height: 500px !important;
overflow: hidden !important;
}
}
#media screen and (min-width: 1025px) {
#single-page-header .cycle-slideshow img {
max-height: 1000px;
}
}
You may change the revolution slider setting for specific screen sizes options over there and then change the css according to your requirements.
This is the best way to handle i see.
I am trying to create an email that shows one image only when viewed on mobile and one image only when viewed on desktop on desktop.
I have gotten the desktop image to correctly disappear when viewed on mobile, but I am unsure how to get the same result for the reverse.
Any help would be appreciated.
The CSS I am using is as follows:
#media screen and (max-width: 600px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
.mobile-show {
display: block !important;
}
}
And the HTML
<img class="mobile-show" border="0" height="50" src="images/logo.svg" style="display: block;" width="250">
<img class="mobile-hide" border="0" height="50" src="images/logo.svg" style="display: inline;" width="100">
Need to setup a second media screen:
#media screen and (min-width: 600px) {
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
}
First of all add this meta tag for mobile deivce support if its missing like below.
<meta name="viewport" content="width=device-width, initial-scale=1">
Then using media queries you can achieve the thing you want.
#media screen and (max-width: 600px) {
.mobile-hide {
display: none !important;
}
.mobile-show {
display: block !important;
}
}
.mobile-hide {
display: block;
}
.mobile-show {
display: none;
}
#media screen and (max-width: 600px) {
.mobile-hide {
display: none !important;
}
.mobile-show {
display: block !important;
}
}
.mobile-hide {
display: block;
}
.mobile-show {
display: none;
}
You have to hide your mobile image always except in the mobile. So add a display:none to your image. Then your image will not appear no desktop and your CSS with medi will make it appear.
<img class="mobileShow" border="0" height="50" src="images/logo.svg" style="display: none;" width="250">
.desk-hide {
display: none !important;
}
.desk-show {
display: block !important;
}
#media screen and (max-width: 600px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
.mobile-show {
display: block !important;
}
}
<img class="mobile-show desk-hide" border="0" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="display: block;">
<img class="mobile-hide desk-show" border="0" src="https://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" style="display: inline;" />
You've created two classes for handling the mobile size behavior. Now, you have to do the same for desktop size. If you want this to work as intended, place the desktop size rules above the #media. So in the default screen size, the desktop rules are being applied, but when screen became less than 600px, it will apply the #media rules.
You can use picture tag which can use many image sources, example:
<picture>
<source srcset="images/logo-mobile.png" media="(max-width: 720px)">
<img src="images/logo.png">
</picture>
Are tablets mobile in your opinion or do you just want mobile phones? With todays phones and tablets it's unreliable to trust a simple media query like:
#media screen and (max-width: 600px) { }
Best way in my opinion is to use Javascript or PHP ( this PHP class is very interesting github.com/serbanghita/Mobile-detect ) to detect what device is being used and then apply the right style.
Its light, reliable and gives you all the data over what devices do your users have and it's always handy to know not just the device but also resolution, pixel depth, etc. & have even different image files for different users.