I have to override the property of a css element when it is viewed on mobile screen. Like there is a logo and it's top margin should be different when on desktop and some other value when on mobile or tablet.
Is it possible. If yes then how?
You can do this easily with Media Queries in css.
Here is a link from where you can get all media quires used for mobile responsive layouts: Media Queries for Responsive Layouts
In specific curly brace you have to write the css for elements for which you want changes with mobiles, tablets and other devices.
Like, as per your question you can change css for logo for mobile, tablets and other desktop screen.
Let me know if it helps you or not.
Thanks,
Mrunal.
Related
I am creating a site header / menu for a responsive site. I am using breakpoints of 960px and above for a desktop menu with hover states and dropdowns, and breakpoints 959px and below for a mobile menu display. This works for most use cases, but I also want the mobile menu to display on tablets in landscape mode, which are typically wider than the 960 breakpoint. I am trying to target these tablets with CSS media queries only, no JavaScript.
I originally thought to use pixel-ratio, something like this:
#media (max-width:959px), (-webkit-min-device-pixel-ratio:1.5) {
/*mobile styles here*/
}
#media (min-width:960px) and (-webkit-max-device-pixel-ratio:1.499) {
/*desktop styles here*/
}
This worked at first, but then I realized higher resolution Retina displays on desktops were getting the mobile menu. Unfortunately I need to support older versions of iOS (down to 7), so I cannot rely on Media Queries Level 4 and use the interaction queries.
Can anyone help with a media query set that can help me? I need to be able to set styles that apply to both widths less than 960 and tablets larger than 960, and set styles that apply to widths above 960 that are not tablets.
Thanks!
I have built a page with interactive world maps plugin at http://www.parentcenterhub.org/find-your-center/
All other pages of my site are responsive except this one. What CSS should I add and in which file so that this page is also responsive on all devices (Android,iPhone, tablets, etc.)
I don't know if twentythirteen is responsive by default, but that shouldn't be a problem. You should add media queries in your css file, specifying specific widths where your page 'breaks', and add css specific for that width.
For instance for mobile you'd have
#media only screen and (max-width: 767px){
/* css goes here*/
}
And for every major element you'd specify how it behaves when the width of your screen is less than 767px.
There are lots of tutorials on line, so check them out.
Can you help me to understand the idea of changing the page style on resize it,as if we
use another style that suits with the size of the window and make you see all page content.
I see that in some website
like this page
I check it's css and script ,I think the idea is in css ,but I don't sure and I wana know
if there are any jquery effectiveness or what css properties effectiveness to do that.
Thanks for help
You can use CSS media screen. To do that just view these links:
http://www.w3schools.com/css/css_mediatypes.asp
What does #media screen and (max-width: 1024px) mean in CSS?
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
And also you can use twitter bootstrap.
You need so-called responsive theme (i.e., a theme that looks great on desktops, tablet devices, and mobile devices). Most of Bootstrap themes are responsive. See at Start Bootstrap.
tl;dr: Does it make sense to scope "mobile" CSS under a .touch class (added by Modernizr) rather than with media queries based on viewport size?
I am creating mobile styles for a site designed to be desktop-only (i.e. the page is fixed at ~900px wide, many targets are too small for touch, etc). The site has lots of forms, some tables, and no images/video/charts. I cannot control the HTML structure (except with JS, which I'd like to avoid), and I cannot make meaningful changes to the existing desktop styles.
I've written a new style sheet that overrides those styles where necessary to make it work well on a phone and on a tablet in portrait mode using max-width media queries.
The problem is that when you turn the tablet to landscape mode the screen becomes 1024px wide which is where desktop styles ought to take over. However, a tablet is still a touch device and I feel the "mobile" style is better suited to tablets (larger tap targets, nicer layout of the form fields and labels, off-canvas menu, etc). It seems quite clunky and disorienting for a site to suddenly change just because you rotated the device.
Should I scope the mobile styles under the .touch class added by Modernizr instead of the viewport width? On the surface it doesn't sound like a bad idea, but then again I know that viewport-based media queries are the proper way to write styles so I can't help but feel I will run into trouble down the line.
You could use Modernizr to pick between two stylesheets to load.
In a file called small-enough.css or something, import your mobile styles based on a media query for tablet portrait size and down. Documentation found here. Just have this one line in it.
#import path/your-mobile-styles.css #media (max-width: [tablet portrait width]);
Then with modernizr if it's a touch device just load the mobile styles. If it is not touch load the file that uses the media query to decide to load the mobile styles.
Modernizr.load({
test: Modernizr.touch,
yep : 'your-mobile-styles.css',
nope: 'small-enough.css'
});
You could probably target those devices using a media query along the lines of
#media only screen and and (min-device-width:~whatever~) and (max-device-width:1024px) and (orientation:landscape) {
styles
}
We should also remember that not all mobile devices are touch enabled, such as some Blackberry phones, so enabling some features/styling based on the .touch class that modernizr adds can also help.
Task: Trying to make a mobile webpage: http://jsfiddle.net/anujbhai/hgaH7/3/ (also include jQuery & Bootstrap files in order to run properly).
Problem: Page should change layout according to Orientation - in landscape mode
<div id="videoThumbs">...</div>
will show 2 thumbnails and snaps beneath the
<div id="billboard">...</div>
while in the portrait mode the latter goes to the left of the screen and the former now shows only one thumbnail, appearing like a sidebar.
This is very hard to do with just mediaqueries and Bootstrap. I can't figure out a proper logic to be applied via JavaScript. Please help.
You can try using the default Bootstrap responsive utility classes.
Take a look at the documentation:
http://getbootstrap.com/css/#responsive-utilities-classes
http://getbootstrap.com/css/#grid-options
Small and Extra small devices classes can work for portrait tablet view and Small and Medium devices classes can works for landscape mode, you need to try various combinations.
Obviously, depends on the screen size of the tablet, but this works excellent in 7" and 9" tablets.