SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Mobile Friendly Stylesheet

    I have a website that I just need to make some minor changes to the CSS. Otherwise it looks pretty good on mobile devices. Instead of rewriting a whole stylesheet for mobile devices, how can I implement some minor changes.

    I have a Thrive and and iPhone that display similar discrepancies, but I'm not sure how to implement the changes so just mobile devices can detect these changes.

    Thank you.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You can use the media queries . Take for example, this.

    <link rel="stylesheet" type="text/css" media="all" href="main.css">
    <link rel="stylesheet" type="text/css" media="handheld" href="minorchangestoMobiles.css">

    In the 2nd stylesheet, you would just be making the minor changes there. Note how it comes AFTER the main.css stylesheet, which allows the 2nd sheet to override the first, where applicable .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks RyanReese!

    I was able to do the following:
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/template.css" type="text/css" />
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1024px)" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/mobile.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/mobile.css" />
    <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio:1.5)" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/android.css" />
    <link rel="stylesheet" type="text/css" media="handheld" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/android.css">
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

    but when I view the site on my Android, the only thing that I saw different was the ratio size of the screen. My main menu is still wrapping the last menu item.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I don't have an andriod so I won't be able to help.

    Wrapping items usually indicates that there isn't enough width on the screen to hold them all on the same line. Make sure you do indeed have enough room.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, RyanReese.

    I was able to get it to work well with my iPhone, but menu is still wrapping with the Android Thrive. Looks like I'll need to look into it a little further.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •