I'm applying media queries on my project , but when I`m resizing the browser , it doesn't work.But when I resize it from the developer tool (inspect element) it works...It sounds ridiculous but I'll show you with images.
In the following picture. I've applied media query for my menu-bar. As you can see , when I resize my browser , it doesn't work.
but when I resize the project from the developer tool , it works... I've applied only <meta name="viewport" content="width=device-width, initial-scale=1"> for the media queries.
The second issue is the following. Is there <meta> tag for tablets viewports?
Now my Media Query works on all mobiles , but on tablets doesn't. I've tried to reach some answer for mu issue but I didn't find anything...
My thoughts are that its because your query only applies to the device. If you were to try something like:
#media screen and (min-width: 480px) {
background-color:red;
}
Try that, but to be honest, I would think about introducing a style framework like Bootstrap.
It takes most of the headache around queries away. Also, it's great because you generally want to cater to mobile screens first, and Bootstrap does this pretty well by default.
Related
I have used a media query on my webpage and included a meta tag in my html to make it responsive for smaller devices as follows:
#media only screen and (max-width:768px){/*code for smartphones*/}
<meta type='viewport' content='width=device-width,initial-scale=1.0'>
NOTE: The media query code is to make the page viewable for smaller devices.
The problem is when I try running the code on the microsoft edge emulation tool or my smartphone the css code inside the media query does not run and as a result my webpage looks very small on small devices, the media query code only runs when I scale the browser window to a smaller size.
Please let me know how I should fix this so my webpage is responsive on all devices and tell me if I should elaborate more, any help is greatly appreciated thank you!
Originally what I wanted to do was to make the webpage responsive for mobile phones rather than different browser window sizes, I guess I should have mentioned that explicitly. I fixed that issue by using max-device-width rather than max-width, thought I would just share this for anyone encountering the same problem.
I have just finished designing and coding my new project. But I need it to work well in mobiles. I resized my screen to something like 350~400px width and started coding and adding some media-queries to it. Looks great in redimensioned browsers. I have cut some elements and features and everything was fine... until I tested it with my smartphone
The screen isn't big. Less than 4' (probably 3.5). I put some alerts in the code and realised its width was 980px. Almost 3 times bigger than my tests on resized browsers.
Everything is just too small. Other things are great: media queries are working, the cuts I made in the code are OK too, but you can barely see the content in my mobile. This is certainly not I wanted.
I want it to look like an App and indeed it looks like an app on the redimensioned browser.
How do you create your responsive websites to deal with problems like this one?
I read something about using EM (and there is something new called REM) units but I am still very confused about it. Do I have to change ALL the px to em?
And also I know you can set the font-size in the html or body tags and all the other elements will inherit from them. Is that an approach? What do you usually do? Is there a trick or something? I'm not using bootstrap nor any other front-end framework.
You can try adding the viewport <meta> tag :
<meta name="viewport" content="width=device-width, initial-scale=1">
Using the viewport meta tag to control layout on mobile browsers
Use media queries (Link) and percentages (%), 16px (default font size) = 100%. I hope it helps.
Im trying to make my website responsive, however Im having a little problem.
It works fine on my browser. If my browser is full screen then it looks how it should, and if I make the browser smaller then the media queries work perfect.
However if i then load onto a samsung galaxy S3 or ipod touch, it does not. It looks like the regular website, only crammed in smaller to fit the screen. It does fit 100% of the screen, however hot at all like it should.
I have searched through here for an answer. I have tried changing the widths, I have tried changing px to em. I have tried being less specific and just write for portable devices. Still doesnt work.
Can anyone help?
This is my media query..
#media only screen and (min-width: 150px) and (max-width:600px)
Try adding this between your head tags:
<meta name="viewport" content="width=device-width, initial-scale=1">
Unfortunately mobile phones have such high screen resolutions that my website comes it far to small. It adapts perfectly when zoomed in on a desktop browser but unfortunately on mobile browser the webpage viewport size does not actually change once zoomed. To try and solve this I have already gotten a script that detects a mobile user agent and then sets the body width to 500px, this looks about the perfect width but unfortunately the mobile browser does not set its viewport to 500 even after I set the meta for viewport 500 and this results in my webpage rendering in the corner of the browser. Once zoomed in it looks fine though but that is not what I want. My site is in some way similar to nokia.com and I want it to behave in the same way on a mobile client.
Can someone please tell me what the correct procedure is for doing something like this because I am in no way a proper web developer, I am just doing this to learn.
Here is my meta:
<meta name="viewport" content="width=500,initial-scale=1,maximum-scale=1,user-scalable=no">
You need to write conditional CSS rules for smaller browser sizes.
One example:
#media screen and (min-width: 768px) {
.item1{}
.item2{}
}
Here is a site I just found through a quick google search that should be able to get you started at least. http://www.conditional-css.com/usage
Good luck with your learning!
It is better to use #media queries (available is css3)
Something like:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) /* You can change this value per your requirements */
{
/* Your custom styles for mobile device */
}
Try this
<meta name="viewport" content="width=device-width", maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 />
and use the media query to target all the screen size
http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport
Hope this helps you
Finally solved it! It seems the reason I was having so much trouble is because the mobile device I was testing in was a Windows Phone 8 device and apparently WP8 does not really respond well to the viewport meta tag. This is easily solved by the addition of a MobileOptimized meta tag.
I'm using the Semantic Grid System to build a responsive site. However, something isn't quite right with the media queries that should obviously kick in once it hits a particular screen size.
I'll reference what i mean with their example on the website : if I view this on my iPhone for example, given that it is supposed to adjust to a single column structure on a mobile device, it still throws out the web version of the page. That is true for both Safari and Chrome on my iPhone. However, if I use the RWD bookmarklet to check it's appearance at different resolutions it appears as expected for the mobile resolution. Also, ironically, if I resize the page in Safari on my desktop it also adjusts accordingly once I get down to the approriate screen size, but not in Firefox.
The media query that it uses once it hits 720px is
#media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
.column(12);
margin-bottom: 1em;
}
}
and I might be wide of the mark here but I think that must be the issue. But given that this is directly from the semantic.gs website I don't think I have the expertise necessarily to question their own code.
Any idea what the problem might be?
The behavior that you describe can be the result of not using the 'viewport' meta tag in your markup:
<meta content="width=device-width" name="viewport">
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/