Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Strange Issue

edited June 2012 in Design

On my blog page...if I include the stylesheets reset, text, and mobile on the blog.html file, It causes to horizontal bars to appear...if I comment out those lines of code or remove them, the bars go away. It almost appears that since I do not include a logo on the page that is has that section shifted up to the top of the page. However, in the html code, I am not referencing a logo nor background to be included. I only have background: #mycolorchoice; in the blog.css file.

Any ideas? Thanks.

Comments

  • If you're not using the 960 grid, then you probably don't want to include those files since they may cause issues with your design. If you are, make sure they're loaded before your custom stylesheet, and read up on the 960.gs website for info on how to use them and customize them.

  • They are above my css...but since I am not using the 960 grid, I guess I can remove it. So if I want to make a mobile stylesheet that will get used if someone browses from phone...do I just add that css sheet to my layout folder and reference it like normal? I am sure I will need a js to detect browser as well.

  • That's correct. Look at the default template for an example of how to detect mobile devices in Elefant, should be something like {% if detect('mobile') %}

  • Sounds good...so I can just put that in my html file and be good to go?

  • Yup. The default .html has an example of this.

    {% if detect('mobile') %}
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="/css/mobile.css" />
    {% else %}
        <link rel="stylesheet" type="text/css" href="/css/reset.css" />
        <link rel="stylesheet" type="text/css" href="/css/text.css" />
        <link rel="stylesheet" type="text/css" href="/css/960.css" />
        <link rel="stylesheet" type="text/css" href="/css/style.css" />
    {% end %}
    
  • Okay...but you said to leave off the reset, text, and 960 right? Just leave mobile and my sheet for the page right?

  • edited June 2012

    How do I past code in here like you did without it processing? It doesn't format on neither my iPhone nor my Samsung Infuse Android phone.

  • You have to indent code with tabs or 4 spaces for it to recognize it and format it nicely. Forum posts are parsed for Markdown formatting.

  • Okay...heading out the office...will paste it up when I get to the house. If that doesn't work, I'll shoot you an email. Thanks.

  • edited June 2012
        <head>
    {% if detect('mobile') %}
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="/css/mobile.css" />
    {% else %}
        <link rel="stylesheet" type="text/css" href="/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/css/text.css" />
        <link rel="stylesheet" type="text/css" href="/layouts/mtech/style.css" />
    {% end %}
    {! admin/head !}
    {{ head|none }}
    

  • That looks like it should work. Is it not?

  • That's definitely working from a technical perspective, I guess your issues are with how it's displaying? I would try removing the reset.css and text.css since you're not using the full 960 grid system that those are a part of. Then you can see what your own CSS is doing relative to the browser's default experience, and tweak from there.

    Another insanely useful thing every designer should be using is Chrome's developer tools window. Take any element on your page (text, graphic, header, divs) in the page itself (not the source), right-click it and choose Inspect Element. That will pop up a source tree that you can click around in as well as a sidebar listing the CSS that's affecting that element. But the trick is, you can modify the CSS in that sidebar and test out changes to the page without having to edit + save your CSS.

    I use that to test out any new changes, then when I'm happy with something I just copy it over to my CSS file afterwards. Amazing time saver!

  • No..it doesn't work. I took out the extra lines. I use inspect element...its how I learned the CSS for my stylesheets as quick as I did. Thats how I do almost all my work. Try visiting my site from your mobile device..it doesn't work. It displays full web version instead of formatting for mobile.

  • Using the Atomic browser to view the source on my iPhone shows it is loading the correct CSS for me.

  • I didn't say it wasn't loading the correct CSS file...I was saying that if you open a web browser on your phone and type in cms.wetype.it and view the site, it is still formatted the size of the web page viewed from a browser on a computer. It is like the detector isn't seeing that you are browsing from a mobile device.

  • I'm afraid that comes down to how you style it from here. It's usually best to start a mobile version from a blank slate or just the basics of your main stylesheet, since all the layout elements will be different between the two. That way you're building up slowly and see what each change does to the mobile layout.

    You can also change the options in the viewport meta tag, depending on your needs. The one in the example works if the site is sized for mobile, but for ordinary sites they may still want zoom, for example.

  • I understand. I thought it would disregard the styles.css file and use the mobile.css file that came with Elefant. Didn't think my style sheet would override it even though its specifically setup in the coding to use the mobile sheet if a mobile device is detected. Strange. I am not sure then what is the purpose of having the viewport meta tag and if else statement if it doesn't use the stylesheet its told to use.

  • edited June 2012

    I have to say I'm none to keen on browser sensing and would prefer to use responsive markup in my CSS based on the website content. You do not know what devices your site will be viewed on, you only know the content and how it should work. This will of of course change based on how and when and where it is being used.

    Design for content out seems to me to be the only realistic option these days. A fluid responsive mobile first site where the breaks in the responsive CSS come not from screen sizes but from the content. It is the hardest and the most time consuming but is probably the best we can do?

    p.s. Sure you can test for a browsers capabilities but this is a very different thing.

  • Yeah...working on responsive theme as well. The method here on this site works well though on both my iPhone and android phone...so I know that it should work well too. I just have to scrap the default mobile sheet and build from scratch.

Sign In or Register to comment.