I am having trouble with: http://brybell.me/vipeepz/skeleton/
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
#logo {
margin-top:400px;
position:relative;
}
}
That is the media query code within the layout.css file of the skeleton boilerplate/ framework.
It does not seem to be picking up the media query, I have tried many things and it doesn't seem to be working.
There are two logos now, because I was doing some testing, but I really am just trying to do something simple similar to instagram's website. simple phone image with screenshot and then a logo and block of text beneath.
I would appreciate any and all help. Thank you very much. I have been frustrated with this because I had the site how I wanted it on desktop, but can't get things to reposition to where I want them to be.
Your inline style declaration is overwriting the media query in this case since inline styles have higher specificity. Try moving your inline styles into an external stylesheet and your media query for #logo should be picked up.
Related
I am helping to style an app that is being built in Alpha Anywhere. The goal is to use #media tag to enable different styles to accommodate small phones in portrait orientation, large phones in portrait orientation, phones in landscape orientation, and Tablets.
My thought was to use #media screen and... to define ranges of sizes and have style code within it's brackets that define appropriate container and font sizes to make each format ideal for the device it will be shown on.
Because I'm working in Alpha Anywhere, there is a tab for the CSS. I need to put all the CSS in this one location so I can't ref out to different .css file for each different style. My hope was to bracket the code for one style within one media range and the code for another style within another and so on. Can I have multiple line/regions defined by their #media ranges?
#media screen and (min-width: 150px) and (max-width: 350px) and (orientation: portrait) {
/* Style Code for Small Phone Portrait Orientation Here */
}
#media screen and (min-width: 351px) and (max-width: 560px) and (orientation: portrait) {
/* Style Code for Large Phone Portrait Orientation Here */
}
#media screen and (max-width: 415px) and (orientation:landscape) {
/* Style Code for Phone Landscape Orientation Here */
}
#media screen and (min-width: 561px) {
/* Style Code for Tablet Here */
}
When I organize my style code like this it appears to be heeding only the style from the last of the 4 sets of code(tablet style). Is there a way for me to style these different sizes/orientations on one page?
Start from mobile and write your default styles. Make small changes at the next breakpoint up, keeping it simple and only overriding what is necessary. Media queries for orientation will only complicate things, so use only min-width.
/* Styles for default */
#media screen and (min-width: 480px) {
/* Add styles for next size up */
}
#media screen and (min-width: 720px) {
/* Add styles for next size up */
}
#media screen and (min-width: 960px) {
/* Add styles for next size up */
}
I have past experience of working with foundation. So I started using foundation media queries rules for creating responsive site.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
Here is my problem:
I am trying to hide a menubar in mobiles that is shown in desktop version (like how show-for-small in foundation). So I have defined stylings for mobile inside the media query #media only screen and (max-width: 40em). Surprisingly it is not working . So I have added the following rule before the above mentioned rule, #media only screen { }, then it worked.
I also tried the combination of #media only screen and (min-width:5 em) and (max-width: 40em). It also did not work.
I also have viewport meta tag defined in my page. Can anyone explain me why this is happening so ???
i think the problem maybe related to css specificity ( one command has higher priority)
so what about trying to put
#media only screen and (max-width: 40em)
in the last of your commands
and also inspect element in browser to know if this command is overwrited by other command
this is the most things happen with me when works with bootstrap ,wish this help you
You have to give your element the hide-for-small class so that it won't show up on mobile screens: Know as visibility classes
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) {}
I have been working for a while now with responsive design, and twitter's bootstrap seems to be one of the best responsive frameworks.
But I have a question regarding the media queries. I see in their documentation the following :
/* Landscape phones and down */
#media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
#media (min-width: 1200px) { ... }
And as I'm already testing it, between the 979px and 1200px the layout has no styles so everything will be messed up. So I don't understand the logic in there, could someone explain me please ?
It is supposed that width between 980px an 1199px is default and don't uses special media queries. So, you define all your styles for that width and after that, you justify your styles for other, "non-standard", screens.
I am trying to build a site with iphone / android / ipad compatibility but do not possess these devices. I tried using the Responsinator, but noticed that it was not even picking up my iphone media queries, such as:
/* iphone */
#media only screen and (max-device-width: 480px) {
#wrapper { background-color: red; }
}
The background for #wrapper was not showing up red on the Responsinator's iphone viewer, but on an actual iphone it is. Are there any good free sites or apps that will pick up css media queries so that I can develop for these devices without having to own all of them?
Thank you
I think the reason they're not picked up in "normal" browsers is that you're using max-device-width. If you use max-width instead they'll work "everywhere" (not IE).
I'd also suggest coding mobile first. Instead of starting with the largest resolution and working backwards, start with the smallest and improve the layout as the resolution grows.
Personally I use this code:
/* Default */
/* Little larger screen */
#media only screen and (min-width: 480px) {
}
/* Pads and larger phones */
#media only screen and (min-width: 600px) {
}
/* Larger pads */
#media only screen and (min-width: 768px) {
}
/* Horizontal pads and laptops */
#media only screen and (min-width: 992px) {
}
/* Really large screens */
#media only screen and (min-width: 1382px) {
}
/* 2X size (iPhone 4 etc) */
#media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
From: http://stuffandnonsense.co.uk/projects/320andup/