Jump to content
Tome9

CSS Stylesheets for multiple devices

Recommended Posts

Hi all

Probably a post that is rather popular and futile, but I'm start out freelance web designer and I'm creating my first large static website and I have come up with a few issues surrounding making the website responsive on different devices.

From the start, I have created 7 different stylesheets. One, a generic style.css file, then 6 sheets that are designed purely for the different device sizes. I've then in the <head> section set the limitations to each sheet (e.g. <link rel="stylesheet" media="(min-device-width: 377px) and (max-width: 480px)" href="css/style-xsmall.css" />).

1. This has worked, to varying levels of success, however, I'd like to get people opinions on whether this is best practice as I'd really like to understand and get the fundementals right from the start. I have thought about having one stylesheet with the @media sizes bit but that one stylesheet becomes unbearably long.

2. Furthermore, I've hit a snag. On one of the stylesheets I have hidden an element (using display: none;) as the text doesnt work well on a specific device size, this is then inherited on all the different device views as it is picking it up first, even when the device size is not set to that stylesheets parameters. So my question is, have I linked the stylesheets to the device widths correctly? and why do they pick up all 7 stylesheets?

I apologise if this is a reoccurring and futile topic for web designers, but I've been teaching myself for 6 years and it's something I'm looking to make my full time job so any advice for a young, start out freelancer would be much appreciated.

My website in question FYI is: https://biobreakwebdesign.co.uk

Thanks, Tom.

 

 

Share this post


Link to post
Share on other sites

Ahoy. Taking a look there's a lot of repetition between the style sheets. For example I assume style.css is your foundation as it loads without restriction, taking line 1 to 60 the difference between this file and say style-small.css or style-xsmall.css are tiny, but you've included all the 60 lines again. The differences in those same lines in style-small.css and style-xsmall.css;

