So our website is in its last stages before we make it live, however we have just noticed when we were checking mobile responsive everything was working fine, until we rotated the mobile to landscape view and it displayed the same styles as on a desktop and the responsive media wearies weren't working!
our responsive code is as follows:
#media screen and (max-width:600px){
.stats{
display:none;
}
}
can anyone help please?
A landscape device ratio is bigger than 600px. If you use chrome, dev tools, when re sizing the viewport it shows you exactly the amount of pixels which is visible.
Off the top off my head, i would say you need to change your media query to;
#media screen and (max-width:787px){
.stats{
display:none;
}
}
add
<meta name="viewport" content="width=device-width, initial-scale=1">
between head tags so you can get correct width from mobile devices (https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag) and change your media query as
#media screen and (max-width:767px){
.stats{
display:none;
}
}
for mobile devices (phones)
Related
I have a simple script:
<style>
#media only screen and (max-width: 600px) {
body { background-color: red; }
}
</style>
<body>test</body>
This works fine on my PC. However, on my phones (both 2 of them), regardless of the browser, it doesn't work. Only when I change the max-width to 980px that it changes red. Obviously my phones aren't that large. I try to add this ruler, and while its length is fixed on PC (as a good ruler should be), on my phones it's shrunk.
Do you know why is that?
Make sure you have set a viewport meta tag inside your head tag.
Mobile devices will usually use a virtual viewport to display websites. The meta tag tells the browser how it should display the site on mobile.
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width tells the browser that it should set the virtual viewport to be the width of the device, and initial-scale=1 sets the default zoom level.
I make a portfolio page, but I just make for large device. Now I want responsive so can I use #media query?
Here is my page, it looks good in large device but medium device and mobile look bad:
http://khanh19934.github.io/demofullport/
example
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Here are some ideas to get you started.
Begin by adding a viewport meta tag in the head of your page, this will instruct mobile devices not to scale the content to fit the viewport (window width)
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<head/>
Then you need to examine all elements on the page and adjust them where necessary so they work for all screen widths.
One approach would be to start with a wide window, then decrease the width until something doesn't look good. At that point inspect and adjust the css for the element in question.
You'll probably create a media query which targets the element at that viewport.
For example, you might decide that when the viewport is 1000px wide, the title div in the centre of your page is too small, it's currently styled at 25%, so you create a media query like
#media screen and (max-width: 1000px){
#title{
width:50%;
}
}
If you are new to responsive design spend some time getting up to speed with Chrome Developer Tools and what you can do with it. It's indispensable for work like this.
Good luck!
My website has 4 media queries, one for mobile (fluid), one for tablet (720px), small screens (940px) and big screens (1140px). Mobile and tablet will show a mobile menu, small and big screen will have a normal menu which will show the sub-menu on hover.
The Queries:
< 768px // Mobile
> 768px and < 1024px // Tablet
> 1024px and < 1200px // Small screens
> 1200px // Big screens
The Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
The problem
iPad will show Small screens (hover menu) because the width is 1024px. Tablet and mobiles (or touch devices) should only show the mobile menu regardless of there width, because touch devices can not handle :hover.
Solutions:
Neither one of the underlying solutions are the way I want it. I am looking for a pure CSS version to detect either a mobile devices or a touch device. Off course one of these solutions will be applied if there is no CSS option.
Modernizr - It can detected if a device is mobile or tablet and it can detect if it is a touch device. Downside is that you have to add a package which will result in an extra http request and it will make the website 'slower'. An other downside is that it will not work when Javascript is disabled.
Javascript - Use Javascript to detect all userAgent for mobile and tablets. Downside is that it will not work if Javascript is disabled and you have to keep an eye out for new devices / userAgent
CSS (device-max-width) - Well this seems to be the solution, but I am afraid of conflicts when I have a (device-max-width: 768px), (device-min-width: 768px) together with my normal desktop queries (min-width:1024px) and (max-width: 1200px) and (min-width: 1200px)
The proper solution for your problem exists in the CSS specifications, but has not been implemented yet:
https://drafts.csswg.org/mediaqueries/#hover
#media (hover) {
/*styles for devices where the user can hover*/
}
#media not (hover) {
/*styles for devices where the user cannot hover, such as mobiles and tablets*/
}
Until browsers get around implementing it, you're stuck with nasty workarounds such as browser sniffing.
I'm having an issue with how my site is being displayed on my ipad. I've tried to set the viewport to:
<meta name="viewport" content="width=device-width, initial-scale=1">
Which can be seen at http://erichschubert.com/viewport.html.
But it always results in my site appearing zoomed in and even when zooming out, the whole site is not visible.
As of now I have it running with:
<meta name="viewport" content="width=1024">
Which can be seen at http://erichschubert.com.
It appears fine, however, when the ipad is turned to landscape it zooms in and leaves a huge black sidebar on the right side.
The header on the site has a fixed position and is also not displaying properly when zoomed in. Is the issue simply that it is fixed? I would love to able to display the whole site in both portrait and landscape and also be able to zoom in uniformly.
Thank you so much for any help in advance.
The initial-scale=1 is only practical if you use it alongside media queries, so it accurately scales the page to fit the custom styles for that media query.
Changing it to width=1024 only forces a fixed page width, which is no use in your case.
The smoothest way to have a page scale without zooming issues is to use media queries, to allow it to resize depending on the screen size.
Most devices will re-assess the screen width when they detect a change in orientation, while others will simply zoom in to fit the portrait layout to the landscape view.
If you want to be sure, you could use:
#media only screen and (orientation:portrait) {
/* portrait stuff here */
}
and for landscape:
#media only screen and (orientation:landscape) {
/* landscape stuff here */
}
I wouldn't recommend being so specific as to target individual devices, it's a never-ending workload. 'iPad' used to mean 768px x 1024px, but now covers 2048px x 1536px too. There will always be new devices, but they will all be targetable via simple media queries.
I created a website without using mobile theme.
If i open my website in my smart phone browser, it resizing my theme.
I mean, It automatically reduce the size to my mobile browser.
For example...I already mention my text box size in my CSS code. The mobile screen pixel size is differ from desktop machine screen pixel size.
My Question is, how it reduce the screen resolution to mobile view?
please clear my doubt.
Thanks in advance.
Do you mean to resize your sites content for the handheld device? If you have a fluid layout (with % instead of pixels for widths) use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Further reading: http://developer.android.com/guide/webapps/targeting.html
Either there might be some media queries defined within your stylesheet like
#media handheld, only screen and (max-width: 1024px)
{
//Style goes here
}
Which is a style defined for screens having maximum width of 1024px.
Another possibility is, styles may be defined fully in percentage. So that the styles are changed according to the window size.
Again there might be some scripts used in your code to resize. All depends on the code that you are using. There are variety of methods which fits the view according to the screen size.
if you want scale it in browser tell it in css.And use all width in % values
eg:
#media handheld, only screen and (max-width: 767px) {
//mobile version css
}