On my website I have the following meta tag :
<meta name="viewport" content="width=device-width, initial-scale=1">
The following HTML :
<body>
<div class="content">
<div class="inner clearfix">
</div>
</div>
</body>
And the following css :
.inner{width:1060px;}
#media screen and (max-width:640px){
.inner{width:100%;}
}
My problem : on Ipad, the width of the page is blocked at 768px while my site is 1060px wide. I would like the website to fit the width of the iPad, but I need to keep a 100% width on iPhone.
Can you help me please?
Thank you in advance!
This will cover both portrait and landscape.
#media screen and (min-width: 768px) and (max-width: 1024px) {
.inner { width: auto; }
}
Related
This question already has answers here:
CSS media queries: max-width OR max-height
(5 answers)
Closed 3 years ago.
i want some features to apply to a page when for example the minimum width of the screen is 1025px and when a mobile device is rotated horizontally.
i'm tryng with this media queries, am i doing wrong?
i want some features to apply to a page when for example the minimum width of the screen is 1025px and when a mobile device is rotated horizontally.
i'm tryng with this media queries, am i doing wrong?
#media (min-width: 1025px) or (orientation: landscape) {...}
I try with orientation and have a look to following code snippet
MAIN PROBLEM IN YOUR CODE IS:
screen is missed
#media only screen and (max-width: 600px) or (orientation: portrait)
For your code, changes required are
#media screen (min-width: 1025px) or (orientation: landscape) {...}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
#media only screen and (max-width: 600px) and (orientation: portrait){
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is 600 pixels or less and orientation is portrait, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
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>
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;
}
}
I use Meta tag inside head
<meta id="viewport" name="viewport" content="width=device-width"/>
Responsive css
In firefox even when the viewport width is 768px it is going to 767px media query can you please help me with it
#media only screen and (max-width: 767px)
{
header{position: fixed;top: 0px;width: 100%;background: #fff;z-index: 9999;}
}
Check this Example Fiddle
It works perfectly in chrome but not in firefox
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;
}
}