I am using foundation css 5 to build a web application and it is wqorking perfect in tablet and desktop view. But when coming to mobile view it is not catching CSS properties which I have defined manually.
I checked in media queries and saw that CSS for mobile view is in #media only screen { }
If I want to add the same property to mobile view, do I need to add below code in #media only screen {}??
.mentoring-bg-color {
background-color: #003B5D;
color: #C9C9C7;
}
above is working for desktop and tablet view OR large and medium view.
According to Foundation 5 media Queries
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
#media only screen and (max-width: 40em) {
.mentoring-bg-color {
background-color: #003B5D;
color: #C9C9C7;
}
}
The css mentoring-bg-color is apply only for mobile view.
Related
I have an css issue about one plugin on responsive view and I want to hide on mobile. I want to use another plugin only for mobile view. How can I do that?
You can use media query for hiding element on desktop and mobile
#media only screen and (max-width: 767px) and (min-width: 200px) {
.container_mobikle{
display:block !important;
}
}
I am having some issues with my website rendering on Apple devices.
I know -webkit can be added to CSS to make changes. But is the prefix powerful enough to overide layouts and key content?
Can I set a logo to display a fixed width for Safari users only, (OSX, Ipad, IPhones)
#media (min-width: 320px) and (max-width: 475px)
{
.logo {
width: 75%;
-webkit-width: 200px;
}
}
No, media queries target the browser's observed media properties, not its platform.
You can however query the navigator object in Javascript, and add additional classes to the DOM this way, for example:
if(navigator.userAgent.match(/ip(ad|od|hone)/i))
document.body.className += ' ios';
After this you can for example:
body.ios header:after {
content:'Apple blahblah';
}
I have used Bootstrap extensively and regularly used the css classes to hide various elements from mobile view. Does Skeleton CSS have a similar thing for hiding content on a mobile?
Used a media query example below:
#media only screen and (max-width: 500px) {
.someStyle {
background-color: display: none;
}
}
I'm trying to make my responsive CSS styles work only on tablets and smartphones. Basically I have a style for desktop, a style for mobile: portrait and a style for mobile: landscape. I don't want the mobile styles interfering with the desktop presentation at all. I have played around with countless media queries, but the result either the mobile styles are getting displayed on the desktop, or the mobile styles are displaying only on mobile devices but with only one set of rules (non-responsive). Is there a way I can keep the two completely separate?
My code I have right now goes like this:
/* regular desktop styles */
#media only screen
and (max-device-width: 600px)
{ ... }
/* mobile only styles when the device is 0-600px in maximum width */
#media only screen
and (max-device-width: 1000px)
{ ... }
/* mobile only styles when the device is up to 1000px in maximum width */
Why not use a media query range.
I'm currently working on a responsive layout for my employer and the ranges I'm using are as follows:
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes I'm using:
#media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
#media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
#media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
#media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
#media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
#media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
#media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (i.e. 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
Also, don't use px anywhere - use em's or %.
What's you've got there should be fine to work, but there is no actual "Is Mobile/Tablet" media query so you're always going to be stuck.
There are media queries for common breakpoints , but with the ever changing range of devices they're not guaranteed to work moving forwards.
The idea is that your site maintains the same brand across all sizes, so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport.
To further the answer above, using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones, however with the new releases of touch based screens that is not as good an option as it once was.
I had to solve a similar problem--I wanted certain styles to only apply to mobile devices in landscape mode. Essentially the fonts and line spacing looked fine in every other context, so I just needed the one exception for mobile landscape. This media query worked perfectly:
#media all and (max-width: 600px) and (orientation:landscape)
{
/* styles here */
}
Yes, this can be done via javascript feature detection ( or browser detection , e.g. Modernizr ) . Then, use yepnope.js to load required resources ( JS and/or CSS )
I'm trying to create a responsive design using Twitter bootstrap. Everything is going well but I cannot figure out how to set a minimum width for desktop users.
When a user is on a desktop I don't want them to be able to shrink the browser to the point where they see responsive features meant for the phone (e.g. the navbar mobile button). I would rather just have a horizontal scroll bar when the browser gets too small. How can I get this functionality without affecting the mobile layout?
You can address this with a media-query. The only problem is that you have to set a fixed width for this, min-width doesn't seem to work in this case (tested in Firefox and Chrome). If this is fine for you, you can try the following example:
// Should be something > 1024
#media only screen and (min-device-width: 1300px) {
body {
width: 1300px;
}
}
To replicate the way that logicvault.com have their site working you would need to change the Bootstrap CSS so that you only have one media query which kicks in at 480px.
Here's the media query they have set:
#media only screen and (max-width: 480px){
// styles here
}
I was able to achieve this functionality by using Frederic's advice:
// Should be something > 1024
#media only screen and (min-device-width: 1024px) {
body {
min-width: 1025px;
}
}
However, I also needed to adjust the bootstrap responsive files so the styles were only applied to touch devices. I ended up including Modernizr on my page and looking for the touch class.
E.g. change:
#media (min-width: 768px) and (max-width: 979px) {
// Styles are here
}
to:
#media (device-min-width: 768px) and (device-max-width: 979px) {
.touch {
// Styles go here
}