Welcome to PressWork!

Want to ask a question or join the discussion? Great! Join now.

In this Discussion

Why do PressWork sites look like crap on iPad?
  • Hi

    I've done two PressWork sites, and both look crappy on iPad. It seems like the total site width / container becomes too small, so the sidebar visually extends too far to the right.

    http://www.galleripind.dk/
    http://www.leadyourself.dk/

    What gives? How can it be fixed?

    Oliver
  • PressWork made sites are looking good by default on tablets and smartphones as you can test in the demo here http://demos.presswork.me/

    I had a look at your sites, and the customization you made is poorly implemented from a css point a view, so the sites still look good in normal screens but the css you added " broke" them on smaller resolution screens. You will have to revise your css to fix this.
    Post edited by cestbibi at 2011-11-22 17:14:57
    image PressWork Support Moderator
  • Hey cestbibi

    That would be odd, as my other sites built on Thesis, Genesis as well as ones based on themes I built from scratch all show up fine on the iPad.

    I just tried removing all custom code from style.css and the PressWork site still showed up wrong, as in the container gets too narrow, so the footer wraps to two lines, the sidebar extends beyond the container etc.

    So it can't be my code then, right?

    Maybe there's a bug in the way PressWork handles various content and sidebar widths. That's my guess. This site is set up as:

    600 pixel content area.
    300 pixel sidebar.
    40 pixel gutter.
  • I think you didn't go to test http://demos.presswork.me/ as I suggested because you'd have seen that there's no bug.

    So here a few examples of what I meant when I said you have to revise your css and put in better solutions :

    in http://www.leadyourself.dk/
    You created a new id ul#menu-hovedmenu.menu wich you are floating to the right which breaks the layout in smaller resolutions.

    again in http://www.leadyourself.dk/ydelser/
    You introduced a text widget to style your 3 colored under header. To create it you are using a <table> which has a fixed width of 910px. How do you expect the fluid layout to degrade nicely to smaller resolutions ?

    in http://www.galleripind.dk/
    you assigned to li#nav.mainl a fixed width of 980px to the element, so this only, again prevents the fluid content to degrade to smaller resolutions

    Frameworks are not coded all the same, they have their own specs of course, it's a good opportunity for us all to learn and improve our skills.
    image PressWork Support Moderator
  • I read what you're saying, and will dig into my CSS, but I have to ask:

    Why would the sites have to degrade gracefully to a smaller resolution, as I assume the total site width is fixed (not fluid / responsive) and since the sites are less than the total width allowed by the iPad 1024 px wide display?

    Thanks for your explanation and help. I really do appreciate it.

    Oliver
  • Hey Oliver,

    Responsive design means that the width of all elements is fixed up to a certain resolution. When it triggers, lets say, a resolution of 768px (Tablets) or 480px (Smartphones) then the width and floating of all elements changes and adapt gracefully so they look better with the new dimensions.

    If you have a little time, this is a very interesting read : http://www.alistapart.com/articles/responsive-web-design/


    image PressWork Support Moderator
  • Thanks for the link which I'll read. I do know what responsive design is. What I meant with my question was, since the iPad has 1024 px wide screen with no browser chrome to take additional space, it should show my 960 px wide site just fine (the site fits within resolution of the iPad, ie. there shouldn't be an issue?)
  • "... To create it you are using a which has a fixed width of 910px. How do you expect the fluid layout to degrade nicely to smaller resolutions ?" What fluid layout? Is PressWork a fluid layout? I usually work with fixed layouts.PS: I don't know why the forum collapses all the paragraphs I'm writing into solid blocks of text. Using Chrome.
    Post edited by webmatros at 2011-11-23 15:13:47
  • Here is the css rule that is applied when detecting a Tablet device :
    @media only screen and (max-device-width: 768px), only screen and (max-width: 768px) {
    #body-wrapper { width: 720px !important; padding: 0 10px; }
    #maincontent { width: 454.516129032px !important; }
    #firstsidebar { width: 232.258064516px !important; }
    #secondsidebar { width: 124.35483871px !important; }


    So.., even if your width is 910px (less than the theorical 1024px max) BECAUSE it detects it is a Tablet , the rest of the layout (as you can see in the css above) adapts to new dimensions (body-wrapper width 720px).
    image PressWork Support Moderator
  • How do I disable those rules?
  • I am not interested in the theme forcing structural choices like that upon me. So please let me know how I can disable those rules. I can't find the files where they reside.

    ?
  • cestbibicestbibi
    This answer was Accepted.
    You'll find these rules set in presswork/admin/inc/stylesheet.php
    These are the core files, so whether you comment out or delete those rules, be minded that when you'll update PressWork in the future you'll loose your changes.
    image PressWork Support Moderator
  • Any chance I can accomplish it without hacking core theme files?
  • cestbibicestbibi
    This answer was Accepted.
    Ah! You for sure are challenging :) . You can achieve it but you'd need to create a child theme which is quite straight away really (see here: http://presswork.me/2011/creating-a-child-theme-for-presswork/) Then you will need to create a functions.php file and put it to the root of your child theme directory.
    With you favorite editor open the functions.php file and paste the following code
    <?php
    function pw_header_css() {
    global $pw_content_width, $pw_first_sidebar, $pw_second_sidebar, $pw_body_margins, $pw_margins, $pw_site;
    $ipad = 720 / $pw_site;
    $fullsite = $pw_site;
    $mainlineheight = round(pw_theme_option('main_size')*1.4);
    $right_col_padding = get_option('thumbnail_size_w') + 15;
    ?>
    <!-- PressWork Theme Option CSS -->
    <style type="text/css"<?php if(pw_theme_option('toolbox')=="on" && current_user_can( "edit_theme_options" )) echo ' id="pw_style_preview"'; ?>>
    body { font-family: <?php echo pw_theme_option("body_font"); ?>; font-size: <?php echo pw_theme_option("body_font_size"); ?>px; }
    h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-family: <?php echo pw_theme_option("headers_font"); ?>; }
    #body-wrapper { color: <?php echo pw_theme_option('main_text_color'); ?>; width: <?php echo $pw_site; ?>px; padding: <?php echo $pw_body_margins; ?>px; background-color: <?php echo pw_theme_option('page_background_color'); ?>; }
    #main-wrapper > li { margin: 0 <?php echo $pw_margins/2; ?>px; }
    #main-wrapper .el3 { *margin-left: <?php echo $pw_margins; ?>px; }
    #firstsidebar { width: <?php echo $pw_first_sidebar; ?>px; }
    #secondsidebar { width: <?php echo $pw_second_sidebar; ?>px; }
    #maincontent { width: <?php echo $pw_content_width; ?>px; }
    body.fullwidth #maincontent { width: <?php echo $fullsite; ?>px; margin: 0; }
    .siteheader a { color: <?php echo pw_theme_option('siteheader_color'); ?>; }
    .siteheader a:hover { color: <?php echo pw_theme_option('siteheader_color_hover'); ?>; }
    #description { color: <?php echo pw_theme_option('description_color'); ?>; }
    a { color: <?php echo pw_theme_option('a_color'); ?>; background: <?php echo pw_theme_option('a_background_color') ; ?> }
    a:hover { color: <?php echo pw_theme_option('a_color_hover'); ?>; background: <?php echo pw_theme_option('a_background_color_hover') ; ?> }
    #nav nav ul { background: <?php echo pw_theme_option('nav_background_color'); ?>; }
    #nav nav a { color: <?php echo pw_theme_option('nav_color'); ?> }
    #nav nav a:hover, #nav nav .sub-menu li, #nav nav li:hover { color: <?php echo pw_theme_option('nav_color_hover'); ?>; background: <?php echo pw_theme_option('nav_background_color_hover') ; ?>; }
    #subnav nav ul { background: <?php echo pw_theme_option('subnav_background_color'); ?>; }
    #subnav nav a { color: <?php echo pw_theme_option('subnav_color'); ?> }
    #subnav nav a:hover, #subnav nav .sub-menu li, #subnav nav li:hover { color: <?php echo pw_theme_option('subnav_color_hover'); ?>; background: <?php echo pw_theme_option('subnav_background_color_hover') ; ?>; }
    #footer nav ul { background: <?php echo pw_theme_option('footernav_background_color'); ?>; }
    #footer nav a { color: <?php echo pw_theme_option('footernav_color'); ?> }
    #footer nav a:hover, #footer nav .sub-menu li, #footer nav li:hover { color: <?php echo pw_theme_option('footernav_color_hover'); ?>; background: <?php echo pw_theme_option('footernav_background_color_hover') ; ?>; }
    h1.catheader { color: <?php echo pw_theme_option('category_header_color'); ?>; }
    article .meta { color: <?php echo pw_theme_option('post_meta_color'); ?>; }
    article .posttitle, article .posttitle a { color: <?php echo pw_theme_option('post_title_color'); ?>; }
    article .posttitle a:hover { color: <?php echo pw_theme_option('post_title_color_hover'); ?>; }
    article .content-col { padding-left: <?php echo $right_col_padding; ?>px; }
    </style>
    <!-- eof PressWork Theme Option CSS -->
    <?php
    }
    ?>


    I have not thoroughly tested this , though it works, but take this with caution please, and test with your devices.
    image PressWork Support Moderator
  • I already use child themes, so this was an easy fix - THANK YOU THANK YOU THANK YOU !!!

    Just one last question - why does PressWork have both an actions.php file as well as a functions.php file?
  • cestbibicestbibi
    This answer was Accepted.
    I'm not developer of PressWork, this is just my guess, functions.php is used for settings that have to do with filtering Wordpress itself and core functions of PressWork, whereas actions.php is used for the customization of the theme (or child theme)
    image PressWork Support Moderator
  • Would be my guess too.

    Thanks again for your help regarding this topic. Much appreciated.

    Oliver
  • Will I have to just add this code at the end, or overwrite whats already there?
    cestbibi said:

    Ah! You for sure are challenging :) . You can achieve it but you'd need to create a child theme which is quite straight away really (see here: http://presswork.me/2011/creating-a-child-theme-for-presswork/) Then you will need to create a functions.php file and put it to the root of your child theme directory.
    With you favorite editor open the functions.php file and paste the following code

    <?php
    function pw_header_css() {
    global $pw_content_width, $pw_first_sidebar, $pw_second_sidebar, $pw_body_margins, $pw_margins, $pw_site;
    $ipad = 720 / $pw_site;
    $fullsite = $pw_site;
    $mainlineheight = round(pw_theme_option('main_size')*1.4);
    $right_col_padding = get_option('thumbnail_size_w') + 15;
    ?>
    <!-- PressWork Theme Option CSS -->
    <style type="text/css"<?php if(pw_theme_option('toolbox')=="on" && current_user_can( "edit_theme_options" )) echo ' id="pw_style_preview"'; ?>>
    body { font-family: <?php echo pw_theme_option("body_font"); ?>; font-size: <?php echo pw_theme_option("body_font_size"); ?>px; }
    h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-family: <?php echo pw_theme_option("headers_font"); ?>; }
    #body-wrapper { color: <?php echo pw_theme_option('main_text_color'); ?>; width: <?php echo $pw_site; ?>px; padding: <?php echo $pw_body_margins; ?>px; background-color: <?php echo pw_theme_option('page_background_color'); ?>; }
    #main-wrapper > li { margin: 0 <?php echo $pw_margins/2; ?>px; }
    #main-wrapper .el3 { *margin-left: <?php echo $pw_margins; ?>px; }
    #firstsidebar { width: <?php echo $pw_first_sidebar; ?>px; }
    #secondsidebar { width: <?php echo $pw_second_sidebar; ?>px; }
    #maincontent { width: <?php echo $pw_content_width; ?>px; }
    body.fullwidth #maincontent { width: <?php echo $fullsite; ?>px; margin: 0; }
    .siteheader a { color: <?php echo pw_theme_option('siteheader_color'); ?>; }
    .siteheader a:hover { color: <?php echo pw_theme_option('siteheader_color_hover'); ?>; }
    #description { color: <?php echo pw_theme_option('description_color'); ?>; }
    a { color: <?php echo pw_theme_option('a_color'); ?>; background: <?php echo pw_theme_option('a_background_color') ; ?> }
    a:hover { color: <?php echo pw_theme_option('a_color_hover'); ?>; background: <?php echo pw_theme_option('a_background_color_hover') ; ?> }
    #nav nav ul { background: <?php echo pw_theme_option('nav_background_color'); ?>; }
    #nav nav a { color: <?php echo pw_theme_option('nav_color'); ?> }
    #nav nav a:hover, #nav nav .sub-menu li, #nav nav li:hover { color: <?php echo pw_theme_option('nav_color_hover'); ?>; background: <?php echo pw_theme_option('nav_background_color_hover') ; ?>; }
    #subnav nav ul { background: <?php echo pw_theme_option('subnav_background_color'); ?>; }
    #subnav nav a { color: <?php echo pw_theme_option('subnav_color'); ?> }
    #subnav nav a:hover, #subnav nav .sub-menu li, #subnav nav li:hover { color: <?php echo pw_theme_option('subnav_color_hover'); ?>; background: <?php echo pw_theme_option('subnav_background_color_hover') ; ?>; }
    #footer nav ul { background: <?php echo pw_theme_option('footernav_background_color'); ?>; }
    #footer nav a { color: <?php echo pw_theme_option('footernav_color'); ?> }
    #footer nav a:hover, #footer nav .sub-menu li, #footer nav li:hover { color: <?php echo pw_theme_option('footernav_color_hover'); ?>; background: <?php echo pw_theme_option('footernav_background_color_hover') ; ?>; }
    h1.catheader { color: <?php echo pw_theme_option('category_header_color'); ?>; }
    article .meta { color: <?php echo pw_theme_option('post_meta_color'); ?>; }
    article .posttitle, article .posttitle a { color: <?php echo pw_theme_option('post_title_color'); ?>; }
    article .posttitle a:hover { color: <?php echo pw_theme_option('post_title_color_hover'); ?>; }
    article .content-col { padding-left: <?php echo $right_col_padding; ?>px; }
    </style>
    <!-- eof PressWork Theme Option CSS -->
    <?php
    }
    ?>


    I have not thoroughly tested this , though it works, but take this with caution please, and test with your devices.


  • You have to add it.
    Don't use the functions.php in de presswork directory. Create a child theme as explained here http://presswork.me/2011/creating-a-child-theme-for-presswork/ and next create a functions.php file that you place in the root of your newly created child theme.
    image PressWork Support Moderator
  • I just added a new pw_media_queries() hook so you can easily remove the media queries using this:
    remove_action('pw_media_queries', 'pw_add_media_queries');


    This will be available in PW version 1.0.4.
    image Senior Developer & Co-Founder of PressWork
  • Nice addition, thanks!