I want to hide a div on all devices with a screen resolution that is less than 1024. This is the div that adds the space after 3 images:
<div class="page-banners clearer"> </div>
And this is the page:
http://m.theseolounge.co.uk/
and this is the code I am using:
#media only screen and (max-device-width :1024px)
{
.page-banners
{
display: none !important;
}
}
What am I doing wrong?
Make sure you have a <meta> viewport tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Don't use !important for the style, and use max-width instead of max-device-width, like this:
#media only screen and (max-width:1024px){
.page-banners {
display: none;
}
}
Related
I have an image that is a link also at the top of my website, like a banner, and when I go on my mobile to look at it, it stays the same size. How do I make it smaller for mobile devices?
Assuming the rest of your website is responsive you can just add a width of 100% to the image.
So for example, if your image had a class of 'my-img'
.my-img {
width:100%;
max-width:600px;
height:auto;
}
Or if you wanted to do it inline
<img src="" class="my-img" style="width:100%;max-width:600px;height:auto" />
probably it allready is responsive, even if you didn´t notice. you must have something like this in your code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Add media queries on your code like:
#media screen and (max-width: 600px) {
#logo{
width: 100%;
height: auto;
//in case you want a max-width-> max-width: 200px;
}
}
1. Use Bootstrap js and Bootstrap CSS in that use media queries according to
screen
2. width do the coding or use class xs sm md lg.
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Please make sure that you have the following tag in your web-page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and then add image like following
<img src="your image path" alt="" class="heroImage">
<style>
.heroImage{width: 100%;max-width: 100%;}
</style>
My #media only screen and (max-width:860px;){ doesn't work on the browsers when I put the html-code inspector on mobile.
its mostly explained on this image.
It does work on my other #media codes for example:
#media only screen and (max-width: 1000px) {
.extramargin {
margin-left: 0;
}
#click {
margin-left: 40px;
width: 90%;
}
}
If more code is needed I can send more code. I don't know what part of my code cause I have 1200 lines of code and have to search a time before I will find everything to make a code snippet. But if its needed I can do that.
You have to tell the browser that you want the width of device to be the ACTUAL width of the device. So, you have to set the viewport.
Just include this in the <head> section
<meta name="viewport" content="width=device-width, initial-scale=1" />
I'd like the background color to change while changing orientation. I have the following code:
<meta name="viewport" content="width=device-width">
...
#media all and (max-device-width: 360px) {
div { background-color: green; } }
#media all and (min-device-width: 361px) {
div { background-color: blue; } }
Unfortunately this doesn't work. But when i change max-device-width and min-device-width to max-width and min-width it works.
Why the code with max-device-width and min-device-width isn't working?
This should work:
Add this to your HTML Page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And to your css code you have to add:
div {
background-color: blue;
}
#media (max-width: 360px) {
div{
background-color: green;
}
}
So when the window width is under 360 Pixel, the background-color will change to green, otherwise it will be blue.
Because it has to know that it is a device by displaying it. So it excludes all desktop visibility.
I would recommend not using this because not all device browsers send a recognition that the content is viewed on a device making it unpredictable when your design is applied.
Stick to min-width and height it is saver.
I'm trying to accomodate a really really old website to mobile standards and for some reason it doesn't get a width of 320 or whatever pixel width when i activate the responsive view in chrome dev tools. The result of this makes the pixels small while still maintaining the original 900 px width (in the original pc version that's the fixed size according to which the site was built on)
This would be my media query CSS:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body * {
width: auto;
}
#container,
#header,
#nav,
#container #wrapper,
#content,
#sidebar,
#wrapper-bottom,
#footer,
#footer-inner,
#footer-content
{
width: auto;
height: auto;
float: none;
}
/* Header
-------------------------------------------------------------------*/
#header h1{
display: block;
text-align: center;
}
#header #search{
position: static;
display: block;
}
/* Navigation
-------------------------------------------------------------------*/
#nav ul{
position: static;
}
}
If you need more are viewing into the mobile device and media query is not working then please check the meta tag in head
<meta name="viewport" content="width=device-width, initial-scale=1">
You must use meta viewport along with your CSS. Something like this by instance :
<meta name="viewport" content="width=device-width, initial-scale=1">
If you're viewing on your PC remove the word device from min-device-width and max-device-width.
In addition, make sure to use the meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's likely that some element on the page has a fixed width that doesn't allow for the page to resize as desired. You need to go through the elements and find it. I've ran across this issue on several sites.
Problem that bugs me at the moment. Have not found answer so far.
I've got a site with minimum width of 480px applied for devices with screen smaller than 640px;
<meta name="viewport" content=" initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
<style>
body {margin:0; padding:0;}
#media screen and (max-width: 640px) {
.div {width:100%; min-width:480px; background:#ff0000; color:#ffffff;}
}
</style>
Thing is, when you open a file on mobile, it does not fit the screen in portrait mode. You need to double click to fit it.
Is there anything could be done so that opens fit to screen on portrait mode?
Thanks guys.
You have maximum scale and initial scale in your viewport. Change your viewport to : <meta name="viewport" content="width=device-width, initial-scale=1.0">
Ahhh got ya. Right, below are two links... the 2nd one works keeping the color red - I think that's what your after (code for 2nd link example below, you will need both #medias)! Works on my phone now anyway!
http://www.bootply.com/render/115758
http://www.bootply.com/render/115760
#media (min-width:480px) and (max-width: 640px){
.div {
width: 100%;
background: #ff0000;
color: #ffffff;
}
}
#media (max-width: 640px){
.div {
background: #ff0000;
color: #ffffff;
}
}