I have a website already made. I want to make a mobile version of this. I basically want to import a table from the main site into the mobile site. I want to take the CSS code from the main site that covers the table and then input in my CSS file for the mobile site (I already put the HTML code into the mobile site). The problem is, when I do that it starts to overwrite the current CSS file and change the design.
Help please!!
You will need to use media queries. This is a css3 function.
In the top of your html, you need to put the following:
<meta name="viewport" content="width=device-width" />
Then, in your css, you will do something like this:
#media only screen and (max-width : 320px) {
/* Styles */
}
This is a reference site for commonly used media queries.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You will basically need to do this for each size device you are optimizing for.
Also, if you have several of these, you might end up with a very large css file.
That could impede download speed especially on a phone. In that case, create
separate smaller css files and use conditional statements in your html to specify
which css to call. In that case, you will need to use something like this in your html:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />
Related
I would like to find a way to detect device type of visitors in order to load only the relevant stylesheet. ( Either desktop or mobile css )
Indeed, the CSS is render blocking, so, I would like to avoid 2 .CSS to be loaded every time ( style.css AND mobile.css )
Maybe there is another way to do it?
Regards,
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
Above will apply css only for device with screen with between 701px and 900px.
You can use media queries and set breakpoints. Refer below link for more information.
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
https://css-tricks.com/resolution-specific-stylesheets/
Is there a preference to where CSS media queries are defined? I.e. should I call them from my html like this:
<link rel="stylesheet" media="only screen and (min-width: 350px)" href="../assets/css/350.css" />
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="../assets/css/768.css" />
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="../assets/css/992.css" />
Or should I maintain one CSS file and define the media queries there?
Whatever works best for you, really.
Personally I prefer defining them inside my main CSS file, alongside the rules that they affect. For example:
#someElement {font-size:24pt;}
#media all and (min-width:350px) {
#someElement {font-size:12pt}
}
This keeps them close together so I don't lose track of them. It also means fewer HTTP requests.
Personally I would go for everything in a single file. You could (or should) manage the size and structure of your code by using a css preprocessor like less or sass. This way you can develop in multiple files, and combine / minimize them before you upload them to your webserver.
The main reason to use a single file is speed. Usually an extra request takes a lot longer then downloading a few extra kilobytes. It is also what is advised by the 'big ones' like Yahoo and Google...
Alright so I'm attempting to build a responsive design, and one of the things that needs to be done is to ignore an entire style-sheet for an image slider (as the one I'm using has fixed dimensions when using a particular theme).
So, is there any way to just ignore every css rule that's in that particular file?
The most simple way would be to not load the css on that page programmatically.
Otherwise you could specify the device or viewport width (whatever you use for sizing) to only load your stylesheet when the screen size matches.
Something like:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="alternate.css" />
Can't you just display:none on the sliders container on each media query you dont want it featured?
I am building a PhoneGap/Cordova project for iPhone.
I have 2 css files - one for general CSS rules and one for iPad relevant css that look like this:
<!--Main Style Sheet-->
<link rel="stylesheet" href="css/styles.css" />
<!-- iPad specific css-->
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />
The issue is that the iPad css is just behaving like normal css. CSS I put in there appears when I run both iPhone and iPad simulators.
Can anyone help me out?
Thanks!
For iPad you want min-device-width, not max-device-width (ie. an iPad has a minimum width of 768px in Portrait mode)
max-device-width gives us a maximum not a minimum, so it will affect all devices below 768 px including the iphone. Giving a min width too should fix it. Probably (min-device-width:481px)
In case the aforementioned solutions do not solve the problem for some readers, this question is directly relevant to responsive web design.
I would recommend utilizing only one style sheet with a media query inside of it.
#media screen and (max-width:768px){
/* Device Specific CSS rules here */
}
I have chosen max-width here because anything above that will render the normal CSS. You my then set up another media query with max-width of approximately 500px to target smart phones. Keep in mind that the media query automatically inherits all of the normal CSS rules specified and the only rules that need to be defined inside of the media query is the device specific styles.
This does exactly the same thing; however, this only requires the browser to parse one style sheet, generating a faster load time (minimal, but faster none-the-less.
When using a media query, you are also required to have a viewport meta tag in your HTML. Otherwise, your devices will render the same CSS as a desktop.
Also, CSS3 Media Queries are supported by most modern mobile browsers.
On my webpage, I have four columns and I'm normal computers the advertising looks good but when I go on my iPhone and makes certain columns bigger and squeezes the others in. Does anybody know how to keep the columns the same size on mobile devices. The page is mainly HTML.
turn of your scale. You can use this in your html:
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">
here is more info about this:
http://developer.apple.com
update:
yes there is different way to change design depends of the design.
for example 1 way to do is:
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iPhone.css">
so this css is going to take just your mobile, so do different design stylesheet for this .
same thing is :
#media handheld, only screen and (max-device-width: 480px) {
/* overrides or style additions for iPhone */
}
in case you do not want to create a new stylesheet.css , let say you want to change 1,2 classes.
but the idea re the same.
There is the JS ways and anthers depends what is you project app do and build on
google knows all these stuff.
here is a post what can be useful for you :
http://stackoverflow.com/questions/3839809/detect-iphone-ipad-purely-by-css