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
Related
the demo: https://codesandbox.io/s/bold-cloud-zsnss?file=/src/styles.css:937-1010
in the css file I have a media query that targets any device which has a width under 500px
#media all and (max-width: 500px) {
.wrapper {
display: flex;
}
}
However it didn't have any effects on the
<div class="wrapper">
A couple people are saying it is working fine. I have attached a screenshot to show that it is in fact not working.
I cannot figure out where it went wrong.
Another question is, what is the different between
#media all and (max-width: 1000px) {
}
and
#media (max-width: 1000px) {
}
I have seen both in examples of media queries.
The media query doesn't apply because the effective browser width is not small enough.
Add
<meta name="viewport" content="width=device-width, initial-scale=1" />
… to the <head>.
Without it mobile browsers (and tools which simulate them) will assume the design is intended for desktop browsers only and will zoom out to simulate having a desktop width screen.
See MDN for further reading.
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>
So I have made a HTML email, with a mediaquery for screens under 399px width. Everything works fine until you open the mail on portrait mode(width under 399px), and then rotate your screen to landscape mode. When you rotate the screen it seems like the width doesn't update to the new width (let's say 450px, so the mediaquery isn't active).
When I have my phone in landscape mode, and then open the HTML mail everything is fine.
I've already tried different mediaqueries with max-width, device-widthand orientation: landscape. In the head i've the meta tag <meta name="viewport" content="width=device-width, initial-scale=1">
Here is my media query:
#media screen and (max-device-width: 399px) and (max-width: 399px) {
#body_table {
padding: 0 10px;
}
.container {
width: 100%;
}
}
I am less confused to make a website only for mobile and tablet not a desktop. I need to know only one thing.
Should I use <meta name="viewport" content="width=device-width, initial-scale=1"> and define #media only screen for specific device?
Yes, however your website still will be accesible from other devices.I can explain it for you:
Using tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
It will adjust webpage width to match device width and set initial scale to 1 (no zooming). So for example, if you open this page using iPad, web browse will display page in 1024x768 (landscape) or 768x1024 (portrait).
initial-scale=1
This will force to display webpage with zoom set to 1.
Using media queries CSS3 you can set different CSS styles for different devices:
Styles for Tablets
#media screen and (min-width: 768px) and (max-width: 1024px) {
/* Styles for tablets */
}
Styles for Desktop
#media screen and (min-width: 1025px) and (max-width: 1280px) {
/* Styles for Desktops */
}
Just tried my hand at using media queries to make my site responsive.
I have a div that, on a normal size desktop browser is 50% of the total width of the viewport. When using mobile iOS, I want that to change to 100% of the width. That works currently with the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0" />
<link href='style.css' rel='stylesheet' type='text/css'>
<link href="smalldevice.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="social">Content</div>
</body>
</html>
The regarding CSS for the normal page is:
#social {
position:relative;
margin-top:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align:center;
width: 100%;
max-width:640px;
}
And the smalldevice.css is:
#media screen and (min-width: 640px) {
#social {
width:50%;
}
When resizing my browser window that works when I reach a viewport width of 640px, and it changes the width of #social to 100%. Testing on iOS mobile works too. But when changing to landscape mode (viewport width becomes 1136px, thus using the media query, it does not change the width of the #social element to 50%. On a desktop with a resizable window it does work. What's going wrong?
Edit: I set up a demo that seems to work when resizing the browser (I added a background-color so the div-width is visible) here: http://codepen.io/anon/pen/AtysL
#media screen and (min-width: 640px), (orientation: landscape)
Should work just fine.