I'm trying to develope a mobile theme based on a Wordpress site.
The question is not about Wordpress but, why my CSS code appear in a way on, e.g. my GNexus (i tried also with a Windows Phone), but quite different on an iPad, always in portrait mode.
In particular i'm trying to create an horizontal nav menu that contains these menu voices:
MENU (a collapsed voice that contains all pages)
SEARCH FORM (a search form displayed at the center of the nav bar)
A LANGUAGE SELECTOR (aligned to the right side of the nav bar, with its own arrow to show other languages available)
I've copied my code here: http://jsfiddle.net/S26zx/
I'm using, also, this media query:
#media only screen and (orientation : portrait) {
/* MY CSS CODE */
}
These are differences between two version: http://i.imgur.com/frvvKzj.png
So, why iPad displays sub voices like "Menu" is already clicked, and why that sub-voices are shown in horizontal?
Thanks in advance for the help!
Set your CSS for different layouts.
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
Related
I've got website: https://romeo24.live/ and there I've got a social plugin on the right top corner. On the desktop is ok, but I wanted to hide it on mobile devices. Should I make it with css? Is it possible? Thanks
You can use #media CSS at-rule for control style sheet in some screens (like mobile devices). In your site, you can use this CSS code for example:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#sfsi_floater {
display: none;
}
}
I am trying to design for 3 different views, iphone, tablet and desktop.
This is my media query.
#media only screen and (min-width: 320px) {
**mobile/iphone style**
}
#media only screen and (min-width: 768px) {
**tablet style**
}
#media only screen and (min-width: 992px) {
** desktop/bigger screens **
}
So I started with mobile view and everything is fine. Then I am now styling tablet and everything I did on mobile view is being carried over in my tablet view. For example, I set padding somewhere in mobile view and the padding is screwing with my tablet view. I am not sure what I am doing wrong. I might have more problems later on when I start working on the desktop view. Is this the proper way of making media query?
This #media only screen and (min-width: 320px) will target all screen with min-width:320px. One way you can alter the MQ is by having this
#media only screen and (max-width: 767px) {
**mobile/iphone style**
}
In the above MQ style will be taken on those devices below tablet screen size .
Fore more you can find here Media Queries: How to target desktop, tablet and mobile?
I'm doing a website that is supposed to work on mobile devices. I have researched about the subject and every website recommends that I use a different media query for each device I intend the website to work on, for example:
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* etc... */
However I feel it would be much much simpler to just use one media query for landscape and another for portrait orientation, but I haven't found anyone recommending that.
I imagine you may want to design something more specific for tablet. But speaking only about mobile phones, I can only thing of a reason to have different media queries for each device if you want something CRAZY specific.
Is there any reason for it?
Should I add a media query for each device or is it "safe" to continue with only two media queries?
That's absolutely fine. Don't forget to add the responsive meta tag to every page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and then use media queries as you resize your preview window width and height. That'll make the website same as the desktop version.
You can totally pull it off with just one or two media queries. I do it all the time for tablet and then for mobile in fully responsive sites that work on all devices. Those type of fleshed out media queries are for very specific sizes when the developer wants to have a set version of the site for this size and that size.
#media screen and (max-width: 1024px) {
/* Landscape style changes */
}
#media screen and (max-width: 768px) {
/* Portrait to mobile style changes */
}
#media screen and (max-width: 450px) {
/* Maybe one more because that header text doesn't fit anymore on smaller screen */
}
It will be as good the rest of your code, but if you have clean css this should not be a problem.
There is NO problem with it, as far as I see it.
You make your site Responsive for not only the browser window (resizing) but also Adaptive on specific devices. Adding and on those media queries is good too if you see how it behaves (target) on Android phones since your breakpoint basis are iPhone.
You may consider creating another .css file for phone/mobile, the same goes for others (Tablet, TV, etc).
w3schools - media queries
Put all your mobile queries on separate .css. Facebook did the same m.facebook.com.
Bootstrap has an amazing responsive layout system, however, sometimes its sizing with retina screens isn't quite 'right'.
For example, my retina iPad has a huge screen size but the actual display isn't the same. On the iPad I'd like to hide the left navigation component and use the expand button in the header control to show/hide, however, my iPad retina hits the large screen size and therefore is not hidden.
I've got my left nav using the bootstrap 3 classes: nav-left nav-collapse and I realize I can adjust the min/mid/max sizes but i dont think thats the right approach. What am I missing?
Style your page using #media queries.
Just like this:
#media for retina
#media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
.nav-left {
/* STYLE HERE YOUR MIN/MAX SIZE */
}
.nav-collapse {
/* STYLE HERE YOUR MIN/MAX SIZE */
}
}
#media for iPad Landscape and Portrait
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
/* STYLES GO HERE */
}
Source of #media for iPad/iPhone #media queries
I am using bootstrap to build a client's site and I have come unstuck when trying to target landscape and portrait orientation on mobile in order to add some specific styles for both viewports. How do I target portrait and landscape orientation for mobile styles? I need to add specific styles at 320px breakpoint and certain styles at 480px breakpoint. With my current media queries this is not working Currently in my stylesheet I have the following:
/* portrait phones */
#media only screen and (max-width: 320px) and (orientation:portrait) {
/* Styles */
}
/* landscape phones */
#media only screen and (min-width: 321px) and (orientation:landscape) {
/* Styles */
}
If I put styles in for landscape however I don't think they are being picked up. Every time I make a change and then refresh my Iphone I don't see any difference. Im thinking maybe my media queries are wrong? If there is a better way to target mobile states I would greatly appreciate any help.
Try to use:
#media (orientation: portrait) and (max-width: 400px) {Fooobar}
#media (orientation: landscape) and (max-width: 400px) {foobar}
I managed to resolve this issue in the end by adding a max-width to my 321px media query and was able to target both landscape and portrait mobile orientation. I also found in my header I had: initial-scale=1 which seemed to be causing the problem and after removing it I was able to target the mobile breakpoints I needed.
/*Portrait phones */
#media (max-width:320px){}
/* Landscape phones and down */
#media (min-width: 321px) and (max-width: 480px) {}