Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by James Ingmire
James Ingmire
11,901 Points

Help needed to understanding this head tag? CSS HTML PHP

The website works fine in browser view, when viewed on iphone/ipad the layout goes nuts. If i remove css files for smaller viewports then it should work; correct? However need abit of help explaining what is going on, just what stylesheet is getting loaded?

Thank you.

    <head>
        <meta charset="utf-8" />
        <title>Smithy's food</title>
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/styles/reset.css" />
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/styles/text.css" />
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/styles/960.css" />
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url')?>" />
        <?php if($pagename == ""){?>
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/styles/FirstPageStyle.css" />
        <?php

            $browser = array(
                'version'   => '0.0.0',
                'majorver'  => 0,
                'minorver'  => 0,
                'build'     => 0,
                'name'      => 'unknown',
                'useragent' => ''
              );

              $browsers = array(
                'firefox', 'msie', 'opera', 'chrome', 'safari', 'mozilla', 'seamonkey', 'konqueror', 'netscape',
                'gecko', 'navigator', 'mosaic', 'lynx', 'amaya', 'omniweb', 'avant', 'camino', 'flock', 'aol'
              );

              if (isset($_SERVER['HTTP_USER_AGENT'])) {
                $browser['useragent'] = $_SERVER['HTTP_USER_AGENT'];
                $user_agent = strtolower($browser['useragent']);
                foreach($browsers as $_browser) {
                  if (preg_match("/($_browser)[\/ ]?([0-9.]*)/", $user_agent, $match)) {
                    $browser['name'] = $match[1];
                    $browser['version'] = $match[2];
                    @list($browser['majorver'], $browser['minorver'], $browser['build']) = explode('.', $browser['version']);
                    break;
                  }
                }
              }

            if(strtolower($browser['name']) == 'safari') {?>
                <link href="<?php bloginfo('template_url'); ?>/styles/safariStyle.css" rel="stylesheet" type="text/css" />
            <?php }?>
        <?php }else{?>
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/styles/productListStyle.css" />
        <?php }?>
        <link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px) " href="<?php bloginfo('template_url'); ?>/styles/mobile.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:600' rel='stylesheet' type='text/css'>
    </head>
Jacob Herper
Jacob Herper
94,150 Points
Jacob Herper
Jacob Herper
94,150 Points

There are too many different CSS files for my liking. In fact it's not good to have that many CSS files in one document for search engines either. I would start by putting all the CSS files together. It's good to use less than 3 CSS files in one document. Also I don't understand why you would have different CSS files for Safari and other browsers.

To help you with your actual problem I would need to know, what exactly is your problem with the mobile view of your website? It might be easy to fix through CSS, but it's hard to tell without the respective CSS code and an exact description of the problem you're experiencing.

James Ingmire
James Ingmire
11,901 Points

Hi Jacob, thanks for your comment. The problem is the divs don't fill the width of the screen in tablet or phone view, seems like there is a margin right applied but cant find any rule in the css. If you look a the link website it would be easier to view source the css files. Hard to explain unless you look at the site from a tablet or phone.

Was having problems understanding what css file gets loaded depending on what rule, all quite confusing as I did not write the stylesheet rules.

Probably too big problem to ask on here, I will try to plod on, thanks for your time. :)

2 Answers

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi, the answer cetranly knows somebody . You have like I believe one of best people teaching here , professionals , it cant be too big to ask here :smiley:

What I noticed , that you put your image like alone , All the above that Jacob said but you rimage should be in a div cointainer that makes all the page in one place if you know what I mena by that . Like a div that wraps all and then you can set that div however you want with all the content.

Im not completely sure what you raskin for but , as I look on smaller screen . Your website doesn't resize. Did you use % instead of fixed positin ? your image is in fixed position like you wanted but it should cover all the time page so you should put the maring padding in % and the smalle the screen is or bigger, put better image with better quality for the pc and smaller quality for the mobile . You need to use jQuery , you need to use it and you will find that it will work , im pretty sure you meant that?

You should take som JS courses on how to make website interactive and how to manage the content , I hope this helps.

Rudy Tan
PLUS
Rudy Tan
Courses Plus Student 16,635 Points
Rudy Tan
Rudy Tan
Courses Plus Student 16,635 Points

Hello, I opened your website and look at the css. I think you need background-size: cover; on your background image (the blurred cows). It should work I think.

Hope this helps.