ThemeShaper Forums » Thematic

[closed]

Responsive Web Design and Thematic

(53 posts)
  • Started 12 years ago by cas
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. amzero427
    Member

    I hope this isn't backtracking too many posts, just had a quick question:

    I'm using Helga's 2-col-r-fluid.css layout, which includes:

    @media only screen and (max-width: 1023px) {
    body {
    font-size: 0.8em; /* Makes type a bit smaller at 1024 so layout doesn't look unbalanced */
    line-height: 1.5em; /* As above */
    }
    }
    
    @media handheld, only screen and (max-width: 767px) {
    
    body {
    font-size: 16px;
    line-height: 24px;
    -webkit-text-size-adjust: none; /* Stops the iPhone scalling type up */
    }
    
    #container {
    width: 100%;
    margin: 0 0 22px 0;
    }
    
    .main-aside {
    margin-top: 22px;
    width: 100%;
    float: none;
    clear: both;
    }
    
    #primary {
    margin-right: 3.8%;
    }
    #footer {
    margin-top;
    }
    #subsidiary {
    padding-top: 0;
    }
    #subsidiary .aside {
    width: 100%;
    float: none;
    margin:0 0 22px 0;
    }
    
    .page-template-template-page-fullwidth-php #comments {
    width: 100%;
    }
    
    }

    And it seems to work only sometimes on an Android phone, but only sometimes, and on iOS it doesn't at all. When I drop the

    add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');
    
    function childtheme_media_queries_meta() { ?>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <?php
    }
    add_filter('wp_head', 'childtheme_media_queries_meta');

    in my functions.php, I get an error that reads:

    "Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'childtheme_create_stylesheet' was given in _________/wp-includes/plugin.php on line 166"

    I'm sorry if this is a stupid question, am I missing something?

    Helga, the layout is AWESOME by the way, very nice!

    Posted 12 years ago #
  2. amzero427
    Member

    Er, please disregard my last post, silly question.

    Posted 12 years ago #
  3. i presume you figured out that your function names didn't match up? glad you like the layout. wish i had more time to work on those.

    Posted 12 years ago #
  4. amzero427
    Member

    Heheh, yeah, realized it when I came back to it after posting. Works great now though, your layout is really sweet and I added some css for max-width: 480px, which looks great on the iPhone

    Posted 12 years ago #
  5. This was posted today: http://www.alistapart.com/articles/fluid-images/

    Posted 11 years ago #
  6. interesting read. i'm still trying to figure out how to serve different-sized images to different resolutions. ideally a mobile site shouldn't load a monster image that is meant for a 30" monitor.

    Posted 11 years ago #
  7. @helga.
    thats the best approach.
    i'm working on something using jquery, conditionals and various thumbnail sizes.

    Posted 11 years ago #
  8. oh, thats for category/index type stuff. still no solution for single post image insert (other than the width 100% approach)

    Posted 11 years ago #
  9. whiteweazel21
    Member

    Amzero, what is that function used for? o.o

    Posted 11 years ago #
  10. @ww w/o that function, mobiles just zoom the hell out to try to show the entire site on their tiny screen and your beautifully crafted media queries don't do anything.

    @all - been dabbling w/ these 2 solutions for loading appropriately-sized images:

    http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

    http://www.sencha.com/products/io/

    anybody used either?

    Posted 11 years ago #
  11. whiteweazel21
    Member

    Hey Helga, any chance you check e-mail via the contact form on your website? I sent an e-mail a few days ago but was not sure if you got it or not, or how else to contact you (no idea how to use twitter lol).

    Also...as far as the function names not matching up, they seem to match to me. I am getting the same error as Amzero, what am I missing? I wish I didn't know it was a silly quuestion, but I am rather completely in the dark when it comes to php.

    Posted 11 years ago #
  12. ummm... my website is rather defunct- though i thought the contact form did/could/should work. you could email me at my username at gmail .

    re-reading amzero's post.

    add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');

    he and you are both trying to add a function called 'childtheme_create_stylesheet' to the 'thematic_create_stylesheet' , but atleast in the block of code he posted there is no such function ... hence the error

    Posted 11 years ago #
  13. just pushed out a first version of the 3col.css layout (the one w/ a sidebar on each side) on the 1140 fluid grid. check it out and let me know what you find.

    https://github.com/helgatheviking/Thematic-Adaptive/blob/master/1140gs/3-col-fluid.css

    Posted 11 years ago #
  14. Some nice responsive design resources gathered here:

    http://www.netmagazine.com/features/21-top-tools-responsive-web-design

    Posted 11 years ago #
  15. amzero427
    Member

    Having an issue with Internet Explorer, though I have this script- from dougals post on the previous page- in my functions.php :

    function childtheme_scripts() {?>
    <!--[if lt IE 9]>
        <script src="/wp-content/themes/alternate/js/css3-mediaqueries.js" type="text/javascript"></script>
    <![endif]-->
    
    <?php }
    add_action('wp_head','childtheme_scripts');

    The entire site isn't showing up, here's the site:

    http://corydonovan.com

    Any thoughts?

    Posted 11 years ago #
  16. i think i had some problems w/ that script and had to switch to respond.js instead.
    http://filamentgroup.com/lab/respondjs_now_available_in_modernizr/

    also console is reporting an error w/ supersubs but I'm not sure what the cause of that is.

    Posted 11 years ago #
  17. amzero427
    Member

    Thanks Helga, I'll give it a shot!

    I think the supersubs have something to do with the "share this" plugin. I uninstalled 'em for a bit and the errors went away, but didn't notice any issues with them reinstalled, other than the errors being listed...

    Posted 11 years ago #
  18. amzero427
    Member

    Still no luck. Am I forgetting or missing something obvious? Is there a clear:both that I've failed to use somewhere or something?

    Posted 11 years ago #
  19. i am using thematic adaptive on both of my sites.. thx Helga
    murekkep.org and turknikon.com

    Posted 11 years ago #
  20. butters81
    Member

    Neither of the two js scripts (respond.js or css3-media-queries.js) appear to work if you are importing (@import) your mediaqueries into your main stylesheet. So you'll need to copy all your media queries over to your main stylesheet. Although I imagine some plugins will combine all your css for you into one file, which might work.

    Unless anyone has a better workaround?

    Posted 11 years ago #
  21. Thanks so much Helga!
    The two column layout is wonderful!!! Going to prove very useful I'm sure.

    Posted 10 years ago #
  22. Well, since you bumped the thread....

    You may want to check out Responsive Base. It is a mobile-first approach to responsive web design using Thematic, it also uses the math from helgatheviking's adaptive layouts.

    Posted 10 years ago #
  23. Hey folks,

    Take a look at my company’s new responsive design website www.dronamobile.com, you would be able to push and pull the browser window to test the "responsiveness" of this website. When I reduce the width of the browser, everything just flows "under" the browser frame and is cut off, just like the web content. Do explore and share your feedback about it...

    Team Deltecs

    Posted 10 years ago #
  24. @TeamDeltecs - please open any new questions over at the new site: www.thematictheme.com

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.