Columns problem

Community Forums Forums General Discussion Columns problem

This topic is: not resolved

Tagged: 

This topic contains 12 replies, has 3 voices, and was last updated by  petertravis 1 year, 8 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #5562

    petertravis
    Participant

    Hi all

    I’m pulling my hair out over this one. I’m trying to create columns in a page with my newly purchased eleven40 theme. I’ve followed the instructions on the tutorials page, which is to place the following in the page editor:

    <div class=”one-half first”>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>

    <div class=”one-half”>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>

    I’ve done this but it just shows as two paragraphs, one below the other.  I’ve checked the style.css and the classes are listed. Coincidentally, I went into the demo of this theme on the studiopress website and the columns don’t show up there either.

    Would really appreciate any advice before I’m completely bald.

    Many thanks

    • This topic was modified 1 year, 8 months ago by  petertravis.
    • This topic was modified 1 year, 8 months ago by  petertravis.
    #5566

    Aaron Hartland
    Participant
    Post count: 37

    The columns are showing up when I look at the StudioPress demo site (http://demo.studiopress.com/eleven40/columns/)

    Could you post a link to your site?


    Aaron Hartland | http://www.aaronhartland.com
    Twitter  |  Facebook  |  LinkedIn  |  Google+

    #5568

    petertravis
    Participant

    Hi Aaron

    Here’s a link (by the way, my columns show in Genesis but not wen I activate eleven40):

    http://www.ieltsspeaking.co.uk/content/

    Thanks

    #5574

    petertravis
    Participant

    Hi Again

    I’ve just checked out the eleven40 demo page in Explorer and I can see the columns. But in Chrome they don’t show. I then looked at my page (link above) in Explorer and my columns show but again, not in Chrome. Equally concerning, in Explorer the text in the right hand column disappears on the right of the screen.

    Peter

     

    #5575

    petertravis
    Participant

    More info

    Thee seems to be two problems.

    1) I use Chrome by default and as I said above, the columns don’t show.

    2) Having looked at the demo page on studiopress in Explorer the columns appear within the page OK (not on Chrome), but I also discovered that the left hand menu (where Archives,  Social Media ect is) is actually not on the left at the top any more but squeezed half off the screen at the bottom of the screen. In Chrome the left navigation is OK.

    My screen resolution is 1024 x 768.  I’m a  little concerned that this theme is buggy or not suitable for certain browsers.

    #5576

    Robert Neu
    Participant
    Post count: 90

    You’re seeing the responsive design in action. At that screen resolution the columns switch to a 100% width layout and are stacked on top of each other. That is expected behavior for the theme.

    I’m not sure why you’re still seeing columns in IE unless you are using an old version of IE which does not support media queries by default.


    Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

    #5577

    Aaron Hartland
    Participant
    Post count: 37

    Yes, he (FAT Media) is correct. At your screen resolution, the columns are 100% and won’t show side by side.

    I don’t think you need to adjust this… but if you must… in the “@media only screen and (max-width: 1200px)” section of your css, you could could remove the column widths that you want from the below block of CSS and assign new properties:

    .five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds {
    padding: 0;
    width: 100%;
    }


    Aaron Hartland | http://www.aaronhartland.com
    Twitter  |  Facebook  |  LinkedIn  |  Google+

    #5579

    petertravis
    Participant

    Hi

    Thanks for getting back to me.

    It’s a pity I can’t attach an image as the the eleven40 demo page on Studiopress doesn’t look at all right in Explorer at my res.  I can see what you mean regarding the columns in the page in Chrome. They probably have been stacked, which is possibly why I don’t see them with this browser. But in Explorer,  whilst the columns show, the left hand menu hasn’t been stacked on top of, it’s squeezed down the left/bottom of the page. Looks horrible. I’m using IE8 by the way.

    As far as my site is concerned,  the columns are showing up in Explorer on my page but the text is disappearing off the screen on the right making the right column unreadable. I’m wondering whether I’ve bought the wrong theme as lots of my visitors will be using a screen resolution of 1024 x 768.  Or is this the case with studiopress themes generally?

     

    #5584

    Robert Neu
    Participant
    Post count: 90

    IE8 does not support media queries. The theme you are using is designed using the 1140 grid which means the maximum width is going to be too wide for your screen to display correctly on IE8.

    It’s actually very easy to add a shim (which uses a bit of jQuery) to force IE8 to render media queries correctly if this is something you are concerned about.


    Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

    #5585

    Robert Neu
    Participant
    Post count: 90

    If you want to shim older versions of IE, here is how to do it:

    Download respond.min.js from this github repository:

    https://github.com/scottjehl/Respond

    Inside your theme’s root directory create a new folder called js and place respond.min.js inside that folder.

    Then in your functions.php file add the following:

    /** Add support for media queries in IE */
    add_action(‘get_header’, ‘eleven40_load_scripts’);
    function eleven40_load_scripts() {
    global $is_IE;
    if($is_IE) {
    wp_enqueue_script(‘respond’, $src = CHILD_URL.’/js/respond.min.js’, array(‘jquery’), TRUE);
    }
    }

    Upload everything to your web server and test the results.


    Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

    #5592

    petertravis
    Participant

    Thanks for fantastic support everyone, especially on a Sunday. I’m happy to give these changes a go even though I’m a novice. But at the risk of seeming ungrateful, my problem is I bought a responsive theme because I wanted the site to be as accessible as possible to as many users  as possible. Unfortunately it seems this theme is designed for modern browsers/screen resolutions. I’m using the latest version of Chrome and columns don’t appear and there are the issues with IE8 mentioned above.  Many of my visitors will be on similar setups and I’m wondering how much tinkering will be necessary to get the site right for these people.

    I really like the look of eleven40 and would like to stick with it. But will it mean a lot of customisations to css, javascript etc? If so I might become a nuisance in this forum as I will need a bit of help!!

    Thanks

    #5602

    Robert Neu
    Participant
    Post count: 90

    The issue you’re seeing in Chrome isn’t really an issue, it’s part of how the theme is designed.

    One option you could consider would be to use  http://studiopress.com/themes/agency/ as it is designed using a 960 grid system which will display correctly on lower resolution screens. It should display correctly even on older versions of IE without a polyfill script like the one I posted above.

    A 1024×768 screen resolution is quickly becoming uncommon and older versions of IE are falling out of use as well. Are you sure that your site will have a large amount of visitors with small screens AND outdated browsers?


    Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

    #5609

    petertravis
    Participant

    Hi

    Not huge numbers,  about 10% on IE8 or lower and around 14% on 1024×768 or thereabouts.  Still  a significant amount of people, though as you say a dwindling number.  And with the responsive theme I’d hopefully pick up  a lot more mobile users.

    I was hoping to design a homepage similar to studiopress’, which is the reason for wanting columns.  Or is the layout there (blocks of text left and right every so often) achieved in another way?

    Thanks

    Pete

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.