- This topic is empty.
-
AuthorPosts
-
December 25, 2014 at 9:18 am #191620portiaParticipant
Hi,
I have my media queries in the main.css. The dropline menu css code is in a separate stylesheet: droplinebar.css
The order of loading stylesheet is as follows:
<link rel=”stylesheet” href=”css/normalize.css”>
<link rel=”stylesheet” type=”text/css” href=”css/droplinebar.css”>
<link rel=”stylesheet” href=”css/main.css”>So if I have all my media queries in main.css. It works fine apart from anything related to dropline menu. It does not change anything. If, on the other hand, I put the media query line in droplinebar.css, it works as intended. I don’t want to split the media query code over two stylesheets. Any help on that? Thank you.
#mydroplinemenu entry below doesn’t work below (main.css) however if I put another @media query with #mydroplinemenu in droplinebar.css it works fine (changes the background of the menu).
@media only screen and (max-width: 40em) {
body {
}
footer {
width: 100%;
}
.main {
width: 90%;
}
#mydroplinemenu {
background-color: red;
}
}You can check everything here: http://www.install-design.co.uk/id/
Thank you
December 25, 2014 at 11:34 am #191626WestinParticipantIt is good practice to divide your code into separate files for development purposes, however, for the sake of HTTP requests, you should look into be compressing all of those files into one.
I would suggest taking a look at something like sass to help with that. Once you learn that, try implementing Compass to help with vendor prefixes.
If you are not interested in learning sass right now, at least copy and paste the contents of normalize.css, droplinebar.css, and main.css into one file.
December 25, 2014 at 11:47 am #191627portiaParticipantThanks for your reply. I know of sass/compass, started playing with it. Would it be possible, though, to convert the existing code into sass at this stage? or does it only make sense when you start a new project?
December 25, 2014 at 5:21 pm #191630WestinParticipantThanks for your reply. I know of sass/compass, started playing with it. Would it be possible, though, to convert the existing code into sass at this stage? or does it only make sense when you start a new project?
Sass is essentially an extension of CSS that gives you conditionals, functions, variables, ect. In other words, you can take any existing CSS code, throw it into an .scss file and it will work with no problem.
Since you only have about 500 lines of css uncompressed, it should not take too long to implement sass into your existing code if you wanted to. Technically, you don’t have to touch your current CSS to implement sass, so that is up to you.
I personally would go ahead and implement sass into my current code.
December 26, 2014 at 4:25 pm #191665portiaParticipantOk. Thank you for that. I actually decided to start fresh and went the sass/compass way. I’ll be back soon:)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.