I have a website which must be responsive for mobile phones. I've created it using my desktop.
When I adjust browser windows it's working perfectly but when I check it on my mobile phone(Microsoft-640), it seems not responsive to the mobile view.
PLease you can add meta tag viewport for responsive as under:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will be helpful to make your website as mobile view by your own.
The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things.
For example:
Width and height (of the browser window)
device width and height
orientation – for example is a phone in landscape or portrait mode?
resolution
Linking a separate stylesheet using media queries
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices
we can use the following syntax:
#media only screen and (max-device-width: 480px) {
}
Example code:
#media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
div#header h1 {
font-size: 140%;
}
#content {
float: none;
width: 100%;
}
#navigation {
float:none;
width: auto;
}
}
For some more reference: 1 click me please, 2 click me too
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>
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" />
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
#media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width its working
#media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
https://jsfiddle.net/j4Laddtk/
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Working JSFiddle
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)
Try this method.
This will target based on device
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
#media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
You need to place the #media queries after you declare your standard
Another thing that can happen is that you do something really stupid like:
#media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
#media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
This worked for me
#media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
#media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
#media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.
Hello guys i have made a website by the help of Dreamweaver in HTML, CSS and JavaScript now my screen is 15.4 inch whenever i m opening in small screens so it give me an scroll bar to see whole of my website in the width form.
i have used PX with divs that i created my whole website instead of percentage but i don't know why i m facing this problem.
.wrapper
{
width:1320px;
height:760px;
border:solid 1px #000;
margin:0 auto;
background:url(images/Background_Image.jpg) no-repeat;
}
.wrapper .logo
{
background:url(images/logo.png) no-repeat;
width:395px;
height:180px;
margin-left:323px;
margin-top:10px;
float:left;
// same method for other divs
}
Add this meta tag to your head
viewport - most important and most useful of all the meta tags. width controls the width of viewport of device, initial-scale loads the initial zoom level when page loads
<meta name="viewport" content="width=device-width, initial-scale=1">
Check Mozilla Docs - Viewport
make use of media queries
#media screen and (min-width: 700px) and (orientation: landscape) { ... }
Mozilla Docs - Media queries
Percentage/em is good if you want your site to be responsive