a { color: #333333; }
a:hover { color: #e2dede !important; }

... and one more for style-small.css;

p { font-size: 0.65em; }

You need to only target when things are different, a lot less to process by adding a media query to the foundation for max width with those couple of lines. Just my 2 pence worth as always :) 

Edit: Forgot to say my general approach is to make the foundation for the overall layout, then keep action effects (e.g. hover, lightboxes etc) in separate css sheets so they can be loaded in the background if required. 

Edited by BrowserBugs

Share this post


Link to post
Share on other sites
9 minutes ago, BrowserBugs said:

Ahoy. Taking a look there's a lot of repetition between the style sheets. For example I assume style.css is your foundation as it loads without restriction, taking line 1 to 60 the difference between this file and say style-small.css or style-xsmall.css are tiny, but you've included all the 60 lines again. The differences in those same lines in style-small.css and style-xsmall.css;


a { color: #333333; }
a:hover { color: #e2dede !important; }

... and one more for style-small.css;


p { font-size: 0.65em; }

You need to only target when things are different, a lot less to process by adding a media query to the foundation for max width with those couple of lines. Just my 2 pence worth as always :) 

Edit: Forgot to say my general approach is to make the foundation for the overall layout, then keep action effects (e.g. hover, lightboxes etc) in separate css sheets so they can be loaded in the background if required. 

Thanks BrowserBugs for the reply. This makes perfect sense. I simply copied style.css into all the other ones and did think that it maybe wasted. Ill go through and delete all repititon.

Interesting on your stylesheets, do you then have sections in your main stylesheet for the different device sizes? sing @media then?

Share this post


Link to post
Share on other sites
32 minutes ago, Tome9 said:

Thanks BrowserBugs for the reply. This makes perfect sense. I simply copied style.css into all the other ones and did think that it maybe wasted. Ill go through and delete all repititon.

Interesting on your stylesheets, do you then have sections in your main stylesheet for the different device sizes? sing @media then?

Yes, I consider critical css which forms the first paint, then if it's not required to paint it can go elsewhere. So for example in your case for style.css it would be something like;

@import url(font-awesome.min.css);
/* Basic */
body, input, select, textarea {
font-size: 12pt;
color: #646464;
font-family: "gotham_mediumregular";
font-weight: 300;
line-height: 1.75em;
}
body.is-loading * {
-moz-animation: none !important;
-webkit-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
a {
color: #fff;
text-decoration: none;
font-family: 'gotham';
}
a:visited {
color: #fff;
}
strong, b {
color: #545454;
font-weight: 700;
}
em, i {
font-style: italic;
}
p {
margin: 0 0 2em 0;
font-family: 'gotham';
}
@media all and (max-width: 800px){
a { color: #333333; }
p { font-size: 0.65em; }
}

... cleaned it up a bit for you. Then in a second core sheet (e.g. foot.css) something like;

a {
-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
a:hover {
text-decoration: none;
color: #e2dede !important;
border-bottom-color: transparent;
}
@media all and (max-width: 800px){
a:hover { color: #e2dede !important; }
}

... as these bits are really only required once the page has loaded and can be interacted with. Second I use javascript to loads these non critical css files with noscript links in the head.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<link href="/css/core.css" rel="stylesheet" type="text/css">
<noscript>
<link href="/css/foot.css" rel="stylesheet" type="text/css">
</noscript>
</head>
<body>
....
<script type="text/javascript">
function loadjscssfile(filename, filetype){ 
if(filetype=="js"){ var fileref=document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", filename); fileref.setAttribute("charset", "utf-8"); }
if(filetype=="css"){ var fileref=document.createElement('link'); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); }
if(typeof fileref!="undefined") { document.getElementsByTagName("head")[0].appendChild(fileref); }
}
loadjscssfile("/css/foot.css", "css");
loadjscssfile("/js/somejsfile.js", "js");
</script>
</body>
</html>

 

Edited by BrowserBugs

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By jbenham10
      Hey!

      Having a bit of trouble getting a sticky navbar to work for a website I have to build for my college course...
      I have copied the JavaScript from the W3Schools method assuming it would apply directly to my pre-existing navbar but it seems not...I can't seem to see where I am going wrong, any ideas? I tried using both the 'nav' and 'navbar' elements in the scripting..

      Thanks in advance
      HTML
      <nav> <ul class="navbar"> <li class="navitem"><a href="">Home</a></li> <li class="navitem"><a href="">About</a></li> <li class="navitem"><a href="">Our Team</a></li> <li class="navitem"><a href="">Products</a></li> <li class="navitem"><a href="">Gallery/Portfolio</a></li> <li class="navitem"><a href="">Contact</a></li> </ul> </nav> CSS
      /* Navbar css*/ nav { float: left; display: block; width: 100%; left: 0; right: 0; top: 150px; background: #616A6B; height: 100px; } .navbar { list-style-type: none; max-width: 100%; text-align: center; overflow: hidden; position: static; padding-top: 25px; } .navitem { display: inline; padding-left: 10px; } .navitem a { text-decoration: none; font-size: 18px; color: white; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; } .navitem a:hover{ color: #CC0000; transition-duration: 0.8s; } .sticky { position: fixed; top: 0; width: 100%; } JavaScript
      <script> window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </script>  
    • By overground55
      Hey WebDesignerForum community,
      I am designing a website mockup, and will attach an image of what it looks like currently. I'm attempting to use CSS Grid to design my homepage. From here I really have 2 questions:
      First, my home page seems fairly long, at least compared to websites shown in tutorials I've found on CSS Grid. It seems like 'grid-template-areas' may be one way of building my home page. Will this become overly complicated and a less effective way of building something that looks like what I'm currently showing in my attached image(s)? The way I'm picturing it is that my 'grid-template-areas' will end up looking like this: ‘header header header nav nav'
      'article article article article article’
      'article article article aside aside’
      'article article article article article'
      'aside aside aside aside aside’
      'article article article article article'
      ‘aside aside article article article'
      'article article article article article’
      'article article article article article'
      'article section section section article'
      ‘footer footer footer footer footer’;
      I'm uncertain if I'm using the right semantic language for everything, but I will also overlay each 'grid-template-area' item on my website mockup so you can see exactly what I have imagined in my mind. I hope I have provided enough information for someone with more experience to help me here.
      Secondly, some of my imagery, such as the header, footer, and a few other images, touch the edge of the webpage. In the past when using CSS Grid, I couldn't get the grid to go all the way to the edge of the screen, but it had a small margin that seemed inherent. How can I avoid this from happening when I begin the html/css process?
      web mockup
      Web mockup with grid item assignments
    • By Taladmin
      Hi 
       
      I am new to design
      Could someone help to create something like that.
       
      https://ibb.co/bg2K2QP
    • By chrome86
      Hi,
      I'm looking to create a website that can show a preview of a personalised book. On this site a user should be able to enter their name and choose a character with different hair colours, skin colours and then hit 'preview'. This opens up a flipbook with just these variables replaced. Please see a great example here: Click HERE for website with customization page
      I know that templates exist for things like flipbooks (personally i use Wordpress as a novice, so a wordpress plugin would be useful), but how would this customized feature be created? For example, would i use a PDF, convert to a flipbook, and then layer (css?) the name, character on top with HTML5 code? Are there any existing templates that do this already or simpler alternatives?
      Thanks
    • By carloswebwdf
      Hello guys, godd afternoon !!
      I studied one apostille about CSS, but I can´t realize one simple task !!
      Hen I mouseover the 'button.botao', active the movement of 'div.traco' ! See below the 'Source Code'
      that I´m trying:

       
      <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Help me please !!
      Thanks
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      59,326
    • Most Online
      4,970

    Newest Member
    veracubano
    Joined
  • Forum Statistics

    • Total Topics
      66,003
    • Total Posts
      454,536
×